南通网站建设优化公司,网站获取访问者qq号码,wordpress前端用户中心开发,淘宝标题优化网站1、前言
现有的Quill比较简单#xff0c;无法满足业务需求#xff08;例如SEO的图片属性编辑需求#xff09; Quill已经有比较长的时间没有更新了#xff0c;虽然很灵活#xff0c;但是官方demo都没有一个。 业务前期也没有这块的需求#xff0c;也没有考虑到这块的扩展…
1、前言
现有的Quill比较简单无法满足业务需求例如SEO的图片属性编辑需求 Quill已经有比较长的时间没有更新了虽然很灵活但是官方demo都没有一个。 业务前期也没有这块的需求也没有考虑到这块的扩展问题。 市面上常见的富文本编辑器比较
开源富文本编辑器比较常见富文本编辑器大对比 发现很多人不是很推荐quill。(说实话我也不是很推荐一个富文本编辑器你官方demo都不整一个你是要上天么
2、官网入门
官网地址
官网地址
官网介绍
看下就行了基本上都差不多
用于 Vue React | wangEditor
直接找到对应的Vue版本就可以了React有用到的话也可以用下本人没有用到
Vue 2版本Vue3版本React版本
官网demo
官方提供了一个在线的版本可以直接在线编辑试用。如果网络不好也可以把代码下载到本地处理。 Demo代码在线运行地址
安装wangEditor npm install wangeditor/editor --save # 或者 yarn add wangeditor/editornpm install wangeditor/editor-for-vue --save # 或者 yarn add wangeditor/editor-for-vue注1、安装前请注意看下你对应的Vue版本是Vue2还是Vue3。 2、可能会常出现版本冲突的问题如果出现版本的问题请添加npm的安装参数 --legacy-peer-deps具体干啥用的请自行百度
3、基本配置项
(1) 组件引用
templatedivdiv styleborder: 1px solid #ccc; margin-top: 10px!-- 工具栏 --Toolbarstyleborder-bottom: 1px solid #ccc:editoreditor:defaultConfigtoolbarConfig/!-- 编辑器 --Editorstyleheight: 400px; overflow-y: hidden:defaultConfigeditorConfigv-modelhtmlonChangeonChangeonCreatedonCreated//div /div
/template(2)默认配置项
script
import { Editor, Toolbar } from wangeditor/editor-for-vue;
import wangeditor/editor/dist/css/style.css;
export default {name: MyEditor,components: { Editor, Toolbar },data() {return {editor: null,html: phellonbsp;world/p,toolbarConfig: {// toolbarKeys: [ /* 显示哪些菜单如何排序、分组 */ ],// excludeKeys: [ /* 隐藏哪些菜单 */ ],},editorConfig: {placeholder: 请输入内容...,// autoFocus: false,// 所有的菜单配置都要在 MENU_CONF 属性下MENU_CONF: {},},};},methods: {onCreated(editor) {// 【注意】一定要用 Object.seal() 否则会报错this.editor Object.seal(editor); }},mounted() {// 模拟 ajax 请求异步渲染编辑器setTimeout(() {this.html pAjax 异步设置内容 HTML/p;}, 1500);},beforeDestroy() {const editor this.editor;if (editor null) return;editor.destroy(); // 组件销毁时及时销毁 editor 重要},
};
/script
基本配置就OK了。 基本上运行能看到下面的框.
4、个性化参数配置
上传调用后台接口配置
框框出来了你发现上传图片会提示下面错误 原因是需要配置上传路径地址。
根据官方的说法直接配置对应的参数即可
官方上传图片传送门 可以参考下官方的这个Demo上传图片官方Demo
editorConfig: {//菜单配置MENU_CONF: {// 配置上传图片uploadImage: {//server必须要配置正确server: /api/upload,...}}} 更多菜单配置
请查看菜单配置
个人菜单配置内容
editorConfig: {placeholder: 请输入内容...,pasteFilterStyle: false,zIndex: 12000,//看这里//-----------------------------------MENU_CONF: {// 配置上传图片uploadImage: {//server必须配置server: process.env.VUE_APP_API_BASE_URL /api/upload,// 最多可上传几个文件默认为 100maxNumberOfFiles: 10,// 选择文件时的类型限制默认为 [image/*] 。如不想限制则设置为 []allowedFileTypes: [],// 自定义上传参数例如传递验证的 token 等。参数会被添加到 formData 中一起上传到服务端。fieldName: file,meta: {//官网中把token放到了这里但是请求的时候会看不到token},headers: {//token放这里 getUserToken()这个方法需要自己实现Authorization: Bearer getUserToken(),},// 将 meta 拼接到 url 参数中默认 falsemetaWithUrl: false,// 跨域是否传递 cookie 默认为 falsewithCredentials: false,// 超时时间默认为 10 秒timeout: 5 * 1000, // 5 秒customInsert(res, insertFn) {// 从 res 中找到 url alt href 然后插图图片// res 是上传后从后端返回的结果集。具体根据返回对象进行设置。if(res.code200){const imageObjres.data[0]insertFn(imageObj.url, imageObj.name, imageObj.url)}},},},mode:default,// simple,}编辑器配置
编辑器配置
工具栏配置
工具栏配置
其它常用功能
有的时候需要清除历史数据这样处理的话主要是方便进行重新赋值。 Clear()方法进行重置
this.editor.clear()方法就可以清空编辑器内容。this.editor.setHtml()设置内容。
5、基础样式调整
(1)添加边框 样式调整写的稍微有点模糊需要自己慢慢定位下。 最外层的样式如下
styleborder: 1px solid #1890ff最外层包括Toolbar和Editor两个组件。
(2)图片编辑框调整 图片的样式默认是没有高亮如果需要高亮需要对现在的样式进行调整。 代码如下 .editor .w-e-text-container{.w-e-hover-bar{/* 选中图片样式样式覆盖*/border: 1px solid #1890ff;color: #1890ff;}.w-e-modal {/* 弹框边框样式覆盖 */border: 1px solid #1890ff;}.w-e-modal button {/* 弹框按钮样式覆盖 */background-color: #1890ff;color: #fff;}}6、代码
全部代码如下
editor配置参数
templatedivdiv styleborder: 1px solid #ccc; margin-top: 10px!-- 工具栏 --Toolbarstyleborder-bottom: 1px solid #ccc:editoreditor:defaultConfigtoolbarConfig/!-- 编辑器 --Editorstyleheight: 400px; overflow-y: hidden:defaultConfigeditorConfigv-modelhtmlonChangeonChangeonCreatedonCreated//div /div
/template
script
import { Editor, Toolbar } from wangeditor/editor-for-vue;export default {name: MyEditor,components: { Editor, Toolbar },data() {return {editor: null,html: phellonbsp;world/p,toolbarConfig: {// toolbarKeys: [ /* 显示哪些菜单如何排序、分组 */ ],// excludeKeys: [ /* 隐藏哪些菜单 */ ],},editorConfig: {placeholder: 请输入内容...,pasteFilterStyle: false,zIndex: 12000,//看这里//-----------------------------------MENU_CONF: {// 配置上传图片uploadImage: {//server必须配置server: process.env.VUE_APP_API_BASE_URL /api/upload,// 最多可上传几个文件默认为 100maxNumberOfFiles: 10,// 选择文件时的类型限制默认为 [image/*] 。如不想限制则设置为 []allowedFileTypes: [],// 自定义上传参数例如传递验证的 token 等。参数会被添加到 formData 中一起上传到服务端。fieldName: file,meta: {//官网中把token放到了这里但是请求的时候会看不到token},headers: {//token放这里 getUserToken()这个方法需要自己实现Authorization: Bearer getUserToken(),},// 将 meta 拼接到 url 参数中默认 falsemetaWithUrl: false,// 跨域是否传递 cookie 默认为 falsewithCredentials: false,// 超时时间默认为 10 秒timeout: 5 * 1000, // 5 秒customInsert(res, insertFn) {// 从 res 中找到 url alt href 然后插图图片// res 是上传后从后端返回的结果集。具体根据返回对象进行设置。if(res.code200){const imageObjres.data[0]insertFn(imageObj.url, imageObj.name, imageObj.url)}},},},mode:default,// simple,}};},methods: {onCreated(editor) {this.editor Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错},},mounted() {// 模拟 ajax 请求异步渲染编辑器setTimeout(() {this.html pAjax 异步设置内容 HTML/p;}, 1500);},beforeDestroy() {const editor this.editor;if (editor null) return;editor.destroy(); // 组件销毁时及时销毁 editor 重要},
};
/script7、小结
(1)整体来讲比较简单 (2)需要注意是个性化方面的设置 ①个性化官方有说明但是示例不太明显。需要自己一个个尝试 有点小bug还能忍受下。 图片太大会直接选中图片导致属性框不显示的问题
ps:editor.destroy(); // 组件销毁时及时销毁 editor 重要 这个在弹窗的时候最好销毁所有的子组件。这样处理的话不会导致点开多次不回显的问题。
相关文章：
