富文本编辑器 TinyMCE插件使用
Vue2中安装TinyMCE
npm install @tinymce/tinymce-vue@3.0.1 -S
封装TinyMCE组件，代码如下，
<div class="tinymce-editor"><Editor :id="editorId" v-model="editorValue" :disabled="disabled" :init="editorInit" @onClick="handleClick"></Editor></div>
js部分，
// 引入组件import Editor from "@tinymce/tinymce-vue";import tinymce from "tinymce/tinymce";// 引入富文本编辑器主题的js和cssimport "tinymce/themes/silver/theme.min.js";import "tinymce/skins/ui/oxide/skin.min.css";// 引入图标import 'tinymce/icons/default/icons.min.js';// 扩展插件import "tinymce/plugins/image";import "tinymce/plugins/link";import "tinymce/plugins/code";import "tinymce/plugins/table";import "tinymce/plugins/lists";import "tinymce/plugins/wordcount"; // 字数统计插件export default {components: {Editor },props: {id: {type: String,default: "tinymceEditor",},value: {type: String,default: "",},disabled: {type: Boolean,default: false,},plugins: {type: [String, Array],default: "link lists image code table wordcount",},toolbar: {type: [String, Array],default:"bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat",},},data() {return {editorInit: {language_url: "/tinymce/langs/zh_CN.js",language: "zh_CN",skin_url: "/tinymce/skins/ui/oxide",height: 300,plugins: this.plugins,toolbar: this.toolbar,statusbar: true, // 底部的状态栏menubar: true, // 最上方的菜单branding: false, // 水印“Powered by TinyMCE”images_upload_handler: (blobInfo, success, failure) => {this.$emit("handleImgUpload", blobInfo, success, failure);},editorId: this.id,editorValue: this.value,},};},mounted() {tinymce.init({});},methods: {handleClick(e) {this.$emit("onClick", e, tinymce);},clear() {this.editorValue = "";},},
在其他.vue文件中引入上面的组件，
<template><div><TinymceEditor /></div></template><script>import TinymceEditor from "../components/TinymceEditor.vue";export default {components: { TinymceEditor }};
TinyMCE中文官网：http://tinymce.ax-/
