- 首先安装所需的两个包
npm install tinymce -S npm --save @tinymce/tinymce-vue
- 查看vue-cli脚手架版本号，根据vue-cli版本号进行以下操作
vue -V
npm list --depth=0 -g
-
复制内容和样式包
① 在 node_modules 文件夹中找到 tinymce/skins 文件，进行复制；如果vue-cli的版本号为2就将其内容复制到static文件夹中，若版本号为3就将其内容复制到public文件夹中，在下是版本为2的如图所示
node_modules文件中的skins
static文件夹结构
② 下载 zh_CN.js中文包，复制到 tinymce文件中 点击下载
- 代码内容
<template>
<div class="tinymce-editor">
<editor v-model="myValue"
:init="init"
:disabled="disabled"
@onClick="onClick">
</editor>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/wordcount'// 字数统计插件
import 'tinymce/plugins/autoresize' // 高度自适应
export default {
data () {
return {
// 初始化tinyEdit
init: {
language_url: '/static/tinymce/zh_CN.js',
language: 'zh_CN',
skin_url: '/static/tinymce/skins/ui/oxide',
selector: 'textarea',
plugins: 'autoresize',
toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',
branding: false,
menubar: false,
images_upload_handler: (blobInfo, success, failure) => {
const img = 'data:image/jpeg;base64,' + blobInfo.base64()
success(img)
}
}
},
mounted () {
tinymce.init({})
},
methods: {
onClick (e) {
this.$emit('onClick', e, tinymce)
}
},
watch: {
value (newValue) {
this.myValue = newValue
},
myValue (newValue) {
this.$emit('input', newValue)
}
}
}
</script>
-
页面样式
效果图
