富文本编辑器 TinyMCE插件使用

富文本编辑器 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和css
import "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-z.cn/

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！