如何在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中为选中文本添加自定义链接功能