腳手架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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。