如何在Tinymce中为选中文本添加自定义链接功能

一，首先在Tinymce标题栏自定义添加链接的按钮

如图为新加的按钮

方法：

1.在富文本页面定义按钮，以组件形式引入

代码为：

<editorLink color="#1890ff" class="editor-upload-btn"/>

</div>

2.组件这样定义，直接付代码，页面为editorLink.vue

<div class="linkButton" @click=" dialogVisible=true;addLink()"><i class="linkIcon"></i></div>

<el-dialog :visible.sync="dialogVisible">

<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">

<el-form-item label="地址">

<el-input v-model="formLabelAlign.url"></el-input>

</el-form-item>

</el-form>

<el-button @click="dialogVisible = false">取 消</el-button>

<el-button type="primary" @click="addLinkSubmit">确 定</el-button>

</el-dialog>

3.在页面editorLink.vue中的方法中，如图：

（1）tinyMCE.activeEditor.selection.getContent()获取富文本编辑器中选中的文本

（2） let linkTab=’’ + this.selText + ''生成链接

（3）tinyMCE.activeEditor.selection.setContent(linkTab)设置编辑器中选中的文本为链接形式

4.实际效果为：