如何在vue-cli3中使用tinymce

脚手架vue-cli3
首先安装
npm install tinymce@5.4.2 @tinymce/tinymce-vue@3.2.2 -S

安装成功后，在node_modules目录中，查找tinymce/skins目录，将skins目录拷贝到public目录下。
并到官网中下载中文语言包找到zh_CN.JS拷贝出来

然后在components中创建文件夹tinymce和tinymce.vue
在组件中写配置

<template><div class="tinymce-editor"><editor id="tinymce" v-model="myValue" :init="init" @onClick="onClick"></editor></div> </template><script> // 文档 http://tinymce.ax-z.cn/// 引入组件import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入不显示import Editor from '@tinymce/tinymce-vue'// 引入富文本编辑器主题的js和css// import 'tinymce/skins/content/default/content.css'import 'tinymce/themes/silver/theme.min.js'import 'tinymce/icons/default/icons' // 解决了icons.js 报错Unexpected token '<'// 编辑器插件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/link'import 'tinymce/plugins/code'import 'tinymce/plugins/preview'import 'tinymce/plugins/fullscreen'import 'tinymce/plugins/help'export default {components: {Editor},name: 'Tinymce',props: {// 默认的富文本内容value: {type: String,default: ''},// 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式，// 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到baseUrl: {type: String,default: window.location.origin ? window.location.origin : ''},// 禁用disabled: {type: Boolean,default: false},plugins: {type: [String, Array],default: 'link lists image code table wordcount media preview fullscreen help'},toolbar: {type: [String, Array],default: 'undo redo | formatselect | bold italic underline | forecolor backcolor | link unlink code lists table image | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent blockquote | removeformat | fullscreen preview'},height:{type: Number,default: 500}},data() {return {//初始化配置init: {language_url: `${this.baseUrl}/tinymce/zh_CN.js`,language: 'zh_CN',skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide`,// skin_url: 'tinymce/skins/ui/oxide-dark', // 暗色系convert_urls: false,height: this.height,// content_css（为编辑区指定css文件）,加上就不显示字数统计了// content_css: `${this.baseUrl}tinymce/skins/content/default/content.css`,// （指定需加载的插件）plugins: this.plugins,toolbar: this.toolbar, // （自定义工具栏）statusbar: true, // 底部的状态栏menubar: 'file edit insert view format table tools', // （1级菜单）最上方的菜单 help 帮助branding: false, // （隐藏右下角技术支持）水印“Powered by TinyMCE”paste_data_images: true, // 设置为“true”将允许粘贴图像，而将其设置为“false”将不允许粘贴图像// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handlerimages_upload_handler: (blobInfo, success, failure) => {// const img = 'data:image/jpeg;base64,' + blobInfo.base64()// success(img)// console.log(failure)const formData = new FormData();formData.append('file', blobInfo.blob());this.axios({method: 'post',url: 'http://47.109.23.138:8300/upload/upFileImg',data: formData,}).then(function(res) {console.log(res.data.data)let file = res.data.data;success(file.src);}).catch(function(err) {console.log(err)})}},myValue: this.value};},mounted() {tinymce.init({});},methods: {//添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events//需要什么事件可以自己增加onClick(e) {this.$emit('onClick', e, tinymce);},//可以添加一些自己的自定义事件，如清空内容clear() {this.myValue = '';}},watch: {value(newValue) {this.myValue = newValue;},myValue(newValue) {this.$emit('input', newValue);}} }; </script>

然后在其他页面中使用

<template><div class="home"><tinymce style="width: 100%;" id="myedit" ref="editor" :height="300":disabled="disabled" :toolbar="toolbar" input="input"/></div> </template><script> // @ is an alias to /src import Tinymce from '../components/tinymce/tinymce'; // 富文本export default {name: 'Home',components: {Tinymce}，methods:{input(){console.log(this.$refs.editor.myValue)//获取富文本中的值}} } </script>

总结

以上是生活随笔为你收集整理的如何在vue-cli3中使用tinymce的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。