在vue中使用使用tinymce富文本编辑器
参考tinymce文档：https://www.tiny.cloud/docs/quick-start/
步骤一：在vue中引入tinymce
npm install @tinymce/tinymce-vue -S
这是安装中文版必不可少的
npm install tinymce -S
如果你用是vue2.0版本的话不要安装这个，vue2中不能使用@tinymce/tinymce-vue为4以上版本；
安装低版本的：例如：npm install @tinymce/tinymce-vue@3.0.1 -S
而tinymce版本大小无所谓
在node_modules文件下找到tinymce文档，复制tinymce放入项目的根目录下public的文件夹中
langs文件夹是中文语言包 如果你没有下载 可以去官网或者我的上一篇文章里有这个源码
在tinymce新建一个langs文件夹 然后新建一个zh_CN.js文件
再把源码内容粘贴上即可 我在官网没有找到这个语言包就只能用源码 哎
这是源码网站
https://www.jianshu.com/p/38f20d3e0bfa
官网没有找到这个语言包。。。
步骤二：引入tinymce-vue进入到子组件中
import Editor from '@tinymce/tinymce-vue'
步骤三：注册tinymce-vue进入到子组件中
// 注册tinymce组件
components: {
'editor': Editor
}
步骤四：渲染template组件
<editor :init="init"></editor>
步骤五：初始化init tinymce
init: {
// 组件
plugins:
' lists image colorpicker textcolor wordcount contextmenu autoresize',
// 工具栏
toolbar:
'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | undo redo | link unlink image | removeformat ',
branding: false,
min_height: 300
}
这个子组件完整的代码：
<template>
<div class="tinymce-editor">
<Editor
:id="editorId"
v-model="editorValue"
:init="editorInit"
:disabled="disabled"
@onClick="handleClick"
/>
</div>
</template>
<script>
// 引入组件
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/skins/ui/oxide/skin.min.css'
// 扩展插件
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount' // 字数统计插件
export default {
name: 'TinymceEditor',
components: { Editor },
props: {
id: {
type: String,
default: 'tinymceEditor'
},
value: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
plugins: {
type: [String, Array],
default: 'link lists image code table wordcount'
},
toolbar: {
type: [String, Array],
default: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat'
}
},
data() {
return {
editorInit: {
language_url: '/tinymce/langs/zh_CN.js',
language: 'zh_CN',
skin_url: '/tinymce/skins/ui/oxide',
height: 300,
plugins: this.plugins,
toolbar: this.toolbar,
statusbar: true, // 底部的状态栏
menubar: true, // 最上方的菜单
branding: false, // 水印“Powered by TinyMCE”
images_upload_handler: (blobInfo, success, failure) => {
this.$emit('handleImgUpload', blobInfo, success, failure)
}
},
editorId: this.id,
editorValue: this.value
}
},
watch: {
editorValue(newValue) {
this.$emit('input', newValue)
}
},
mounted() {
tinymce.init({})
},
methods: {
// https://github.com/tinymce/tinymce-vue => All available events
handleClick(e) {
this.$emit('onClick', e, tinymce)
},
clear() {
this.editorValue = ''
}
}
}
</script>
然后在src 中app.vue注册组件并中引入:
代码如下：
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<TinymceEditor />
</div>
</template>
<script>
import TinymceEditor from "./components/TinymceEditor.vue"
export default {
name: 'App',
data(){
return{
init: {
// 组件
plugins:
' lists image colorpicker textcolor wordcount contextmenu autoresize',
// 工具栏
toolbar:
'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | undo redo | link unlink image | removeformat ',
branding: false,
min_height: 300
}
}
},
components: {
TinymceEditor,
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
最后打开项目就可以看到富文本完美的展示出来了
