vue2 中使用 Tinymce 富文本编辑器详解

项目中Tinymce效果图

如果想先了解一下，可以浏览一博主整理的的TinyMCE中文文档，或者Github：github.com/tinymce

安装依赖包/创建依赖文件

有一些博主，安装推荐的是tinymce@5.1.0，最后会遇到报错，import “tinymce/icons/default” 路径找不到，故需要升级tinymce版本，所以我这里直接安装的是tinymce@5.10.9；

npm i tinymce@5.10.9 -S
npm i @tinymce/tinymce-vue@3.0.1 -S

创建skins文件夹

安装完依赖包后，在项目中的src/assets文件下创建一个tinymce文件夹；

在node_modules中tinymce依赖包，找到其下面的skins文件下，直接复制，粘贴到src/assets/tinymce目录下；

目录如下：

汉化文件-zh_CN.js

如上图目录展示，在tinymce文件夹再添加个langs文件夹，其文件加下创建zh_CN.js文件；直接复制粘贴即可；

tinymce.addI18n("zh_CN", {
   
    Redo: "\u91cd\u505a",
    Undo: "\u64a4\u9500",
    Cut: "\u526a\u5207",
    Copy: "\u590d\u5236",
    Paste: "\u7c98\u8d34",
    "Select all": "\u5168\u9009",
    "New document": "\u65b0\u6587\u4ef6",
    Ok: "\u786e\u5b9a",
    Cancel: "\u53d6\u6d88",
    "Visual aids": "\u7f51\u683c\u7ebf",
    Bold: "\u7c97\u4f53",
    Italic: "\u659c\u4f53",
    Underline: "\u4e0b\u5212\u7ebf",
    Strikethrough: "\u5220\u9664\u7ebf",
    Superscript: "\u4e0a\u6807",
    Subscript: "\u4e0b\u6807",
    "Clear formatting": "\u6e05\u9664\u683c\u5f0f",
    "Align left": "\u5de6\u8fb9\u5bf9\u9f50",
    "Align center": "\u4e2d\u95f4\u5bf9\u9f50",
    "Align right": "\u53f3\u8fb9\u5bf9\u9f50",
    Justify: "\u4e24\u7aef\u5bf9\u9f50",
    "Bullet list": "\u9879\u76ee\u7b26\u53f7",
    "Numbered list": "\u7f16\u53f7\u5217\u8868",
    "Decrease indent": "\u51cf\u5c11\u7f29\u8fdb",
    "Increase indent": "\u589e\u52a0\u7f29\u8fdb",
    Close: "\u5173\u95ed",
    Formats: "\u683c\u5f0f",
    "Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X/C/V keyboard shortcuts instead.":
      "\u4f60\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u6253\u5f00\u526a\u8d34\u677f\uff0c\u8bf7\u4f7f\u7528Ctrl+X/C/V\u7b49\u5feb\u6377\u952e\u3002",
    Headers: "\u6807\u9898",
    "Header 1": "\u6807\u98981",
    "Header 2": "\u6807\u98982",
    "Header 3": "\u6807\u98983",
    "Header 4": "\u6807\u98984",
    "Header 5": "\u6807\u98985",
    "Header 6": "\u6807\u98986",
    Headings: "\u6807\u9898",
    "Heading 1": "\u6807\u98981",
    "Heading 2": "\u6807\u98982",
    "Heading 3": "\u6807\u98983",
    "Heading 4": "\u6807\u98984",
    "Heading 5": "\u6807\u98985",
    "Heading 6": "\u6807\u98986",
    Preformatted: "\u9884\u5148\u683c\u5f0f\u5316\u7684",
    Div: "Div",
    Pre: "Pre",
    Code: "\u4ee3\u7801",
    Paragraph: "\u6bb5\u843d",
    Blockquote: "\u5f15\u6587\u533a\u5757",
    Inline: "\u6587\u672c",
    Blocks: "\u57fa\u5757",
    "Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.":
      "\u5f53\u524d\u4e3a\u7eaf\u6587\u672c\u7c98\u8d34\u6a21\u5f0f\uff0c\u518d\u6b21\u70b9\u51fb\u53ef\u4ee5\u56de\u5230\u666e\u901a\u7c98\u8d34\u6a21\u5f0f\u3002",
    Fonts: "\u5b57\u4f53",
    "Font Sizes": "\u5b57\u53f7",
    Class: "\u7c7b\u578b",
    "Browse for an image": "\u6d4f\u89c8\u56fe\u50cf",
    OR: "\u6216",
    "Drop an image here": "\u62d6\u653e\u4e00\u5f20\u56fe\u50cf\u81f3\u6b64",
    Upload: "\u4e0a\u4f20",
    Block: "\u5757",
    Align: "\u5bf9\u9f50",
    Default: "\u9ed8\u8ba4",
    Circle: "\u7a7a\u5fc3\u5706",
    Disc: "\u5b9e\u5fc3\u5706",
    Square: "\u65b9\u5757",
    "Lower Alpha": "\u5c0f\u5199\u82f1\u6587\u5b57\u6bcd",
    "Lower Greek": "\u5c0f\u5199\u5e0c\u814a\u5b57\u6bcd",
    "Lower Roman": "\u5c0f\u5199\u7f57\u9a6c\u5b57\u6bcd",
    "Upper Alpha": "\u5927\u5199\u82f1\u6587\u5b57\u6bcd",
    "Upper Roman": "\u5927\u5199\u7f57\u9a6c\u5b57\u6bcd",
    "Anchor...": "\u951a\u70b9...",
    Name: "\u540d\u79f0",
    Id: "\u6807\u8bc6\u7b26",
    "Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.":
      "\u6807\u8bc6\u7b26\u5e94\u8be5\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u540e\u8ddf\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u7834\u6298\u53f7\u3001\u70b9\u3001\u5192\u53f7\u6216\u4e0b\u5212\u7ebf\u3002",
    "You have unsaved changes are you sure you want to navigate away?":
      "\u4f60\u8fd8\u6709\u6587\u6863\u5c1a\u672a\u4fdd\u5b58\uff0c\u786e\u5b9a\u8981\u79bb\u5f00\uff1f",
    "Restore last draft": "\u6062\u590d\u4e0a\u6b21\u7684\u8349\u7a3f",
    "Special character...": "\u7279\u6b8a\u5b57\u7b26...",
    "Source code": "\u6e90\u4ee3\u7801",
    "Insert/Edit code sample":
      "\u63d2\u5165/\u7f16\u8f91\u4ee3\u7801\u793a\u4f8b",
    Language: "\u8bed\u8a00",
    "Code sample...": "\u793a\u4f8b\u4ee3\u7801...",
    "Color Picker": "\u9009\u8272\u5668",
    R: "R",
    G: "G",
    B: "B",
    "Left to right": "\u4ece\u5de6\u5230\u53f3",
    "Right to left": "\u4ece\u53f3\u5230\u5de6",
    Emoticons: "\u8868\u60c5",
    "Emoticons...": "\u8868\u60c5\u7b26\u53f7...",
    "Metadata and Document Properties":
      "\u5143\u6570\u636e\u548c\u6587\u6863\u5c5e\u6027",
    Title: "\u6807\u9898",
    Keywords: "\u5173\u952e\u8bcd",
    Description: "\u63cf\u8ff0",
    Robots: "\u673a\u5668\u4eba",
    Author: "\u4f5c\u8005",
    Encoding: "\u7f16\u7801",
    Fullscreen: "\u5168\u5c4f",
    Action: "\u64cd\u4f5c",
    Shortcut: "\u5feb\u6377\u952e",
    Help: "\u5e2e\u52a9",
    Address: "\u5730\u5740",
    "Focus to menubar": "\u79fb\u52a8\u7126\u70b9\u5230\u83dc\u5355\u680f",
    "Focus to toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u5de5\u5177\u680f",
    "Focus to element path":
      "\u79fb\u52a8\u7126\u70b9\u5230\u5143\u7d20\u8def\u5f84",
    "Focus to contextual toolbar":
      "\u79fb\u52a8\u7126\u70b9\u5230\u4e0a\u4e0b\u6587\u83dc\u5355",
    "Insert link (if link plugin activated)":
      "\u63d2\u5165\u94fe\u63a5 (\u5982\u679c\u94fe\u63a5\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
    "Save (if save plugin activated)":
      "\u4fdd\u5b58(\u5982\u679c\u4fdd\u5b58\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
    "Find (if searchreplace plugin a