参考tinymce文档:点击此处跳转
步骤一:在vue中引入tinymce(点击跳转查看资料)
npm install @tinymce/tinymce-vue -S
步骤二:引入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}
效果图:
优化:
怎么让组件汉化:
tinymce 汉化包下载:点击此处
首先发现tinymce-vue需要首费才能加入主体才能汉化,因此不得不用tinymce取代tinymce-vue
步骤一:安装tinymce
npm install tinymce -S
检查是否已经安装了tinymce
步骤二:在node_modules文件下找到tinymce文档,复制tinymce放入项目的根目录下static的文件夹中
步骤三:把zh_CN.js放入根目录下static文件夹中
步骤四:初始化组件
代码
<template><div class="tinymce"><h1>tinymce Children</h1><editor id="tinymce" v-model="tinymceHtml" :init="init"></editor></div></template><script>// 引入tinymce主件import tinymce from './../../static/tinymce/tinymce'// 必须引入主体才能汉化和显示import './../../static/tinymce/themes/silver/theme'// 引入tinymce-vue组件import Editor from '@tinymce/tinymce-vue'// 引入图片上传组件import image from './../../static/tinymce/plugins/image'export default {name: 'tinymce',data () {return {tinymceHtml: '',init: {// 引入汉化组件language_url: './../../static/zh_CN.js',// 设定语言为中文language: 'zh_CN',// 加入主题skin_url: './../../static/tinymce/skins/ui/oxide',// 注册功能组件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 '}}},mounted () {// 页面加载的时候初始化组件tinymce.init({})},components: { Editor }}</script><style scoped></style>
最后呈现的效果图:
备注:图片,js,css等等一些类静态文件放在static文件下才会有效
(点击查看补充资料)
源码地址:/gyfgyz/vue-tinymce