vue tinymce富文本插件引入
vue版本 2.6
tinymce版本 4.9.10
1.安装tinymce
根据官网的安装教程
-
For Vue.js 3.x users:
$ npm install --save "@tinymce/tinymce-vue@^4"
-
For Vue.js 2.x users:
$ npm install --save "@tinymce/tinymce-vue@^3"
由于我是vue2版本所以使用npm install --save "@tinymce/tinymce-vue@^3"
然后再运行以下命令,安装tinymce-vue@4.9.10
npm install @tinymce/tinymce-vue@4.9.10 -S
2.配置tinymce
-
在
public\static
目录下新建一个tinymce
目录 -
将
\node_modules\tinymce
下的skins
目录复制到public\static\tinymce
下 -
从官网下载语言包
-
点击下载,可以得到一个压缩文件,把里面的
zh_CN.js
复制到public\static\tinymce
下 -
在
components
目录下新建一个tinymce
文件夹,创建一个index.vue
文件
<template>
<div class="tinymce">
<editor id="tinymce" v-model="tinymceHtml" :init="init" />
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/print'
import 'tinymce/plugins/autoresize'
export default {
name: 'Tinymce',
components: { Editor },
props: {
value: {
type: String,
default: ''
}},
data() {
return {
tinymceHtml: this.value,
init: {
language_url: './static/tinymce/zh_CN.js', // 引入语言包路径 重要!!
language: 'zh_CN',
skin_url: './static/tinymce/skins/lightgray', // 引入皮肤路径 重要!!
height: 435, // 设置高度 其实可以设置成props传值的,我这边只需要用到一次,所以给了固定高度
autoresize_bottom_margin: 10,
autoresize_max_height: 435, // 编辑区域的最大高
autoresize_min_height: 435, // 编辑区域的最小高度
autoresize_on_init: true,
autoresize_overflow_padding: 10,
end_container_on_empty_block: true,
// 插件列表可自定义
plugins: 'print link lists image code table colorpicker textcolor wordcount contextmenu',
// 工具栏列表
toolbar:
'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | bullist numlist | alignleft aligncenter alignright alignjustify | outdent indent blockquote | undo redo | code removeformat print',
branding: false // 隐藏水印
}
}
},
watch: {
value(newValue) {
this.tinymceHtml = newValue
},
myValue(newValue) {
this.$emit('input', newValue)
}
},
mounted() {
tinymce.init({})
}
}
</script>