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 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
Vue分页组件实例代码
Apr 17 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 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
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
JsDom 编程小结
2011/08/09 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
sklearn+python:线性回归案例
2020/02/24 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
一个C/C++编程面试题
2013/11/10 面试题
酒店节能降耗方案
2014/05/08 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
python中%格式表达式实例用法
2021/06/18 Python
Python中的 No Module named ***问题及解决
2022/07/23 Python