本文共 5064 字,大约阅读时间需要 16 分钟。
来源 | https://blog.csdn.net/xingmeiok/article/deta
tinymce版资料:
http://tinymce.ax-z.cn/general/upload-images.php
tinymce英文版资料:
https://www.tiny.cloud/docs/api/tinymce/root_tinymce/
tinymce Github地址:
https://github.com/tinymce/tinymce-vue
tinymce gitee开源项目demo:
https://gitee.com/songtaohong/tinymce
版本:cli3+tinymce5
如果没有购买tinymce服务,需要安装下面2个。
npm install @tinymce/tinymce-vuenpm install tinymce
安装完成以后,在安装目录node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 public(cli3是public目录,cli2应该是static目录) 目录下。
tinymce默认是英文界面,需要下载一个中文包,选择对应的中文包进行下载。把这个中文包也放在public目录下面。
下载地址:https://www.tiny.cloud/get-tiny/language-packages/
在页面引入以下文件
import tinymce from 'tinymce/tinymce'import Editor from '@tinymce/tinymce-vue'import 'tinymce/themes/silver'
发现编辑器图片找不到,引入图标
import 'tinymce/icons/default/icons'
tinymce/tinymce是一个组件,引入组件注册,直接使用
//注册组件components: { Editor}
使用:
v-model:文本编辑器val,
:init绑定的初始化配置参数,完整的api可以参考上面提到的官方英文文档,和中文版的文档说明
:key,每次打开编辑器都是新的,防止重复。
基础配置讲解:
editorInit: { language_url: '/tinymce/zh_CN.js', //指定中文包 language: 'zh_CN',//中文 skin_url: '/tinymce/skins/ui/oxide',//编辑器皮肤, height: 500,//高度 browser_spellcheck: true, // 拼写检查 branding: false, // 去水印 elementpath: false, // 禁用编辑器底部的状态栏 statusbar: false, // 隐藏编辑器底部的状态栏 paste_data_images: true, // 允许粘贴图像 menubar: false // 隐藏最上方menu}
同时在 mounted 中也需要初始化一次:
mounted () { tinymce.init({}) }
完成了上面的初始化之后,就已经能正常运行编辑器了,但只有一些基本功能
tinymce 通过添加插件 步骤
plugins 的方式来添加功能
import引入组件
toolbar添加功能按钮
比如要添加一个上传图片的功能,就需要用到 image 插件,添加超链接需要用到 link 插件,常用的插件如下:
import 'tinymce/plugins/textcolor'import 'tinymce/plugins/advlist'import 'tinymce/plugins/table'import 'tinymce/plugins/lists'import 'tinymce/plugins/paste'import 'tinymce/plugins/preview'import 'tinymce/plugins/fullscreen'import 'tinymce/plugins/save'import 'tinymce/plugins/image'
editorInit: { language_url: '/tinymce/zh_CN.js', language: 'zh_CN', skin_url: '/tinymce/skins/ui/oxide', height: 500, browser_spellcheck: true, // 拼写检查 branding: false, // 去水印 elementpath: false, // 禁用编辑器底部的状态栏 statusbar: false, // 隐藏编辑器底部的状态栏 paste_data_images: true, // 允许粘贴图像 menubar: false, // 隐藏最上方menu plugins: 'save advlist table lists paste preview fullscreen image', toolbar: 'fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough save image| alignleft aligncenter alignright alignjustify | quicklink h2 h3 blockquote table numlist bullist preview fullscreen' }
图片上传有2种,菜单栏增加了上传图片的按钮功能,2是编辑器里面直接粘贴。
安装4的方法,配置image菜单。在init配置方法里面增加images_upload_handler回调方法方法,自定义上传图片,可以在这里设置。这给回调有三个参数images_upload_handler: function (blobInfo, success, failure),文件对象,成功回调,失败回调。在成功回调里面设置服务端接口返回的图片路径,图片src就会设置成返回的路径。
images_upload_handler: function (blobInfo, success, failure) { var formData var file = blobInfo.blob() // 转化为易于理解的file对象 formData = new FormData() formData.append('file', file, file.name) // 添加formData //我项目封装的提交接口,此处写你自己的提交 appRequestFile('xxx/xx', formData, 'post').then((res) => { console.log(res.data.data.filePath) //上传成功,成功回调,设置服务端返回的图片路径,设置成功以后,点击弹出框保存。图片就会显示在编辑器框里,图片的src就是接口返回的filePath success(res.data.data.filePath) }) }
2、图片直接粘贴
图片直接从其他地方,复制粘贴到文本域中,首先在引入paster组件,在init配置项里,设置允许粘贴图片。
粘贴成功首先,会调用paste_preprocess方法,此时args里面会有图片相关信息,默认图片的src是base64.
然后会调用images_upload_handler,这里就跟上传图片是一样的了。
editorInit: { language_url: '/tinymce/zh_CN.js', language: 'zh_CN', skin_url: '/tinymce/skins/ui/oxide', height: 500, browser_spellcheck: true, // 拼写检查 branding: false, // 去水印 elementpath: false, // 禁用编辑器底部的状态栏 statusbar: false, // 隐藏编辑器底部的状态栏 paste_data_images: true, // 允许粘贴图像 menubar: false, // 隐藏最上方menu plugins: 'save advlist table lists paste preview fullscreen image', toolbar: 'fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough save image| alignleft aligncenter alignright alignjustify | quicklink h2 h3 blockquote table numlist bullist preview fullscreen', images_upload_handler: function (blobInfo, success, failure) { var formData var file = blobInfo.blob() // 转化为易于理解的file对象 formData = new FormData() formData.append('file', file, file.name) // 此处与源文档不一样 appRequestFile('/upload/simple?moudle=cms', formData, 'post').then((res) => { console.log('-----images_upload_handler') console.log(res.data.data.filePath) success(res.data.data.filePath) }) }, paste_preprocess: function (plugin, args) { //粘贴图片成功,返回的args. console.log('---paster' + args) } }
保存
本文完~