vue项目中在可编辑div光标位置插入内容的实现代码


Posted in Javascript onJanuary 07, 2020

vue项目中在可编辑div光标位置插入内容

html:

<div class="mouse-move fl f12 h22 lh22 mg-r5 sms-item"
   @dragstart="dragStart($event, item.labelName)"
   draggable='true'
 v-for="(item, index) in modelCommonList"
   :key="index"
   @click="dropRelease($event, item.labelName)">
   {{item.labelName}}
 </div>
<div contenteditable="true"
   @drop="dropRelease($event)"
   @dragover="allowDrop($event)"
   ref="smsContent"
   class="border-r4 f12 h100 pd-tb10 pd-lr10 overflow-scroll-y editable-div"
   id="smsContent">
</div>

methods:

insertHtmlAtCaret(html) {
    let sel, range;
    if (window.getSelection) {
      // IE9 and non-IE
      sel = window.getSelection();
      if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();
        let el = document.createElement("div");
  el.appendChild(html)
        var frag = document.createDocumentFragment(), node, lastNode;
        while ((node = el.firstChild)) {
          lastNode = frag.appendChild(node);
        }
        range.insertNode(frag);
        if (lastNode) {
          range = range.cloneRange();
          range.setStartAfter(lastNode);
          range.collapse(true);
          sel.removeAllRanges();
          sel.addRange(range);
        }
      }
    } else if (document.selection && document.selection.type != "Control") {
      // IE < 9
      document.selection.createRange().pasteHTML(html);
    }
  },
 //开始拖动可选字段
  dragStart(event, name) {
    event = event || window.event;
    this.dragging = name; //str
    event.dataTransfer.setData(" ", " "); //for firefox
  },
  //阻止默认事件
  allowDrop(event) {
    let e = event || window.event;
    if (e && e.preventDefault) {
      e.preventDefault();
    } else {
      window.event.returnValue = false;
    }
  },
  //拖动到指定位置并释放
  dropRelease(event, nodeValueName) {
    event = event || window.event;
    event.preventDefault();
    let textNode = document.createElement('input');
    textNode.className = 'mg-lr5 enabledTag';
    textNode.type = 'button';
    textNode.value = this.dragging || nodeValueName;
    this.insertHtmlAtCaret(textNode);
    this.dragging = '';
  },

总结

以上所述是小编给大家介绍的vue项目中在可编辑div光标位置插入内容的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
JQuery工具函数汇总
Jun 15 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 #Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 #Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 #Javascript
微信小程序服务器日期格式化问题
Jan 07 #Javascript
webpack 最佳配置指北(推荐)
Jan 07 #Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 #Javascript
vue实现数据控制视图的原理解析
Jan 07 #Javascript
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
js中this的用法实例分析
2015/01/10 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
python进阶教程之模块(module)介绍
2014/08/30 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
基于Python闭包及其作用域详解
2017/08/28 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
python3去掉string中的标点符号方法
2019/01/22 Python
Django框架实现的分页demo示例
2019/05/25 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
教师找工作推荐信
2013/11/23 职场文书
简历自我评价怎么写好呢?
2014/01/04 职场文书
减负增效提质方案
2014/05/23 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
pytorch 实现在测试的时候启用dropout
2021/05/27 Python