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()); ...

菜单可选功能配置项所属插件描述newdocument核心创建一个新文档undo核心撤回redo核心恢复visualaid核心网格线cut核心剪切copy核心复制paste核心粘贴selectall核心全选bold核心加粗italic核心斜体underline核心下划线strikethrough核心删除线subscript核心下标superscript核心上标removeformat核心清除格式codeformat核心内联形式插入代码.blockformats核心块形式插入代码.align核心更改对齐方式.formats核心所有可用格式.linklink添加一个连接.openlinklink添加一个在新标签页中打开的连接.imageimage添加图片.charmapcharmap开启字符映射表.pastetextpaste粘贴为纯文本.printprint打印.previewpreview预览hrhr横线anchoranchor插入锚点.pagebreakpagebreak分页符spellcheckerspellchecker拼写检查开关.searchreplacesearchreplace打开搜索和替换对话框visualblocksvisualblocks隐藏块级区域开关.visualcharsvisualchars隐藏字符串开关.codecode源码预览.fullscreenfullscreen全屏insertdatetimeinsertdatetime插入时间.mediamedia插入媒体文件nonbreakingnonbreaking插入一个nonbreakinginserttabletable插入表格tablepropstable配置并插入表格.deletetabletable删除表格.celltable表格单元配置rowtable表格行配置columntable表格列配置restoredraftautosave恢复到上次自动保存的数据fullpagefullpage查看完整的文档属性toctoc插入目录helphelp帮助菜单工具栏可选插件配置项所属插件描述newdocument核心创建新文档bold核心加粗italic核心斜体underline核心下划线strikethrough核心删除线alignleft核心居左 aligncenter核心居中 alignright核心居右 alignjustify核心两端对齐 alignnone核心清除 styleselect核心格式选择下拉框(缩进、行高) formatselect核心段落选择下拉框(段落、标题) fontselect核心字体选择下拉框 fontsizeselect核心字号选择下拉框 cut核心剪切 copy核心复制 paste核心粘贴 outdent核心减少缩进 indent核心增加缩进 blockquote核心引用 undo核心撤消 redo核心恢复 removeformat核心清除格式 subscript核心下标 superscript核心上标 visualaid核心网格线 insert核心插入的集合按钮 hrhr水平线 bullistlists无序列表  numlistlists有序列表 linklink添加和修改链接 unlinklink去除链接格式 openlinklink打开选中链接 imageimage添加和修改图片 charmapcharmap特殊符号 pastetextpaste粘贴纯文本 printprint打印 previewpreview预览 anchoranchor作者 pagebreakpagebreak分页符 spellcheckerspellchecker拼写检查 searchreplacesearchreplace搜索 visualblocksvisualblocks隐藏块级区域开关 visualcharsvisualchars隐藏字符串开关. codecode代码 helphelp帮助 fullscreenfullscreen全屏 insertdatetimeinsertdatetime插入时间 mediamedia插入/编辑媒体文件 nonbreakingnonbreaking不间断空格 savesave保存(ajax) cancelsave取消保存 tabletable插入/编辑表格 tabledeletetable删除表格 tablecellpropstable单元格属性 tablemergecellstable合并单元格 tablesplitcellstable拆分单元格 tableinsertrowbeforetable在当前行之前插入一个新行 tableinsertrowaftertable在当前行之后插入一个新行 tabledeleterowtable删除当前行 tablerowpropstable行属性 tablecutrowtable剪切选定行 tablecopyrowtable复制选定行 tablepasterowbeforetable在当前行之前粘贴行 tablepasterowaftertable在当前行之后粘贴行 tableinsertcolbeforetable在当前列之前插入一个列 tableinsertcolaftertable在当前列之后插入一个列. tabledeletecoltable删除当前列 rotateleftimagetools逆时针旋转当前图像 rotaterightimagetools顺时针旋转当前图像 flipvimagetools垂直翻转当前图像 fliphimagetools水平翻转当前图像 editimageimagetools打开图像编辑对话框 imageoptionsimagetools打开图像配置对话框 fullpagefullpage完整页面的文档属性 ltrdirectionality设置编写方向从左到右 rtldirectionality设置编写方向从右到左 emoticonsemoticons表情 templatetemplate插入模板 forecolortextcolor文本颜色 backcolortextcolor背景颜色 restoredraftrestoredraft恢复到最新的自动保存草稿 insertfilemoxiemanager引入文件 a11ychecka11ychecker检查访问性 toctoc插入目录 quickimageinlite插入本地图像 quicktableinlite插入2X2的表格 quicklinkinlite插入连接