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 相关文章推荐
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
Node调用Java的示例代码
Sep 20 Javascript
vue实现树状表格效果
Dec 29 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
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
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
Python实现调度算法代码详解
2017/12/01 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
Python 合并拼接字符串的方法
2020/07/28 Python
python regex库实例用法总结
2021/01/03 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
承诺书模板大全
2015/05/04 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android