富文本编辑器插入自定义内容,内容可替换vue
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
一、插入自定义内容
要求:点击按钮,在富文本编辑器中插入对应的内容
实现:给按钮加一个点击事件 @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 || '');
},
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)