Tinymce

以下间接展现配置过程，插件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组件应用 ...

Vue中配置Tinymce富文本编辑器（配置图片上传）全副代码https://github.com/surest-sky... 装置这里不须要装置，动静加载js援用即可，不然加载的组件较多，影响访问速度 具体见 https://github.com/surest-sky... 配置图片上传请留神这里我配置了对于本人的上传逻辑 应用axios 上传 formData 表单数据 流程： 图片点击上传后，塞入formData数据中，进行上传到七牛云中 在api/tools.js中，因为上传是须要鉴权的，所以这一步骤在request中进行的 > components/Tinymce/index.vueimport { uploadImage } from '@/api/tool';images_upload_handler: (blobInfo, success, failure) => { let formdata = new FormData(); formdata.append('file', blobInfo.blob()); uploadImage(formdata) .then(data => { success(data.file); }) .catch(err => { failure('Server Error'); });} > api/tool.jsexport function uploadImage(data, sign = "") {return async function upload() { let signData; if(sign) { signData = await getUplaodSignExam({sign: sign}).then(response => { const signData = response.data return signData }); }else{ signData = await getUplaodSign().then(response => { const signData = response.data return signData }); } const { uploadUrl, token, host, dir } = signData; data.append('token', token); const result = await request({ url: uploadUrl, method: 'post', data: data }).then(({ hash, key }) => { return { file: host + key } }); return result }();}/** * 获取上传秘钥信息 */export function getUplaodSign(params) { return request({ url: '/module/document/qiniu-sign', method: 'post', data: params });}/** * 获取上传秘钥信息 */ export function getUplaodSignExam(params) { return request({ url: '/web/qiniu-sign', method: 'post', data: params });}应用import Tinymce from '@/components/Tinymce';omponents: { Tinymce }<tinymce @save="timingSyncContent" ref="editor" v-model="content" />其中的save办法 CTRL + S 的时候会进行执行，同样设置主动保留的时候也会执行，v-model 用于动静批改内容，具体见 this.$emit('input', editor.getContent()); ...