1.安装tinymce富文本编辑器插件
npm i tinymce
npm i @tinymce/tinymce-vue
2.创建Editor.js文件 封装组件 以便使用
<template><div class="tinymce-editor"><editorv-model="myValue":init="init":disabled="disabled"@onClick="onClick"></editor></div></template><script>import tinymce from 'tinymce/tinymce'import Editor from '@tinymce/tinymce-vue'import Api from "@/api/typical/typical"; // 引入接口import Vue from "vue";import 'tinymce/skins/ui/oxide/skin.css'import 'tinymce/themes/silver/theme'以下为工具栏插件 看自己项目需求是否注释import 'tinymce/plugins/image' // 图片插件// import 'tinymce/plugins/media' // 视频插件import 'tinymce/plugins/table'import 'tinymce/plugins/lists'import 'tinymce/plugins/contextmenu'import 'tinymce/plugins/wordcount'import 'tinymce/plugins/colorpicker'import 'tinymce/plugins/textcolor'import "tinymce/plugins/preview";import "tinymce/plugins/code";import "tinymce/plugins/link";import "tinymce/plugins/advlist";import "tinymce/plugins/codesample";import "tinymce/plugins/hr";import "tinymce/plugins/fullscreen";import "tinymce/plugins/textpattern";import "tinymce/plugins/searchreplace";import "tinymce/plugins/autolink";import "tinymce/plugins/directionality";import "tinymce/plugins/visualblocks";import "tinymce/plugins/visualchars";import "tinymce/plugins/template";import "tinymce/plugins/charmap";import "tinymce/plugins/nonbreaking";import "tinymce/plugins/insertdatetime";import "tinymce/plugins/imagetools";import "tinymce/plugins/autosave";import "tinymce/plugins/autoresize";import '../../../public/tinymce/langs/zh_CN.js'//汉化包 把汉化包放在自己项目地址，根据自己路径修改// tinymce.addI18n('zh_CN', lang); //注册中文语言，这里配置不起作用后面还可以配置export default {name: 'TinymceEditor',components: {Editor},props: {value: {type: String,default: ''},disabled: {type: Boolean,default: false},plugins: {type: [String, Array],default: 'lists image media table wordcount fullscreen'},toolbar: {type: [String, Array],default: 'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat | fullscreen'}},data () {return {init: {language: 'zh_CN',skin_url: '/static/tinymce/skins/ui/oxide',// skin_url: '/tinymce/skins/ui/oxide-dark',//暗色系height: 300,plugins: this.plugins,toolbar: this.toolbar,external_plugins: {'powerpaste': '/tinymce/plugins/powerpaste/plugin.min.js' // words的粘贴插件},branding: false,menubar: false,end_container_on_empty_block: true,powerpaste_word_import: 'merge',powerpaste_html_import: 'merge',powerpaste_allow_local_images: true,paste_data_images: true, // 允许word粘贴// 截图 粘贴的图片 需要走上传方法不然就是个文件流 （该方法工具栏里的图片上传 是两个方法。 分开写，此方法为粘贴图片时使用）urlconverter_callback: function(url, node, on_save, name) {if (node === 'img' && url.startsWith('blob:') || url.startsWith('data:')) {// console.log('urlConverter:', url, 'node',node, on_save, name)tinymce.activeEditor && tinymce.activeEditor.uploadImages()}return url;},// 此处为图片上传处理函数 该方法为工具栏上传图片 需要走后台上传接口 与上面的方法区分开 images_upload_handler: function (blobInfo, success, failure) {// base64转本地上传// 这个函数主要处理word中的图片，并自动完成上传；// 自己定义的一个函数；在回调中，记得调用success函数，传入上传好的图片地址；// blobInfo.blob() 得到图片的file对象；let formData = new FormData()formData.append('file', blobInfo.blob())Api.uploadFile(formData).then(res => {if (res.data.code == 0) {// 返回路径 Vue.prototype.urlData + 拼接success(Vue.prototype.urlData + res.data.filePath)}})},},myValue: this.value}},mounted () {tinymce.init({})},methods: {// 添加相关的事件，可用的事件参照文档=> /tinymce/tinymce-vue => All available events// 需要什么事件可以自己增加onClick (e) {this.$emit('onClick', e, tinymce)},// 可以添加一些自己的自定义事件，如清空内容clear () {this.myValue = ''}},watch: {value (newValue) {this.myValue = newValue},myValue (newValue) {this.$emit('input', newValue)}},beforeDestroy () {tinymce.remove()}}</script>
3.汉化包 （我放在public/tynymce/langs文件夹里）
/* eslint-disable */tinymce.addI18n('zh_CN',{"Redo": "恢复","Undo": "撤销","Cut": "剪切","Copy": "复制","Paste": "粘贴","Select all": "全选","New document": "新建文档","Ok": "确定","Cancel": "取消","Visual aids": "网格线","Bold": "粗体","Italic": "斜体","Underline": "下划线","Strikethrough": "删除线","Superscript": "上标","Subscript": "下标","Clear formatting": "清除格式","Align left": "左对齐","Align center": "居中","Align right": "右对齐","Justify": "两端对齐","Bullet list": "符号列表","Numbered list": "数字列表","Decrease indent": "减少缩进","Increase indent": "增加缩进","Close": "关闭","Formats": "格式","Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "当前浏览器不支持访问剪贴板，请使用快捷键Ctrl+X/C/V复制粘贴","Headers": "标题","Header 1": "标题1","Header 2": "标题2","Header 3": "标题3","Header 4": "标题4","Header 5": "标题5","Header 6": "标题6","Headings": "标题","Heading 1": "标题1","Heading 2": "标题2","Heading 3": "标题3","Heading 4": "标题4","Heading 5": "标题5","Heading 6": "标题6","Preformatted": "预格式化","Div": "Div区块","Pre": "预格式文本","Code": "代码","Paragraph": "段落","Blockquote": "引用","Inline": "文本","Blocks": "区块","Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "当前为纯文本粘贴模式，再次点击可以回到普通粘贴模式。","Fonts": "字体","Font Sizes": "字号","Class": "Class","Browse for an image": "浏览图像","OR": "或","Drop an image here": "拖放一张图片文件至此","Upload": "上传","Block": "块","Align": "对齐","Default": "默认","Circle": "空心圆","Disc": "实心圆","Square": "方块","Lower Alpha": "小写英文字母","Lower Greek": "小写希腊字母","Lower Roman": "小写罗马字母","Upper Alpha": "大写英文字母","Upper Roman": "大写罗马字母","Anchor...": "锚点...","Name": "名称","Id": "id","Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "id应该以字母开头，后跟字母、数字、横线、点、冒号或下划线。","You have unsaved changes are you sure you want to navigate away?": "你对文档的修改尚未保存，确定离开吗？","Restore last draft": "恢复上次的草稿","Special characters...": "特殊字符...","Source code": "HTML源码","Insert\/Edit code sample": "插入/编辑代码示例","Language": "语言","Code sample...": "代码示例...","Color Picker": "选取颜色","R": "R","G": "G","B": "B","Left to right": "从左到右","Right to left": "从右到左","Emoticons...": "表情符号...","Metadata and Document Properties": "元数据和文档属性","Title": "标题","Keywords": "关键词","Description": "描述","Robots": "机器人","Author": "作者","Encoding": "编码","Fullscreen": "全屏","Action": "操作","Shortcut": "快捷键","Help": "帮助","Address": "地址","Focus to menubar": "移动焦点到菜单栏","Focus to toolbar": "移动焦点到工具栏","Focus to element path": "移动焦点到元素路径","Focus to contextual toolbar": "移动焦点到上下文菜单","Insert link (if link plugin activated)": "插入链接 (如果链接插件已激活)","Save (if save plugin activated)": "保存(如果保存插件已激活)","Find (if searchreplace plugin activated)": "查找(如果查找替换插件已激活)","Plugins installed ({0}):": "已安装插件 ({0})：","Premium plugins:": "优秀插件：","Learn more...": "了解更多...","You are using {0}": "你正在使用 {0}","Plugins": "插件","Handy Shortcuts": "快捷键","Horizontal line": "水平分割线","Insert\/edit image": "插入/编辑图片","Image description": "图片描述","Source": "地址","Dimensions": "大小","Constrain proportions": "保持宽高比","General": "常规","Advanced": "高级","Style": "样式","Vertical space": "垂直边距","Horizontal space": "水平边距","Border": "边框","Insert image": "插入图片","Image...": "图片...","Image list": "图片列表","Rotate counterclockwise": "逆时针旋转","Rotate clockwise": "顺时针旋转","Flip vertically": "垂直翻转","Flip horizontally": "水平翻转","Edit image": "编辑图片","Image options": "图片选项","Zoom in": "放大","Zoom out": "缩小","Crop": "裁剪","Resize": "调整大小","Orientation": "方向","Brightness": "亮度","Sharpen": "锐化","Contrast": "对比度","Color levels": "色阶","Gamma": "伽马值","Invert": "反转","Apply": "应用","Back": "后退","Insert date\/time": "插入日期/时间","Date\/time": "日期/时间","Insert\/Edit Link": "插入/编辑链接","Insert\/edit link": "插入/编辑链接","Text to display": "显示文字","Url": "地址","Open link in...": "链接打开方式...","Current window": "当前窗口打开","None": "在当前窗口/框架打开","New window": "在新窗口打开","Remove link": "删除链接","Anchors": "锚点","Link...": "链接...","Paste or type a link": "粘贴或输入链接","The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?": "你所填写的URL地址为邮件地址，需要加上mailto:前缀吗？","The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?": "你所填写的URL地址属于外部链接，需要加上http://:前缀吗？","Link list": "链接列表","Insert video": "插入视频","Insert\/edit video": "插入/编辑视频","Insert\/edit media": "插入/编辑媒体","Alternative source": "替代资源","Alternative image URL": "资源备用地址","Media poster (Image URL)": "封面(图片地址)","Paste your embed code below:": "将内嵌代码粘贴在下面:","Embed": "内嵌","Media...": "多媒体...","Nonbreaking space": "不间断空格","Page break": "分页符","Paste as text": "粘贴为文本","Preview": "预览","Print...": "打印...","Save": "保存","Find": "查找","Replace with": "替换为","Replace": "替换","Replace all": "替换全部","Previous": "上一个","Next": "下一个","Find and replace...": "查找并替换...","Could not find the specified string.": "未找到搜索内容。","Match case": "区分大小写","Find whole words only": "全单词匹配","Spell check": "拼写检查","Ignore": "忽略","Ignore all": "忽略全部","Finish": "完成","Add to Dictionary": "添加到字典","Insert table": "插入表格","Table properties": "表格属性","Delete table": "删除表格","Cell": "单元格","Row": "行","Column": "列","Cell properties": "单元格属性","Merge cells": "合并单元格","Split cell": "拆分单元格","Insert row before": "在上方插入","Insert row after": "在下方插入","Delete row": "删除行","Row properties": "行属性","Cut row": "剪切行","Copy row": "复制行","Paste row before": "粘贴到上方","Paste row after": "粘贴到下方","Insert column before": "在左侧插入","Insert column after": "在右侧插入","Delete column": "删除列","Cols": "列","Rows": "行","Width": "宽","Height": "高","Cell spacing": "单元格外间距","Cell padding": "单元格内边距","Show caption": "显示标题","Left": "左对齐","Center": "居中","Right": "右对齐","Cell type": "单元格类型","Scope": "范围","Alignment": "对齐方式","H Align": "水平对齐","V Align": "垂直对齐","Top": "顶部对齐","Middle": "垂直居中","Bottom": "底部对齐","Header cell": "表头单元格","Row group": "行组","Column group": "列组","Row type": "行类型","Header": "表头","Body": "表体","Footer": "表尾","Border color": "边框颜色","Insert template...": "插入模板...","Templates": "模板","Template": "模板","Text color": "文字颜色","Background color": "背景色","Custom...": "自定义...","Custom color": "自定义颜色","No color": "无","Remove color": "删除颜色","Table of Contents": "目录","Show blocks": "显示区块边框","Show invisible characters": "显示不可见字符","Word count": "字数统计","Words: {0}": "字数：{0}","{0} words": "{0} 个字","File": "文件","Edit": "编辑","Insert": "插入","View": "查看","Format": "格式","Table": "表格","Tools": "工具","Powered by {0}": "Powered by {0}","Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "在编辑区按ALT+F9打开菜单，按ALT+F10打开工具栏，按ALT+0查看帮助","Image title": "图片标题","Border width": "边框宽度","Border style": "边框样式","Error": "错误","Warn": "警告","Valid": "有效","To open the popup, press Shift+Enter": "此快捷为软回车（插入<br>）","Rich Text Area. Press ALT-0 for help.": "编辑区. 按Alt+0键打开帮助","System Font": "默认字体","Failed to upload image: {0}": "图片上传失败: {0}","Failed to load plugin: {0} from url {1}": "插件加载失败: {0} - {1}","Failed to load plugin url: {0}": "插件加载失败: {0}","Failed to initialize plugin: {0}": "插件初始化失败: {0}","example": "示例","Search": "查找","All": "全部","Currency": "货币","Text": "文本","Quotations": "引用","Mathematical": "数学运算符","Extended Latin": "拉丁语扩充","Symbols": "符号","Arrows": "箭头","User Defined": "自定义","dollar sign": "美元","currency sign": "货币","euro-currency sign": "欧元","colon sign": "冒号","cruzeiro sign": "克鲁赛罗币","french franc sign": "法郎","lira sign": "里拉","mill sign": "密尔","naira sign": "奈拉","peseta sign": "比塞塔","rupee sign": "卢比","won sign": "韩元","new sheqel sign": "新谢克尔","dong sign": "越南盾","kip sign": "老挝基普","tugrik sign": "图格里克","drachma sign": "德拉克马","german penny symbol": "德国便士","peso sign": "比索","guarani sign": "瓜拉尼","austral sign": "澳元","hryvnia sign": "格里夫尼亚","cedi sign": "塞地","livre tournois sign": "里弗弗尔","spesmilo sign": "一千spesoj的货币符号，该货币未使用","tenge sign": "坚戈","indian rupee sign": "印度卢比","turkish lira sign": "土耳其里拉","nordic mark sign": "北欧马克","manat sign": "马纳特","ruble sign": "卢布","yen character": "日元","yuan character": "人民币元","yuan character, in hong kong and taiwan": "元的繁体字","yen\/yuan character variant one": "元（大写）","Loading emoticons...": "正在加载表情文字...","Could not load emoticons": "不能加载表情文字","People": "人类","Animals and Nature": "动物和自然","Food and Drink": "食物和饮品","Activity": "活动","Travel and Places": "旅游和地点","Objects": "物件","Flags": "旗帜","Characters": "字数","Characters (no spaces)": "字数（不含空格）","Error: Form submit field collision.": "错误: 表单提交字段冲突.","Error: No form element found.": "错误: 未找到可用的form.","Update": "更新","Color swatch": "颜色样本","Turquoise": "青绿","Green": "绿色","Blue": "蓝色","Purple": "紫色","Navy Blue": "海军蓝","Dark Turquoise": "深蓝绿色","Dark Green": "暗绿","Medium Blue": "中蓝","Medium Purple": "中紫","Midnight Blue": "深蓝","Yellow": "黄色","Orange": "橙色","Red": "红色","Light Gray": "浅灰","Gray": "灰色","Dark Yellow": "暗黄","Dark Orange": "暗橙","Dark Red": "暗红","Medium Gray": "中灰","Dark Gray": "深灰","Black": "黑色","White": "白色","Switch to or from fullscreen mode": "切换全屏模式","Open help dialog": "打开帮助对话框","history": "历史","styles": "样式","formatting": "格式化","alignment": "对齐","indentation": "缩进","permanent pen": "记号笔","comments": "注释","Anchor": "锚点","Special character": "特殊字符","Code sample": "代码示例","Color": "颜色","Emoticons": "表情","Document properties": "文档属性","Image": "图片","Insert link": "插入链接","Target": "目标","Link": "链接","Poster": "封面","Media": "音视频","Print": "打印","Prev": "上一个","Find and replace": "查找并替换","Whole words": "全字匹配","Spellcheck": "拼写检查","Caption": "标题","Insert template": "插入模板",//以下为补充汉化内容 by 莫若卿"Code view": "代码区域","Select...": "选择...","Format Painter": "格式刷","No templates defined.": "无内置模板","Special character...": "特殊字符...","Open link": "打开链接","None": "无","Count": "统计","Document": "整个文档","Selection": "选取部分","Words": "字词数","{0} characters": "{0} 个字符","Alternative source URL": "替代资源地址","Alternative description": "替代说明文字","Accessibility": "可访问性","Image is decorative": "仅用于装饰",//5.6新增"Line height": "行高","Cut column": "剪切列","Copy column": "复制列","Paste column before": "粘贴到前方","Paste column after": "粘贴到后方","Copy column": "复制列",//帮助窗口内的文字"Version": "版本","Keyboard Navigation": "键盘导航","Open popup menu for split buttons": "该组合键的作用是软回车（插入br）",});
4.vue组件中使用
<template><div><tinymce-editor:height="200":value="nextImprovementPlan"@input="EditorChange($event)":disabled="processStateDisabled"></tinymce-editor></div></template><script>// 引入TinymceEditorimport TinymceEditor from '@/components/Editor/TinymceEditor'export default {components:{TinymceEditor},data(){return {processStateDisabled:false, // 禁用nextImprovementPlan:'', // 富文本的值}},methods:{EditorChange(newValue){console.log(newValue)},}}</script>
本次记录重点在于 上传图片方法 需要区分工具栏中图片上传方法 以及 粘贴进去的图片也需要走上传方法。两个方法需要区分开。
如有漏缺，希望指正！
