一, 首先在 Tinymce 标题栏自定义添加链接的按钮
图片发自简书 App
如图为新加的按钮
方法:
1. 在富文本页面定义按钮, 以组件形式引入
图片发自简书 App
代码为:
- <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-OS X-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 中的方法中, 如图:
图片发自简书 App
(1)tinyMCE.activeEditor.selection.getContent() 获取富文本编辑器中选中的文本
(2) let linkTab='<a href="'+this.formLabelAlign.url+'">' + this.selText + '</a>'生成链接
(3)tinyMCE.activeEditor.selection.setContent(linkTab) 设置编辑器中选中的文本为链接形式
4. 实际效果为:
图片发自简书 App
图片发自简书 App
来源: http://www.jianshu.com/p/a6079576dc70