安装tinymce富文本编辑器插件
npm i tinymce
npm i @tinymce/tinymce-vue
创建Editor.js文件 封装组件 以便使用
<template> <div class="tinymce-editor"> <editor v-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: { // 添加相关的事件，可用的事件参照文档=> https://github.com/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>汉化包 （我放在public/tynymce/langs文件夹里）
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": "此快捷为软回车（插入
）", "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）", });vue组件中使用
<template><div> <tinymce-editor :height="200" :value="nextImprovementPlan" @input="EditorChange($event)" :disabled="processStateDisabled" > </tinymce-editor> </div></template><script> // 引入TinymceEditor import TinymceEditor from '@/components/Editor/TinymceEditor' export default { components:{ TinymceEditor }, data(){ return { processStateDisabled:false, // 禁用 nextImprovementPlan:'', // 富文本的值 } }, methods:{ EditorChange(newValue){ console.log(newValue) },} } </script>本次记录重点在于 上传图片方法 需要区分工具栏中图片上传方法 以及 粘贴进去的图片也需要走上传方法。两个方法需要区分开。
如有漏缺，希望指正！
