vue使用wangEditor富文本光标乱飘

本文介绍了一种解决Vue项目中使用wangEditor富文本编辑器时出现的光标乱飘问题的方法。通过在监听文本内容更新时加入判断逻辑,在用户输入文本时使监听无效,从而避免了光标位置的错误变动。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

记录下:vue使用wangEditor封装了个富文本编辑器编辑时光标老乱飘

解决方案:

光标乱飘可以在watch监听文本内容实时更新时,在输入文本的时候让监听无效。

data() {
    return {
      editor: null,
      editorContent: null,
      isChange: false,// 加个判断值
    };
  },
  watch: {
  	// isChange 监听实时更新,判断输入文本时让监听无效
    value(val) {
      if (!this.isChange) {
        this.editorContent = val;
        this.editor.txt.html(val);
      }
      this.isChange = false;
    },
    initEditor() {
      this.editor = new WEditor(this.$refs.editor);
      this.editor.config.menus = [
        'head',
        'bold',
        'fontSize',
        'fontName',
        'italic',
        'strikeThrough',
        'justify',
        'quote',
        'undo',
        'redo',
      ];
      this.editor.config.customUploadImg = (resultFiles, insertImgFn) => {
        const formData = new FormData();
        resultFiles.forEach((item) => {
          formData.append('file', item);
        });
        uploadImage(formData).then((data) => {
          console.log(data);
          insertImgFn(data);
        });
      };
      this.editor.config.onchange = (html) => {
      	// 这儿得赋值让离开编辑后状态又生效
        this.isChange = true;
        this.editorContent = html;
        this.$emit('change', this.editorContent);
      };
      this.editor.config.zIndex = 2;
      this.editor.create();
    },
### wangeditor 富文本编辑器 V3 使用教程 #### 安装与引入 为了在项目中集成 `wangeditor` v3,需先通过包管理工具安装对应的库。对于 Vue 2.x 的环境而言,可以采用如下命令来完成依赖项的添加[^2]。 ```bash yarn add @wangeditor/editor-for-vue # 或者使用 npm npm install @wangeditor/editor-for-vue --save ``` #### 初始化配置 创建并初始化编辑器实例时,可以通过自定义配置对象来进行个性化设置。例如监听编辑器内容变化事件,在每次编辑器的内容发生更改时触发特定逻辑: ```javascript editor.customConfig.onchange = () => { console.log('Content has been changed'); }; ``` 此方法允许开发者实时获取最新的 HTML 文本,并执行相应的业务操作,比如保存到数据库或是更新预览区域[^1]。 #### 插入内容于当前光标位置 针对希望向指定位置插入新内容的需求,可通过调用 API 方法实现这一功能。具体来说就是利用编辑器提供的接口将字符串形式的数据精准地放置在用户正在编辑的位置上: ```javascript // 假设 editor 已经被正确初始化 const contentToInsert = '这是要插入的文字'; editor.command(null, 'insertHTML', contentToInsert); ``` 上述代码片段展示了如何动态往文档流里注入新的 HTML 片段,而不会影响原有结构和样式。 #### 解决常见问题 如果在实际开发过程中遇到了一些棘手的技术难题,则可以从官方文档或其他社区资源寻找解决方案。通常情况下,大部分问题都可以通过对参数调整、版本兼容性检查等方式得到妥善处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值