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 onpropertychange输入框 事件获取属性
Mar 26 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
Javascript作用域和作用域链原理解析
Mar 03 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
php中日期加减法运算实现代码
2011/12/08 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
Python实现的几个常用排序算法实例
2014/06/16 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
Python中内建函数的简单用法说明
2016/05/05 Python
scrapy爬虫完整实例
2018/01/25 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
超实用的 30 段 Python 案例
2019/10/10 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
体育教师求职信
2014/05/24 职场文书
影子教师研修方案
2014/06/14 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
琅琊山导游词
2015/02/05 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
春晚观后感
2015/06/11 职场文书
Python图像处理之图像拼接
2021/04/28 Python
php实例化对象的实例方法
2021/11/17 PHP
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python