一、插入自定义内容
要求:点击按钮,在富文本编辑器中插入对应的内容
实现:给按钮加一个点击事件 @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 || '');
},