如何在Tinymce中为选中文本添加自定义链接功能
一，首先在Tinymce标题栏自定义添加链接的按钮
如何在Tinymce中为选中文本添加自定义链接功能
如图为新加的按钮
方法：
1.在富文本页面定义按钮，以组件形式引入
如何在Tinymce中为选中文本添加自定义链接功能
代码为：
<div class="editor-link-btn-container">
<editorLink color="#1890ff" class="editor-upload-btn"/>
</div>
2.组件这样定义，直接付代码，页面为editorLink.vue
<template>
<div class="upload-container">
<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>
</div>
</template>
<script>
export default {
name: 'EditorLink',
props: {
},
data() {
return {
dialogVisible: false,
listObj: {},
fileList: [],
formLabelAlign: {
url: 'https://www.baidu.com',
},
selText:''
}
},
methods: {
addLinkSubmit(){
let linkTab='<a href="'+this.formLabelAlign.url+'">' + this.selText + '</a>'
tinyMCE.activeEditor.selection.setContent(linkTab)
this.dialogVisible=false
},
addLink(){
this.selText=tinyMCE.activeEditor.selection.getContent()
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.linkButton{
padding: 6px 6px;
font-size: 14px;
line-height: 20px;
*line-height: 16px;
cursor: pointer;
color: #595959;
text-align: center;
overflow: visible;
-webkit-appearance: none;
background: none;border:0;
}
.linkIcon{
font-family: 'tinymce',Arial;
font-style: normal;
font-weight: normal;
font-variant: normal;
font-size: 16px;
line-height: 16px;
speak: none;
vertical-align: text-top;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
background: transparent center center;
background-size: cover;
width: 16px;
height: 16px;
color: #595959;
&:before{content: "\e011";}
}
</style>
3.在页面editorLink.vue中的方法中，如图：
如何在Tinymce中为选中文本添加自定义链接功能
（1）tinyMCE.activeEditor.selection.getContent()获取富文本编辑器中选中的文本
（2） let linkTab='<a href="'+this.formLabelAlign.url+'">' + this.selText + '</a>'生成链接
（3）tinyMCE.activeEditor.selection.setContent(linkTab)设置编辑器中选中的文本为链接形式
4.实际效果为：
如何在Tinymce中为选中文本添加自定义链接功能
如何在Tinymce中为选中文本添加自定义链接功能
