<template><div> <editor id="tinymceEditor" :init="tinymceInit" v-model="tinymceContent" :key="tinymceFlag"></editor> <el-upload id="tinymce-upload" class="uploader" :action="uploadUrl" name="FileData" :data="uploadAccountForm" :show-file-list="false" :on-success="handleAccountSuccess" :before-upload="beforeAccountUpload" ></el-upload> <el-dialog :close-on-click-modal="false" title="Insert link" :visible.sync="dialogTableVisible"> <el-form ref="linkRef" label-position="left" label-width="120px" :model="linkForm" :rules="rule"> <el-form-item label="Link Text" prop="text"> <el-input v-model="linkForm.text"></el-input> </el-form-item> <el-form-item label="Link URL" prop="url"> <el-row> <el-col :span="11"> <el-input v-model="linkForm.url"></el-input> </el-col> <el-col :span="11" style="margin-left: 10px"> <el-select v-model="link" filterable clearable placeholder="Quick Select" @change="linkSelect"> <el-option v-for="item in linkList" :key="item.id" :label="item.label" :value="item.id"> </el-option> </el-select> </el-col> <span class="link-tip">Example: http://www.example.com</span> </el-row> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">Confirm</el-button> <el-button @click="dialogTableVisible = false">Cancel</el-button> </el-form-item> </el-form> </el-dialog></div></template><script>import tinymce from 'tinymce/tinymce'import 'tinymce/themes/silver/theme'import Editor from '@tinymce/tinymce-vue'import 'tinymce/plugins/textcolor'import 'tinymce/plugins/advlist'import 'tinymce/plugins/table'import 'tinymce/plugins/lists'import 'tinymce/plugins/paste'import 'tinymce/plugins/preview'import 'tinymce/plugins/fullscreen'import 'tinymce/plugins/link'export default { name: 'TinymceEditor', components: { 'editor': Editor }, data () { return { dialogTableVisible: false, tinymceFlag: 1, tinymceInit: {}, tinymceContent: '', linkForm: { url: "", text: "" }, link: "", rule: { url: [ { required: true, trigger: 'blur' } ], text: [ { required: true, trigger: 'change' } ], } } }, props: { basePath: { type: String, default: "" }, data: { type: Object, default: {} }, linkList: Array }, watch: { tinymceContent(val) { this.$emit("change", val); } }, methods: { // 插入图片至编辑器 // element upload handleAccountSuccess(res) { if (res.status == 1) { let url = res.data[0].savepath; tinymce.execCommand('mceInsertContent', false, `<img src=${url}>`) } else { this.$notify({ title: "warning", message: res.msg, type: "warning" }); } }, beforeAccountUpload(res) {}, initContent(val) { this.tinymceContent = val; }, linkSelect(val) { let url = '#/app/help?id=' + val; this.linkForm.url = url; }, submitForm() { this.$refs.linkRef.validate((valid) => { if(valid) { tinymce.execCommand('mceInsertContent', false, `<a href=${this.linkForm.url}>${this.linkForm.text}</a>`); this.dialogTableVisible = false; } }) } }, created () { const that = this; //修改富文本编辑器图片上传路径 this.uploadUrl = this.basePath; this.uploadAccountForm = this.data; var urlPrefix = './' if(process && process.env && process.env.VUE_APP_RESOURCE_PREFIX) { urlPrefix = process.env.VUE_APP_RESOURCE_PREFIX } this.tinymceInit = { skin_url: urlPrefix + 'tinymce/skins/ui/oxide', height: document.body.offsetHeight - 300, browser_spellcheck: true, // 拼写检查 branding: false, // 去水印 // elementpath: false, //禁用编辑器底部的状态栏 statusbar: false, // 隐藏编辑器底部的状态栏 paste_data_images: true, // 允许粘贴图像 menubar: false, // 隐藏最上方menu plugins: 'advlist table lists paste preview fullscreen', toolbar: 'fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough alignleft aligncenter alignright alignjustify imageUpload link quicklink h2 h3 blockquote table numlist bullist preview fullscreen', setup: (editor) => { editor.ui.registry.addButton('imageUpload', { tooltip: 'Insert image', icon: 'image', onAction: () => { document.querySelector("#tinymce-upload input").click(); } }) editor.ui.registry.addButton('link', { tooltip: 'Insert link', icon: 'link', onAction: () => { this.dialogTableVisible = true; } }) } } }, activated () { this.tinymceFlag++ }, mounted () {},}</script><style lang="scss" scoped>.link-tip { display: inline-block; margin-top: 10px; font-size: 12px; color: #777;}</style>