安装tinymce
npm install tinymce -S
npm install @tinymce/tinymce-vue -S
由于这样安装会安装最新版本的tinymce ,
由于我使用的是vue2 与最新的版本部分功能可能不兼容 所以我安装的版本是
npm install tinymce@5.1.0 -S
npm install @tinymce/tinymce-vue@3.0.1 -S
封装tinymce组件
<template>
<div>
<editor id="tinymce" v-bind="$attrs" :init="init" v-on="$listeners" />
</div>
</template>
<script>
import Editor from '@tinymce/tinymce-vue'
export default {
name: 'TinyEditor',
components: {
editor: Editor
},
props: {
linkList: Array // link_list数据源
},
data() {
return {
init: {
selector: '#tinymce',
height: 300, //编辑器高度
menubar: true, //顶部菜单栏显示
language_url: 'static/tinymce/langs/zh-Hans.js', // 中文包的存放路径 可以去下载好中文包 存放在项目目录下引入https://www.tiny.cloud/
language: 'zh-Hans',
branding: false, //是否禁用“Powered by TinyMCE”
statusbar: true, //是否显示底部的状态栏
plugins: 'link image media table lists fullscreen quickbars',
toolbar:
'undo redo | fullscreen | fontselect fontsizeselect | bold italic underline strikethrough link | formatselect alignleft aligncenter alignright alignjustify | bullist | image media table | forecolor backcolor | indent outdent | superscript subscript | removeformat |',
link_context_toolbar: false, // link链接的右键增强菜单
link_list: success => {
let newlinkList = this.linkList.map(link => {
return {
...link,
value: `downloadFile('${link.value}')`
}
})
success(newlinkList) // pass link_list data to {productname}
}, // link插件 链接列表
images_upload_handler: this.imagesUploadHandler// 插入图片-支持本地图片上传
}
}
},
methods: {
async imagesUploadHandler(blobInfo, success) {
const base64Url = await blobToBase64(blobInfo.blob())
success(base64Url)
}
}
}
</script>
<style lang="scss">
/* 在el-dialog中使用tinymce 插件的弹窗被遮挡 */
.tox-tinymce-aux {
z-index: 9999 !important;
}
</style>
调用组件:
<tiny-editor
ref="editor"
v-model="content"
:link-list="linkList"
>
</tiny-editor>
由于tinymce的官方文档是英文的 我们可以使用莫若卿博主整理的这个中文文档:
http://tinymce.ax-z.cn/