富文本编辑器插入自定义内容，内容可替换vue

最新推荐文章于 2024-03-19 11:17:24 发布

h_6543210

最新推荐文章于 2024-03-19 11:17:24 发布

阅读量1.2k

点赞数 1

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/m0_68428581/article/details/133174365

版权

一、插入自定义内容

要求：点击按钮，在富文本编辑器中插入对应的内容

实现：给按钮加一个点击事件 @click="addCondition(item)"

<el-form-item label="类型" class="contentN">
  <div class="lefts">
    <el-row>
      <el-col :lg="8" v-for="(item, index) in arrList" :key="index" style="padding: 0 5px;">
          <el-button type="primary" size="small" class="butBq" @click="addCondition(item)">                                      
                <p>{{item.formValue}}</p>
          </el-button>
       </el-col>  
    </el-row> 
  </div>
</el-form-item>

<el-form-item label="模板内容" class="contentN" prop="content" >
       <editor v-model="form.content" ref="myQuillEditor" class="Editor"/>     
</el-form-item>

addCondition(data) {
     let formValue='{' + data.formValue+ '}'
     // 获取编辑器对象
     let quill = this.$refs.myQuillEditor.Quill;           
     // 获取编辑器光标位置
     let index = quill.selection.savedRange.index;           
     // 插入文本至光标位置，
     quill.insertText(index, formValue);                                
     // 重新计算index
     index+=formValue.length        
     // 移动光标至文本后面
     quill.setSelection(index); 
},

二、替换对应的内容

content为替换前获取的内容

一般替换主要代码如下：

const replacements = {
     '{变更说明}': '要替换的内容a',
     '{项目名称}': '要替换的内容b',
     '{标的编号}': '要替换的内容c',
}
const pattern = new RegExp(Object.keys(replacements).join('|'), 'gi');
content =content.replace(pattern, (match) => replacements[match]);

在富文本编辑器中替换：

changeNotices(content) {
  const replacements = {
     '{变更说明}': '要替换的内容a',
     '{项目名称}': '要替换的内容b',
     '{标的编号}': '要替换的内容c',
  }
  const pattern = new RegExp(Object.keys(replacements).join('|'), 'gi');
  content =content.replace(pattern, (match) => replacements[match]);      
  this.renderHTML(content)  
}
renderHTML(content) {
  //生成公告
  const Editor = this.$refs.Editor.Quill
  Editor.setText('');
  Editor.clipboard.dangerouslyPasteHTML(content || '');
},