以下间接展现配置过程，插件api及介绍能够查看 中文文档 或者 英文官网
一、装置
npm install tinymce -Snpm install @tinymce/tinymce-vue -S留神：不同版本tinymce和@tinymce/tinymce-vue可能存在不匹配的状况，我在尝试屡次后，将@tinymce/tinymce-vue选定为一年前公布的版本，具体装置信息为
npm install tinymce@5.8.2 -S
npm install @tinymce/tinymce-vue@3.2.2 -S
二、插件配置
//TinyEditor.vue组件编写<template> <editor v-model="myValue" :init="init" :disabled="disabled"> </editor></template><script> import tinymce from "tinymce" import Editor from "@tinymce/tinymce-vue" import "tinymce/themes/silver" import "tinymce/icons/default" import "tinymce/plugins/table" import "tinymce/plugins/lists" import "tinymce/plugins/link" import "tinymce/plugins/image" import "tinymce/plugins/imagetools" import "tinymce/plugins/media" import "tinymce/plugins/code" import "tinymce/plugins/codesample" import "tinymce/plugins/anchor" import "tinymce/plugins/emoticons/js/emojis.min" import "tinymce/plugins/emoticons" import "tinymce/plugins/wordcount" import "tinymce/plugins/preview" import "tinymce/plugins/fullpage" import "tinymce/plugins/fullscreen" export default { props: { value: { type: String, default: "" }, text: { type: String, default: "" }, disabled: { type: Boolean, default: false }, plugins: { type: [String, Array], default: 'table lists link image imagetools media code codesample anchor emoticons wordcount preview fullpage fullscreen' }, toolbar: { type: [String, Array], default() { return [ 'bold italic underline strikethrough removeformat | fontsizeselect fontselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | code | bullist numlist | outdent indent blockquote | undo redo | link unlink | codesample preview' ]; } } }, data() { return { init: { theme: "silver", //主题 skin_url: "/static/tinymce/skins/ui/oxide", //皮肤，从node_modules拷贝至/static/tinymce content_css: "/static/tinymce/plugins/prism/tomorrow-night.css", //自定义款式，这里应用prism.js来实现代码高亮，从prism.js官网下载 height: "700px", width: '100%', menubar: true, //菜单栏 toolbar: this.toolbar, //工具栏 elementpath: false, branding: false, //展现技术支持(如由Tiny驱动) language_url: "/static/tinymce/zh_CN.js", //语言包，从结尾的 中文文档 站点下载 language: "zh_CN", //语言 codesample_global_prismjs: true, codesample_languages: [ {text: 'JavaScript', value: 'js'}, {text: 'HTML', value: 'html'}, {text: 'CSS', value: 'css'}, {text: 'NodeJS', value: 'nodejs'}, {text: 'Java', value: 'java'}, {text: 'Python', value: 'python'}, {text: 'PowerShell', value: 'powershell'}, {text: 'nginx', value: 'nginx'}, {text: 'Markdown', value: 'md'}, {text: 'JSON5', value: 'json5'}, {text: 'Log file', value: 'log'} ], plugins: this.plugins, //插件 zIndex: 1101, }, myValue: this.value }; }, mounted() { tinymce.init({}); }, methods: { getText() { const activeEditor = tinymce.activeEditor; const editBody = activeEditor.getBody(); activeEditor.selection.select(editBody); return activeEditor.selection.getContent({ 'format' : 'text' }).replace(/\r?\n/g, ' '); } }, components: { Editor }, watch: { value(newValue) { this.myValue = newValue; }, myValue(newValue) { this.$emit("input", newValue); } } };</script>三、TinyEditor组件应用
//在test.vue页面中应用<template> <div> <TinyEditor ref="tinyEditor" :value="content" @input="(res)=> content=res" /> </div></template><script> import TinyEditor from '@/components/TinyEditor' export default { data() { return { content: null } }, methods: { //获取富文本编辑器内纯文本内容的办法，不蕴含链接图片视频 getText() { return this.$refs.tinyEditor.getText(); } }, components: { TinyEditor } }</script>实现以上配置，不出意外，编辑器就能够应用了。
原文链接：https://www.helloque.site/article/4