• vue2中使用富文本编辑器tinyMCE全过程

    第一步：安装TinyMCE

    1. $npm install tinymce@5.10.0 -S
    2. $npm install @tinymce/tinymce-vue@3.0.1 -S

    第二步：在node_modules中找到tinymce文件夹将内部文件移入pubilc/tinymce文件夹中在index.html文件中引入tinymce.min.js

    注意：不把js文件放到本地会在富文本展示的时候显示注册密钥提示（也可以自己用css隐藏）

    1. html>
    2. <html lang="">
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
    7.     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    8.     <title><%= htmlWebpackPlugin.options.title %>title>
    9.   head>
    10.   <body>
    11.     <noscript>
    12.       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
    13.     noscript>
    14.     <div id="app">
    15.       <script src="./tinymce/tinymce.min.js">script>
    16.     div>
    17.     
    18.   body>
    19. html>

    第三步：汉语包

    创建文件public/lang/zh_CN.js 

    直接复制以下内容到文件zh_CN.js 中

    1. tinymce.addI18n('zh_CN',{
    2. "Redo": "\u91cd\u505a",
    3. "Undo": "\u64a4\u9500",
    4. "Cut": "\u526a\u5207",
    5. "Copy": "\u590d\u5236",
    6. "Paste": "\u7c98\u8d34",
    7. "Select all": "\u5168\u9009",
    8. "New document": "\u65b0\u6587\u4ef6",
    9. "Ok": "\u786e\u5b9a",
    10. "Cancel": "\u53d6\u6d88",
    11. "Visual aids": "\u7f51\u683c\u7ebf",
    12. "Bold": "\u7c97\u4f53",
    13. "Italic": "\u659c\u4f53",
    14. "Underline": "\u4e0b\u5212\u7ebf",
    15. "Strikethrough": "\u5220\u9664\u7ebf",
    16. "Superscript": "\u4e0a\u6807",
    17. "Subscript": "\u4e0b\u6807",
    18. "Clear formatting": "\u6e05\u9664\u683c\u5f0f",
    19. "Align left": "\u5de6\u8fb9\u5bf9\u9f50",
    20. "Align center": "\u4e2d\u95f4\u5bf9\u9f50",
    21. "Align right": "\u53f3\u8fb9\u5bf9\u9f50",
    22. "Justify": "\u4e24\u7aef\u5bf9\u9f50",
    23. "Bullet list": "\u9879\u76ee\u7b26\u53f7",
    24. "Numbered list": "\u7f16\u53f7\u5217\u8868",
    25. "Decrease indent": "\u51cf\u5c11\u7f29\u8fdb",
    26. "Increase indent": "\u589e\u52a0\u7f29\u8fdb",
    27. "Close": "\u5173\u95ed",
    28. "Formats": "\u683c\u5f0f",
    29. "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",
    30. "Headers": "\u6807\u9898",
    31. "Header 1": "\u6807\u98981",
    32. "Header 2": "\u6807\u98982",
    33. "Header 3": "\u6807\u98983",
    34. "Header 4": "\u6807\u98984",
    35. "Header 5": "\u6807\u98985",
    36. "Header 6": "\u6807\u98986",
    37. "Headings": "\u6807\u9898",
    38. "Heading 1": "\u6807\u98981",
    39. "Heading 2": "\u6807\u98982",
    40. "Heading 3": "\u6807\u98983",
    41. "Heading 4": "\u6807\u98984",
    42. "Heading 5": "\u6807\u98985",
    43. "Heading 6": "\u6807\u98986",
    44. "Preformatted": "\u9884\u5148\u683c\u5f0f\u5316\u7684",
    45. "Div": "Div",
    46. "Pre": "Pre",
    47. "Code": "\u4ee3\u7801",
    48. "Paragraph": "\u6bb5\u843d",
    49. "Blockquote": "\u5f15\u6587\u533a\u5757",
    50. "Inline": "\u6587\u672c",
    51. "Blocks": "\u57fa\u5757",
    52. "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",
    53. "Fonts": "\u5b57\u4f53",
    54. "Font Sizes": "\u5b57\u53f7",
    55. "Class": "\u7c7b\u578b",
    56. "Browse for an image": "\u6d4f\u89c8\u56fe\u50cf",
    57. "OR": "\u6216",
    58. "Drop an image here": "\u62d6\u653e\u4e00\u5f20\u56fe\u50cf\u81f3\u6b64",
    59. "Upload": "\u4e0a\u4f20",
    60. "Block": "\u5757",
    61. "Align": "\u5bf9\u9f50",
    62. "Default": "\u9ed8\u8ba4",
    63. "Circle": "\u7a7a\u5fc3\u5706",
    64. "Disc": "\u5b9e\u5fc3\u5706",
    65. "Square": "\u65b9\u5757",
    66. "Lower Alpha": "\u5c0f\u5199\u82f1\u6587\u5b57\u6bcd",
    67. "Lower Greek": "\u5c0f\u5199\u5e0c\u814a\u5b57\u6bcd",
    68. "Lower Roman": "\u5c0f\u5199\u7f57\u9a6c\u5b57\u6bcd",
    69. "Upper Alpha": "\u5927\u5199\u82f1\u6587\u5b57\u6bcd",
    70. "Upper Roman": "\u5927\u5199\u7f57\u9a6c\u5b57\u6bcd",
    71. "Anchor...": "\u951a\u70b9...",
    72. "Name": "\u540d\u79f0",
    73. "Id": "\u6807\u8bc6\u7b26",
    74. "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",
    75. "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",
    76. "Restore last draft": "\u6062\u590d\u4e0a\u6b21\u7684\u8349\u7a3f",
    77. "Special characters...": "\u7279\u6b8a\u5b57\u7b26...",
    78. "Source code": "\u6e90\u4ee3\u7801",
    79. "Insert\/Edit code sample": "\u63d2\u5165\/\u7f16\u8f91\u4ee3\u7801\u793a\u4f8b",
    80. "Language": "\u8bed\u8a00",
    81. "Code sample...": "\u793a\u4f8b\u4ee3\u7801...",
    82. "Color Picker": "\u9009\u8272\u5668",
    83. "R": "R",
    84. "G": "G",
    85. "B": "B",
    86. "Left to right": "\u4ece\u5de6\u5230\u53f3",
    87. "Right to left": "\u4ece\u53f3\u5230\u5de6",
    88. "Emoticons...": "\u8868\u60c5\u7b26\u53f7...",
    89. "Metadata and Document Properties": "\u5143\u6570\u636e\u548c\u6587\u6863\u5c5e\u6027",
    90. "Title": "\u6807\u9898",
    91. "Keywords": "\u5173\u952e\u8bcd",
    92. "Description": "\u63cf\u8ff0",
    93. "Robots": "\u673a\u5668\u4eba",
    94. "Author": "\u4f5c\u8005",
    95. "Encoding": "\u7f16\u7801",
    96. "Fullscreen": "\u5168\u5c4f",
    97. "Action": "\u64cd\u4f5c",
    98. "Shortcut": "\u5feb\u6377\u952e",
    99. "Help": "\u5e2e\u52a9",
    100. "Address": "\u5730\u5740",
    101. "Focus to menubar": "\u79fb\u52a8\u7126\u70b9\u5230\u83dc\u5355\u680f",
    102. "Focus to toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u5de5\u5177\u680f",
    103. "Focus to element path": "\u79fb\u52a8\u7126\u70b9\u5230\u5143\u7d20\u8def\u5f84",
    104. "Focus to contextual toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u4e0a\u4e0b\u6587\u83dc\u5355",
    105. "Insert link (if link plugin activated)": "\u63d2\u5165\u94fe\u63a5 (\u5982\u679c\u94fe\u63a5\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
    106. "Save (if save plugin activated)": "\u4fdd\u5b58(\u5982\u679c\u4fdd\u5b58\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
    107. "Find (if searchreplace plugin activated)": "\u67e5\u627e(\u5982\u679c\u67e5\u627e\u66ff\u6362\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
    108. "Plugins installed ({0}):": "\u5df2\u5b89\u88c5\u63d2\u4ef6 ({0}):",
    109. "Premium plugins:": "\u4f18\u79c0\u63d2\u4ef6\uff1a",
    110. "Learn more...": "\u4e86\u89e3\u66f4\u591a...",
    111. "You are using {0}": "\u4f60\u6b63\u5728\u4f7f\u7528 {0}",
    112. "Plugins": "\u63d2\u4ef6",
    113. "Handy Shortcuts": "\u5feb\u6377\u952e",
    114. "Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
    115. "Insert\/edit image": "\u63d2\u5165\/\u7f16\u8f91\u56fe\u7247",
    116. "Image description": "\u56fe\u7247\u63cf\u8ff0",
    117. "Source": "\u5730\u5740",
    118. "Dimensions": "\u5927\u5c0f",
    119. "Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
    120. "General": "\u666e\u901a",
    121. "Advanced": "\u9ad8\u7ea7",
    122. "Style": "\u6837\u5f0f",
    123. "Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
    124. "Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
    125. "Border": "\u8fb9\u6846",
    126. "Insert image": "\u63d2\u5165\u56fe\u7247",
    127. "Image...": "\u56fe\u7247...",
    128. "Image list": "\u56fe\u7247\u5217\u8868",
    129. "Rotate counterclockwise": "\u9006\u65f6\u9488\u65cb\u8f6c",
    130. "Rotate clockwise": "\u987a\u65f6\u9488\u65cb\u8f6c",
    131. "Flip vertically": "\u5782\u76f4\u7ffb\u8f6c",
    132. "Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
    133. "Edit image": "\u7f16\u8f91\u56fe\u7247",
    134. "Image options": "\u56fe\u7247\u9009\u9879",
    135. "Zoom in": "\u653e\u5927",
    136. "Zoom out": "\u7f29\u5c0f",
    137. "Crop": "\u88c1\u526a",
    138. "Resize": "\u8c03\u6574\u5927\u5c0f",
    139. "Orientation": "\u65b9\u5411",
    140. "Brightness": "\u4eae\u5ea6",
    141. "Sharpen": "\u9510\u5316",
    142. "Contrast": "\u5bf9\u6bd4\u5ea6",
    143. "Color levels": "\u989c\u8272\u5c42\u6b21",
    144. "Gamma": "\u4f3d\u9a6c\u503c",
    145. "Invert": "\u53cd\u8f6c",
    146. "Apply": "\u5e94\u7528",
    147. "Back": "\u540e\u9000",
    148. "Insert date\/time": "\u63d2\u5165\u65e5\u671f\/\u65f6\u95f4",
    149. "Date\/time": "\u65e5\u671f\/\u65f6\u95f4",
    150. "Insert\/Edit Link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
    151. "Insert\/edit link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
    152. "Text to display": "\u663e\u793a\u6587\u5b57",
    153. "Url": "\u5730\u5740",
    154. "Open link in...": "\u94fe\u63a5\u6253\u5f00\u4f4d\u7f6e...",
    155. "Current window": "\u5f53\u524d\u7a97\u53e3",
    156. "None": "\u65e0",
    157. "New window": "\u5728\u65b0\u7a97\u53e3\u6253\u5f00",
    158. "Remove link": "\u5220\u9664\u94fe\u63a5",
    159. "Anchors": "\u951a\u70b9",
    160. "Link...": "\u94fe\u63a5...",
    161. "Paste or type a link": "\u7c98\u8d34\u6216\u8f93\u5165\u94fe\u63a5",
    162. "The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u4e3a\u90ae\u4ef6\u5730\u5740\uff0c\u9700\u8981\u52a0\u4e0amailto:\u524d\u7f00\u5417\uff1f",
    163. "The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u5c5e\u4e8e\u5916\u90e8\u94fe\u63a5\uff0c\u9700\u8981\u52a0\u4e0ahttp:\/\/:\u524d\u7f00\u5417\uff1f",
    164. "Link list": "\u94fe\u63a5\u5217\u8868",
    165. "Insert video": "\u63d2\u5165\u89c6\u9891",
    166. "Insert\/edit video": "\u63d2\u5165\/\u7f16\u8f91\u89c6\u9891",
    167. "Insert\/edit media": "\u63d2\u5165\/\u7f16\u8f91\u5a92\u4f53",
    168. "Alternative source": "\u955c\u50cf",
    169. "Alternative source URL": "\u66ff\u4ee3\u6765\u6e90\u7f51\u5740",
    170. "Media poster (Image URL)": "\u5c01\u9762(\u56fe\u7247\u5730\u5740)",
    171. "Paste your embed code below:": "\u5c06\u5185\u5d4c\u4ee3\u7801\u7c98\u8d34\u5728\u4e0b\u9762:",
    172. "Embed": "\u5185\u5d4c",
    173. "Media...": "\u591a\u5a92\u4f53...",
    174. "Nonbreaking space": "\u4e0d\u95f4\u65ad\u7a7a\u683c",
    175. "Page break": "\u5206\u9875\u7b26",
    176. "Paste as text": "\u7c98\u8d34\u4e3a\u6587\u672c",
    177. "Preview": "\u9884\u89c8",
    178. "Print...": "\u6253\u5370...",
    179. "Save": "\u4fdd\u5b58",
    180. "Find": "\u67e5\u627e",
    181. "Replace with": "\u66ff\u6362\u4e3a",
    182. "Replace": "\u66ff\u6362",
    183. "Replace all": "\u5168\u90e8\u66ff\u6362",
    184. "Previous": "\u4e0a\u4e00\u4e2a",
    185. "Next": "\u4e0b\u4e00\u4e2a",
    186. "Find and replace...": "\u67e5\u627e\u5e76\u66ff\u6362...",
    187. "Could not find the specified string.": "\u672a\u627e\u5230\u641c\u7d22\u5185\u5bb9.",
    188. "Match case": "\u533a\u5206\u5927\u5c0f\u5199",
    189. "Find whole words only": "\u5168\u5b57\u5339\u914d",
    190. "Spell check": "\u62fc\u5199\u68c0\u67e5",
    191. "Ignore": "\u5ffd\u7565",
    192. "Ignore all": "\u5168\u90e8\u5ffd\u7565",
    193. "Finish": "\u5b8c\u6210",
    194. "Add to Dictionary": "\u6dfb\u52a0\u5230\u5b57\u5178",
    195. "Insert table": "\u63d2\u5165\u8868\u683c",
    196. "Table properties": "\u8868\u683c\u5c5e\u6027",
    197. "Delete table": "\u5220\u9664\u8868\u683c",
    198. "Cell": "\u5355\u5143\u683c",
    199. "Row": "\u884c",
    200. "Column": "\u5217",
    201. "Cell properties": "\u5355\u5143\u683c\u5c5e\u6027",
    202. "Merge cells": "\u5408\u5e76\u5355\u5143\u683c",
    203. "Split cell": "\u62c6\u5206\u5355\u5143\u683c",
    204. "Insert row before": "\u5728\u4e0a\u65b9\u63d2\u5165",
    205. "Insert row after": "\u5728\u4e0b\u65b9\u63d2\u5165",
    206. "Delete row": "\u5220\u9664\u884c",
    207. "Row properties": "\u884c\u5c5e\u6027",
    208. "Cut row": "\u526a\u5207\u884c",
    209. "Copy row": "\u590d\u5236\u884c",
    210. "Paste row before": "\u7c98\u8d34\u5230\u4e0a\u65b9",
    211. "Paste row after": "\u7c98\u8d34\u5230\u4e0b\u65b9",
    212. "Insert column before": "\u5728\u5de6\u4fa7\u63d2\u5165",
    213. "Insert column after": "\u5728\u53f3\u4fa7\u63d2\u5165",
    214. "Delete column": "\u5220\u9664\u5217",
    215. "Cols": "\u5217",
    216. "Rows": "\u884c",
    217. "Width": "\u5bbd",
    218. "Height": "\u9ad8",
    219. "Cell spacing": "\u5355\u5143\u683c\u5916\u95f4\u8ddd",
    220. "Cell padding": "\u5355\u5143\u683c\u5185\u8fb9\u8ddd",
    221. "Show caption": "\u663e\u793a\u6807\u9898",
    222. "Left": "\u5de6\u5bf9\u9f50",
    223. "Center": "\u5c45\u4e2d",
    224. "Right": "\u53f3\u5bf9\u9f50",
    225. "Cell type": "\u5355\u5143\u683c\u7c7b\u578b",
    226. "Scope": "\u8303\u56f4",
    227. "Alignment": "\u5bf9\u9f50\u65b9\u5f0f",
    228. "H Align": "\u6c34\u5e73\u5bf9\u9f50",
    229. "V Align": "\u5782\u76f4\u5bf9\u9f50",
    230. "Top": "\u9876\u90e8\u5bf9\u9f50",
    231. "Middle": "\u5782\u76f4\u5c45\u4e2d",
    232. "Bottom": "\u5e95\u90e8\u5bf9\u9f50",
    233. "Header cell": "\u8868\u5934\u5355\u5143\u683c",
    234. "Row group": "\u884c\u7ec4",
    235. "Column group": "\u5217\u7ec4",
    236. "Row type": "\u884c\u7c7b\u578b",
    237. "Header": "\u8868\u5934",
    238. "Body": "\u8868\u4f53",
    239. "Footer": "\u8868\u5c3e",
    240. "Border color": "\u8fb9\u6846\u989c\u8272",
    241. "Insert template...": "\u63d2\u5165\u6a21\u677f...",
    242. "Templates": "\u6a21\u677f",
    243. "Template": "\u6a21\u677f",
    244. "Text color": "\u6587\u5b57\u989c\u8272",
    245. "Background color": "\u80cc\u666f\u8272",
    246. "Custom...": "\u81ea\u5b9a\u4e49...",
    247. "Custom color": "\u81ea\u5b9a\u4e49\u989c\u8272",
    248. "No color": "\u65e0",
    249. "Remove color": "\u79fb\u9664\u989c\u8272",
    250. "Table of Contents": "\u5185\u5bb9\u5217\u8868",
    251. "Show blocks": "\u663e\u793a\u533a\u5757\u8fb9\u6846",
    252. "Show invisible characters": "\u663e\u793a\u4e0d\u53ef\u89c1\u5b57\u7b26",
    253. "Word count": "\u5b57\u6570",
    254. "Words: {0}": "\u5b57\u6570\uff1a{0}",
    255. "{0} words": "{0} \u5b57",
    256. "File": "\u6587\u4ef6",
    257. "Edit": "\u7f16\u8f91",
    258. "Insert": "\u63d2\u5165",
    259. "View": "\u89c6\u56fe",
    260. "Format": "\u683c\u5f0f",
    261. "Table": "\u8868\u683c",
    262. "Tools": "\u5de5\u5177",
    263. "Powered by {0}": "\u7531{0}\u9a71\u52a8",
    264. "Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "\u5728\u7f16\u8f91\u533a\u6309ALT-F9\u6253\u5f00\u83dc\u5355\uff0c\u6309ALT-F10\u6253\u5f00\u5de5\u5177\u680f\uff0c\u6309ALT-0\u67e5\u770b\u5e2e\u52a9",
    265. "Image title": "\u56fe\u7247\u6807\u9898",
    266. "Border width": "\u8fb9\u6846\u5bbd\u5ea6",
    267. "Border style": "\u8fb9\u6846\u6837\u5f0f",
    268. "Error": "\u9519\u8bef",
    269. "Warn": "\u8b66\u544a",
    270. "Valid": "\u6709\u6548",
    271. "To open the popup, press Shift+Enter": "\u6309Shitf+Enter\u952e\u6253\u5f00\u5bf9\u8bdd\u6846",
    272. "Rich Text Area. Press ALT-0 for help.": "\u7f16\u8f91\u533a\u3002\u6309Alt+0\u952e\u6253\u5f00\u5e2e\u52a9\u3002",
    273. "System Font": "\u7cfb\u7edf\u5b57\u4f53",
    274. "Failed to upload image: {0}": "\u56fe\u7247\u4e0a\u4f20\u5931\u8d25: {0}",
    275. "Failed to load plugin: {0} from url {1}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25: {0} \u6765\u81ea\u94fe\u63a5 {1}",
    276. "Failed to load plugin url: {0}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25 \u94fe\u63a5: {0}",
    277. "Failed to initialize plugin: {0}": "\u63d2\u4ef6\u521d\u59cb\u5316\u5931\u8d25: {0}",
    278. "example": "\u793a\u4f8b",
    279. "Search": "\u641c\u7d22",
    280. "All": "\u5168\u90e8",
    281. "Currency": "\u8d27\u5e01",
    282. "Text": "\u6587\u5b57",
    283. "Quotations": "\u5f15\u7528",
    284. "Mathematical": "\u6570\u5b66",
    285. "Extended Latin": "\u62c9\u4e01\u8bed\u6269\u5145",
    286. "Symbols": "\u7b26\u53f7",
    287. "Arrows": "\u7bad\u5934",
    288. "User Defined": "\u81ea\u5b9a\u4e49",
    289. "dollar sign": "\u7f8e\u5143\u7b26\u53f7",
    290. "currency sign": "\u8d27\u5e01\u7b26\u53f7",
    291. "euro-currency sign": "\u6b27\u5143\u7b26\u53f7",
    292. "colon sign": "\u5192\u53f7",
    293. "cruzeiro sign": "\u514b\u9c81\u8d5b\u7f57\u5e01\u7b26\u53f7",
    294. "french franc sign": "\u6cd5\u90ce\u7b26\u53f7",
    295. "lira sign": "\u91cc\u62c9\u7b26\u53f7",
    296. "mill sign": "\u5bc6\u5c14\u7b26\u53f7",
    297. "naira sign": "\u5948\u62c9\u7b26\u53f7",
    298. "peseta sign": "\u6bd4\u585e\u5854\u7b26\u53f7",
    299. "rupee sign": "\u5362\u6bd4\u7b26\u53f7",
    300. "won sign": "\u97e9\u5143\u7b26\u53f7",
    301. "new sheqel sign": "\u65b0\u8c22\u514b\u5c14\u7b26\u53f7",
    302. "dong sign": "\u8d8a\u5357\u76fe\u7b26\u53f7",
    303. "kip sign": "\u8001\u631d\u57fa\u666e\u7b26\u53f7",
    304. "tugrik sign": "\u56fe\u683c\u91cc\u514b\u7b26\u53f7",
    305. "drachma sign": "\u5fb7\u62c9\u514b\u9a6c\u7b26\u53f7",
    306. "german penny symbol": "\u5fb7\u56fd\u4fbf\u58eb\u7b26\u53f7",
    307. "peso sign": "\u6bd4\u7d22\u7b26\u53f7",
    308. "guarani sign": "\u74dc\u62c9\u5c3c\u7b26\u53f7",
    309. "austral sign": "\u6fb3\u5143\u7b26\u53f7",
    310. "hryvnia sign": "\u683c\u91cc\u592b\u5c3c\u4e9a\u7b26\u53f7",
    311. "cedi sign": "\u585e\u5730\u7b26\u53f7",
    312. "livre tournois sign": "\u91cc\u5f17\u5f17\u5c14\u7b26\u53f7",
    313. "spesmilo sign": "spesmilo\u7b26\u53f7",
    314. "tenge sign": "\u575a\u6208\u7b26\u53f7",
    315. "indian rupee sign": "\u5370\u5ea6\u5362\u6bd4",
    316. "turkish lira sign": "\u571f\u8033\u5176\u91cc\u62c9",
    317. "nordic mark sign": "\u5317\u6b27\u9a6c\u514b",
    318. "manat sign": "\u9a6c\u7eb3\u7279\u7b26\u53f7",
    319. "ruble sign": "\u5362\u5e03\u7b26\u53f7",
    320. "yen character": "\u65e5\u5143\u5b57\u6837",
    321. "yuan character": "\u4eba\u6c11\u5e01\u5143\u5b57\u6837",
    322. "yuan character, in hong kong and taiwan": "\u5143\u5b57\u6837\uff08\u6e2f\u53f0\u5730\u533a\uff09",
    323. "yen\/yuan character variant one": "\u5143\u5b57\u6837\uff08\u5927\u5199\uff09",
    324. "Loading emoticons...": "\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7...",
    325. "Could not load emoticons": "\u4e0d\u80fd\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7",
    326. "People": "\u4eba\u7c7b",
    327. "Animals and Nature": "\u52a8\u7269\u548c\u81ea\u7136",
    328. "Food and Drink": "\u98df\u7269\u548c\u996e\u54c1",
    329. "Activity": "\u6d3b\u52a8",
    330. "Travel and Places": "\u65c5\u6e38\u548c\u5730\u70b9",
    331. "Objects": "\u7269\u4ef6",
    332. "Flags": "\u65d7\u5e1c",
    333. "Characters": "\u5b57\u7b26",
    334. "Characters (no spaces)": "\u5b57\u7b26(\u65e0\u7a7a\u683c)",
    335. "Error: Form submit field collision.": "\u9519\u8bef: \u8868\u5355\u63d0\u4ea4\u5b57\u6bb5\u51b2\u7a81\u3002",
    336. "Error: No form element found.": "\u9519\u8bef: \u6ca1\u6709\u8868\u5355\u63a7\u4ef6\u3002",
    337. "Update": "\u66f4\u65b0",
    338. "Color swatch": "\u989c\u8272\u6837\u672c",
    339. "Turquoise": "\u9752\u7eff\u8272",
    340. "Green": "\u7eff\u8272",
    341. "Blue": "\u84dd\u8272",
    342. "Purple": "\u7d2b\u8272",
    343. "Navy Blue": "\u6d77\u519b\u84dd",
    344. "Dark Turquoise": "\u6df1\u84dd\u7eff\u8272",
    345. "Dark Green": "\u6df1\u7eff\u8272",
    346. "Medium Blue": "\u4e2d\u84dd\u8272",
    347. "Medium Purple": "\u4e2d\u7d2b\u8272",
    348. "Midnight Blue": "\u6df1\u84dd\u8272",
    349. "Yellow": "\u9ec4\u8272",
    350. "Orange": "\u6a59\u8272",
    351. "Red": "\u7ea2\u8272",
    352. "Light Gray": "\u6d45\u7070\u8272",
    353. "Gray": "\u7070\u8272",
    354. "Dark Yellow": "\u6697\u9ec4\u8272",
    355. "Dark Orange": "\u6df1\u6a59\u8272",
    356. "Dark Red": "\u6df1\u7ea2\u8272",
    357. "Medium Gray": "\u4e2d\u7070\u8272",
    358. "Dark Gray": "\u6df1\u7070\u8272",
    359. "Black": "\u9ed1\u8272",
    360. "White": "\u767d\u8272",
    361. "Switch to or from fullscreen mode": "\u5207\u6362\u5168\u5c4f\u6a21\u5f0f",
    362. "Open help dialog": "\u6253\u5f00\u5e2e\u52a9\u5bf9\u8bdd\u6846",
    363. "history": "\u5386\u53f2",
    364. "styles": "\u6837\u5f0f",
    365. "formatting": "\u683c\u5f0f\u5316",
    366. "alignment": "\u5bf9\u9f50",
    367. "indentation": "\u7f29\u8fdb",
    368. "permanent pen": "\u8bb0\u53f7\u7b14",
    369. "comments": "\u5907\u6ce8",
    370. "Anchor": "\u951a\u70b9",
    371. "Special character": "\u7279\u6b8a\u7b26\u53f7",
    372. "Code sample": "\u4ee3\u7801\u793a\u4f8b",
    373. "Color": "\u989c\u8272",
    374. "Emoticons": "\u8868\u60c5",
    375. "Document properties": "\u6587\u6863\u5c5e\u6027",
    376. "Image": "\u56fe\u7247",
    377. "Insert link": "\u63d2\u5165\u94fe\u63a5",
    378. "Target": "\u6253\u5f00\u65b9\u5f0f",
    379. "Link": "\u94fe\u63a5",
    380. "Poster": "\u5c01\u9762",
    381. "Media": "\u5a92\u4f53",
    382. "Print": "\u6253\u5370",
    383. "Prev": "\u4e0a\u4e00\u4e2a",
    384. "Find and replace": "\u67e5\u627e\u548c\u66ff\u6362",
    385. "Whole words": "\u5168\u5b57\u5339\u914d",
    386. "Spellcheck": "\u62fc\u5199\u68c0\u67e5",
    387. "Caption": "\u6807\u9898",
    388. "Insert template": "\u63d2\u5165\u6a21\u677f"
    389. });

    第四步：src/components文件夹中封装editor组件

    这里直接贴代码

    注意：

    1. 因为我们上传图片需要设置header头，所以自定义了图片上传images_upload_handler
    2. 碰到视频插入保存后在展示页面显示不出来的问题，用自定义的方法解决
    2. <script>
    3. // import { rootPath } from "@/utils/globalParam";
    4. import Editor from "@tinymce/tinymce-vue"
    5. import {
    6. 	uploadImg
    7. } from "@/api"
    8. export default {
    9.   components: {
    10.       'tiny-editor': Editor
    11.   },
    12.   props: {
    13.     modelValue: {
    14.       type: String,
    15.       default: ''
    16.     }
    17.   },
    18.   data() {
    19.       return {
    20.         editorConfig: { // 配置
    21.           selector: '#myEditor',
    22.           branding: false,
    23.           // inline: true,
    24.           elementpath: false,
    25.           height: 1100,
    26.           menubar: 'my1',
    27.           plugins: 'image link media table lists',
    28.           // images_upload_url: rootPath + "/news/upload/file", // 图片上传地址
    29.           images_upload_handler: function (blobInfo, succFun, failFun) {
    30.               let fd = new FormData()
    31.               fd.append('file', blobInfo.blob())
    32.               fd.append('fileType', 'news.contentImage')
    33.               uploadImg(fd).then(res => {
    34.                 succFun(res.relativePath)
    35.               })
    36.           },
    37.            media_url_resolver: function(data, resolve) {
    38.               try {
    39.                   let embedHtml = ''
    40.                   let videoUri = encodeURI(data.url);
    41.                   if(data.url.indexOf('.mp4')>-1) {
    42.                       // 判断是否mp4  否则用ifarme嵌套
    43.                       embedHtml = `
    44.                            width="100%" height="auto" style="max-width: 100%;" allowfullscreen="false" controls="controls" controlslist="nodownload">
    45.                           
    46.                       
      `      ;
    47.                       resolve({ html: embedHtml });
    48.                   }else {
    49.                       embedHtml = `
    50.                       
    51.                   
      `      ;
    52.               resolve({ html: embedHtml });
    53.           }
    54.           
    55.       } catch (e) {
    56.           resolve({ html: "" });
    57.       }
    58.   },
    59.           menu: {
    60.               my1: { title: '', items: ''},
    61.           },
    62.           language_url: "/tinymce/langs/zh_CN.js",
    63.           language: "zh_CN",
    64.           toolbar: "h1 h2 h3 | bold italic underline strikethrough | forecolor backcolor | bullist numlist alignleft aligncenter alignright alignjustify | outdent indent blockquote | undo redo removeformat | table link image media",
    65.         },
    66.         content: '',
    67.       }
    68.   },
    69.   watch: {
    70.     content(newValue) {
    71.       this.$emit("input", newValue);
    72.     },
    73.   },
    74.   created() {
    75.     this.initData()
    76.   },
    77.   methods: {
    78.     initData() {
    79.       this.content = this.modelValue
    80.     },
    81.   }
    82. }
    83. script>

    第五步：引用组件的父页面

    2. <script>
    3. import tinymceEditor from '@/components/editor.vue'
    4. export default {
    5.     components: {
    6.         tinymceEditor: tinymceEditor
    7.     },
    8.     data() {
    9.         content: ''
    10.     },
    11.     methods: {
    12.         contentChange(data) {
    13.             this.content = dats
    14.         }
    15.     }
    16. }
    17. script>

    最终展现效果：

  • 相关阅读:
    ubuntu 安装anaconda及虚拟环境cuda cudnn torch pytorch3d
    SSM框架-Spring(三)
    VS code运行vue项目
    【Python】Django Web 框架
    面向对象编程(高级部分)——final关键字
    Python+requests+unittest执行接口自动化测试
    【云原生】Spring Cloud Alibaba 之 Gateway 服务网关实战开发
    无涯教程-JavaScript - INFO函数
    vs2022 快捷键设置
    数据库概述05（数据库查询及修改操作）
  • 原文地址：https://blog.csdn.net/qq_41852789/article/details/132841795