Even after reading a lot of documents, there are still many pitfalls in practice. After a whole afternoon, it finally works. Let me record it
This case uses the tinymce plug-in, the Chinese official website: http://tinymce.ax-z.cn/ , directly enter the "three-party integration area" to view
1. First download the resources:
npm install tinymce -S
But only using this command, although the official website says to download all dependent packages at once, but when I npm run dev, the following error will be reported: translated as @tinymce/tinymce-vue/ under this file js not found
That is the lack of this dependent download, so download it again
npm install @tinymce/tinymce-vue
If you download and install in this way, the webpack package update will not report an error, but it will report an error in the browser, as follows:
It is because the version of the tinymce/tinymce-vue package is wrong, it is too high, so it needs to be executed again
npm install @tinymce/[email protected]
So far, back to normal
2. Start configuration
1. After downloading, copy the tinymce file under the node_module file to the static directory of the vue project at the same level as src
Because this plugin is in English, you need to download a Chinese package to convert it: https://www.tiny.cloud/get-tiny/language-packages/ After downloading, you need to put it in the static directory, which will be used later init initialization parameters
To import the tinymce component of vue into the vue component, you only need to quote this one, no need to quote more: import Editor from "@tinymce/tinymce-vue";
2. Then register and declare in components: components: { "tinymce": Editor } It can be mapped or not, it depends on yourself
Then use this on your component:
<tinymce :init="init" v-model="form.content"></tinymce>
v-model is bound to the initial copy of the rich text
The init attribute is to initialize some parameters of rich text, and the general configuration is as follows:
init: {
language_url: "/static/zh_CN.js", //路径就是我们下载的中文语言包路径
language: "zh_CN", //声明富文本的语言类型
height: 430,
menubar:true,//是否显示上面菜单
plugins:"link lists image code table colorpicker textcolor wordcount contextmenu",
toolbar:"bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify|bullist numlist |outdent indent blockquote | undo redo | link unlink image code | removeformat", //放置头部的一些配置
branding: false, //控制是否内联
images_upload_handler:(blobInfo, success,failure)=> {
success('data:image/jpeg;base64,' + blobInfo.base64())
}Among them, there are too many configurations in the toolbar. I have collected many resources. I don’t know if they are all
3. Menu optional functions
| configuration item | Belonging plug-in | describe |
|---|---|---|
| newdocument | core | create a new document |
| undo | core | withdraw |
| redo | core | recover |
| visualaid | core | Gridlines |
| cut | core | to cut |
| copy | core | copy |
| paste | core | paste |
| selectall | core | select all |
| bold | core | bold |
| italic | core | italics |
| underline | core | underline |
| strikethrough | core | strikethrough |
| subscript | core | subscript |
| superscript | core | Superscript |
| removeformat | core | clear format |
| codeformat | core | Insert code inline. |
| block format | core | Insert code in block form. |
| align | core | Change the alignment. |
| formats | core | All available formats. |
| link | link | Add a connection. |
| openlink | link | Add a link that opens in a new tab. |
| image | image | add pictures. |
| charmap | charmap | Opens the character map. |
| pastetext | paste | Paste as plain text. |
| Print. | ||
| preview | preview | preview |
| hr | hr | horizontal line |
| anchor | anchor | Insert anchor. |
| pagebreak | pagebreak | Page Breaks |
| spell checker | spell checker | Spell check switch. |
| searchreplace | searchreplace | Open the search and replace dialog |
| visualblocks | visualblocks | Hide block-level zone switches. |
| visualchars | visualchars | Hide string switch. |
| code | code | Source code preview. |
| fullscreen | fullscreen | full screen |
| insertdatetime | insertdatetime | Insert time. |
| media | media | insert media file |
| nonbreaking | nonbreaking | Insert a nonbreaking |
| inserttable | table | insert table |
| tableprops | table | Configure and insert the form. |
| deletetable | table | delete table. |
| cell | table | Table cell configuration |
| row | table | Table row configuration |
| column | table | Table column configuration |
| restoredraft | autosave | 恢复到上次自动保存的数据 |
| fullpage | fullpage | 查看完整的文档属性 |
| toc | toc | 插入目录 |
| help | help | 帮助菜单 |
工具栏可选功能
| 配置项 | 所属插件 | 描述 | ||
|---|---|---|---|---|
| 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 | 核心 | 插入的集合按钮 | ||
| hr | hr | 水平线 | ||
| bullist | lists | 无序列表 | ||
| numlist | lists | 有序列表 | ||
| link | link | 添加和修改链接 | ||
| unlink | link | 去除链接格式 | ||
| openlink | link | 打开选中链接 | ||
| image | image | 添加和修改图片 | ||
| charmap | charmap | 特殊符号 | ||
| pastetext | paste | 粘贴纯文本 | ||
| 打印 | ||||
| preview | preview | 预览 | ||
| anchor | anchor | 作者 | ||
| pagebreak | pagebreak | 分页符 | ||
| spellchecker | spellchecker | 拼写检查 | ||
| searchreplace | searchreplace | 搜索 | ||
| visualblocks | visualblocks | 隐藏块级区域开关 | ||
| visualchars | visualchars | 隐藏字符串开关. | ||
| code | code | 代码 | ||
| help | help | 帮助 | ||
| fullscreen | fullscreen | 全屏 | ||
| insertdatetime | insertdatetime | 插入时间 | ||
| media | media | 插入/编辑媒体文件 | ||
| nonbreaking | nonbreaking | 不间断空格 | ||
| save | save | 保存(ajax) | ||
| cancel | save | 取消保存 | ||
| table | table | 插入/编辑表格 | ||
| tabledelete | table | 删除表格 | ||
| tablecellprops | table | 单元格属性 | ||
| tablemergecells | table | 合并单元格 | ||
| tablesplitcells | table | 拆分单元格 | ||
| tableinsertrowbefore | table | 在当前行之前插入一个新行 | ||
| tableinsertrowafter | table | 在当前行之后插入一个新行 | ||
| tabledeleterow | table | 删除当前行 | ||
| tablerowprops | table | 行属性 | ||
| tablecutrow | table | 剪切选定行 | ||
| tablecopyrow | table | 复制选定行 | ||
| tablepasterowbefore | table | 在当前行之前粘贴行 | ||
| tablepasterowafter | table | 在当前行之后粘贴行 | ||
| tableinsertcolbefore | table | 在当前列之前插入一个列 | ||
| tableinsertcolafter | table | 在当前列之后插入一个列. | ||
| tabledeletecol | table | 删除当前列 | ||
| rotateleft | imagetools | 逆时针旋转当前图像 | ||
| rotateright | imagetools | 顺时针旋转当前图像 | ||
| flipv | imagetools | 垂直翻转当前图像 | ||
| fliph | imagetools | 水平翻转当前图像 | ||
| editimage | imagetools | 打开图像编辑对话框 | ||
| imageoptions | imagetools | 打开图像配置对话框 | ||
| fullpage | fullpage | 完整页面的文档属性 | ||
| ltr | directionality | 设置编写方向从左到右 | ||
| rtl | directionality | 设置编写方向从右到左 | ||
| emoticons | emoticons | 表情 | ||
| template | template | 插入模板 | ||
| forecolor | textcolor | 文本颜色 | ||
| backcolor | textcolor | 背景颜色 | ||
| restoredraft | restoredraft | 恢复到最新的自动保存草稿 | ||
| insertfile | moxiemanager | 引入文件 | ||
| a11ycheck | a11ychecker | 检查访问性 | ||
| toc | toc | 插入目录 | ||
| quickimage | inlite | 插入本地图像 |
||
| quicktable | inlite | 插入2X2的表格 | ||
| quicklink | inlite | 插入连接 |
至此，一个简单的富文本算是成型了，但是还有一些其他功能还没开始研究，未完待续。。。。