钦州建设网站,制作个人网站步骤,怎么夸一个网站开发公司,yoast seo当前文档是 wangEditor v4 版本的。
wangEditor v5 已经正式发布#xff0c;可参考文档。
v5 发布之后#xff0c;v4 将不再开发新功能。
介绍
English documentation
wangEditor4 —— 轻量级 web 富文本编辑器#xff0c;配置方便#xff0c;使用简单。
官网#…当前文档是 wangEditor v4 版本的。
wangEditor v5 已经正式发布可参考文档。
v5 发布之后v4 将不再开发新功能。
介绍
English documentation
wangEditor4 —— 轻量级 web 富文本编辑器配置方便使用简单。
官网www.wangeditor.com文档www.wangeditor.com/v4源码github.com/wangeditor-team/wangEditor 欢迎 star 1npm 安装 wangeditor
wangeditor v4 npm i wangeditor --save
基本使用
div iddiv1p欢迎使用 bwangEditor/b 富文本编辑器/p
/div
script typetext/javascriptconst E window.wangEditorconst editor new E(#div1)editor.create()
/script
2构建引入 wangeditor
import E from wangeditor
3创建html
div refeditorRef/div
根据 ref 设置 编辑器元素高度实例化 wangeditor
const editorRef ref()
editor new E(editorRef.value)
4配置菜单
默认情况下显示所有菜单 // 配置菜单栏删减菜单调整顺序
editor.config.menus [bold,head,link,italic,underline
]
5图片相关处理
5.1 上传图片限制
editor.config.uploadImgMaxLength 3
5.2 上传图片大小限制
editor.config.uploadImgMaxSize: 10 * 1024 * 1024, // 10M
5.3 请求头的设置
uploadImgServer: props.action, // 配置 server 接口地址
uploadImgHeaders: {Authorization: Bearer ${getPiniaToken()},X-Requested-With: XMLHttpRequest,
},
5.4 上传请求接口
editor.config.customUploadImg function (resultFiles, insertImgFn) {// resultFiles 是 input 中选中的文件列表// insertImgFn 是获取图片 url 后插入到编辑器的方法
// 上传图片返回结果将图片插入到编辑器中insertImgFn(imgUrl)
}
5.5 上传前的钩子函数
editor.config.uploadImgHooks {// 上传图片之前before: function(xhr) {console.log(xhr)
// 可阻止图片上传return {prevent: true,msg: 需要提示给用户的错误信息}},// 图片上传并返回了结果图片插入已成功success: function(xhr) {console.log(success, xhr)},// 图片上传并返回了结果但图片插入时出错了fail: function(xhr, editor, resData) {console.log(fail, resData)},// 上传图片出错一般为 http 请求的错误error: function(xhr, editor, resData) {console.log(error, xhr, resData)},// 上传图片超时timeout: function(xhr) {console.log(timeout)},// 图片上传并返回了结果想要自己把图片插入到编辑器中// 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式可使用 customInsertcustomInsert: function(insertImgFn, result) {// result 即服务端返回的接口console.log(customInsert, result)
// insertImgFn 可把图片插入到编辑器传入图片 src 执行函数即可insertImgFn(result.data[0])}
}
如果使用了 customUploadImg 自定义上传事件那么 wangeditor 其他的图片上传api将会失效例如 uploadImgServer 和 uploadImgHeadersuploadImgHooks 以上都是修改在 editor.config,可以直接在 定义一个对象在editor.config中看自己的需求
6设置是否源码模式
wangeditor 4 不支持源码模式但可以自定义新增菜单
在 wangeditor 中创建 dom,按照官方文档写法如下 constructor(editor: E) {// data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述const $elem $(div classw-e-menu data-title源码i stylefont-style: normal源码/i/div)super($elem, editor)}
给新增的dom菜单添加事件
// 菜单点击事件
clickHandler() {this.switchMode()this.tryChangeActive()
}
修改源码模式
enum Mode {// 源码模式Source source,// 实时预览模式Live live,
}
上面使用了枚举定义也可以不需要做看自己的使用方式
在这里判断模式状态 this.mode this.isSouceMode() ? Mode.Live : Mode.Source
重新设置编辑器内容
let html this.editor.txt.html() ||
切换为源码模式替换内容
使用字符串replace()函数查找字符进行转换输出为源码Html
html html.replace(//g, lt;).replace(//g, gt;).replace(/ /g, nbsp;)
源码转换为文本内容 html this.editor.txt.text().replace(/lt;/gi, ).replace(/gt;/gi, ).replace(/nbsp;/gi, )
菜单激活事件每次切换菜单的时候要调用下wangeditor 方法否则编辑器不知道你当前菜单(扩展)有哪些
tryChangeActive() {if (this.isSouceMode()) {this.active()} else {this.unActive()}}
其他扩展菜单可以参考文档案例https://codepen.io/xiaokyo-the-bold/pen/ZEpWBeo
7案例
扩展菜单class
export default class sourceMenu extends BtnMenu {mode Mode.Live
constructor(editor: E) {const $elem $(div classw-e-menu data-title源码i stylefont-style: normal源码/i/div)super($elem, editor)}
// 菜单点击事件clickHandler() {this.switchMode()this.tryChangeActive()}tryChangeActive() {if (this.isSouceMode()) {this.active()} else {this.unActive()}}
isSouceMode() {return this.mode Mode.Source}
switchMode() {this.mode this.isSouceMode() ? Mode.Live : Mode.Sourcelet html this.editor.txt.html() || if (this.isSouceMode()) {html html.replace(//g, lt;).replace(//g, gt;).replace(/ /g, nbsp;)} else :html this.editor.txt.text().replace(/lt;/gi, ).replace(/gt;/gi, ).replace(/nbsp;/gi, )}this.editor.txt.html(html)}
}
在页面加载时初始化wangeditor配置 editor.create()editor.txt.html(props.modelValue) // 初始化重新设置编辑器内容
部分代码
onMounted(() {editor new E(editorRef.value)// 扩展自定义【源码】菜单const sourceMenuKey sourceeditor.menus.extend(sourceMenuKey, sourceMenu)// 配置Object.assign(editor.config, {zIndex: 1,focus: false,height: props.height,menus: [sourceMenuKey, // 源码菜单head,bold,fontSize,fontName,italic,underline,strikeThrough,indent,lineHeight,foreColor,backColor,link,list,todo,justify,quote,emoticon,image,// video, // 移除视频菜单table,code,splitLine,undo,redo,],uploadFileName: file,uploadImgParams: {path: props.path,},uploadImgServer: , // 配置 server 接口地址uploadImgHeaders: {Authorization: token,X-Requested-With: XMLHttpRequest,},// 限制上传的最大图片数量uploadImgMaxLength: 2,// 单个文件的最大体积限制默认为 10MuploadImgMaxSize: 5 * 1024 * 1024, // 5McustomUploadImg: (files: Blob[], insertImgFn: (path: string) void) {try {const imgData new FormData()for (let i in files) {imgData.append(file, files[i])}// 请求接口,并通过 insertImgFn()函数 插入到编辑器中// imgUrl 是从接口返回的图片地址insertImgFn(imgUrl)} catch (error) {message.error(图片上传失败,请重新上传)}},
uploadImgHooks: {customInsert: function (insertImgFn: (path: string) void, res: Recordable) {// res即远程请求的response// insertImgFn 可把图片插入到编辑器传入图片 src 执行函数即可insertImgFn(res.data.path as string)},},onchange() {let sourceMenu editor?.menus.menuList.find((item) item.key sourceMenuKey)emit(update:isActive, sourceMenu?.isActive)emit(update:modelValue, editor!.txt.html())},onblur() {lock true},})editor.create()editor.txt.html(‘回显时的内容’) // 初始化重新设置编辑器内容watchEffect(() {props.disabled ? editor?.disable() : editor?.enable()})
})
onBeforeUnmount(() {editor!.destroy()editor null
})
