700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 用百度富文本编辑器UMeditor实现对html文本的编辑功能 vue中使用UMeditor编辑器

用百度富文本编辑器UMeditor实现对html文本的编辑功能 vue中使用UMeditor编辑器

时间:2023-03-12 11:07:25

相关推荐

用百度富文本编辑器UMeditor实现对html文本的编辑功能 vue中使用UMeditor编辑器

百度UMeditor编辑器资源免费下载地址:

/download/WanweI897/67403979

该编辑器没有官方文档,不过百度另一个编辑器UEditor有官方文档,两者有相似之处,可以前往查看:/ueditor/#start-start

下载解压下来后先查看根目录下的README.md文档,里面有使用说明。接着查看的umeditor-1.2.3/_examples目录下的completeDemo.html文件,里面有编辑器的完整演示和部分api。如果要在vue项目里引入,请参考如下代码:

1.main.js中引入umeditor

// 导入umeditorimport './utils/umeditor-1.2.3/themes/default/_css/umeditor.css'import './utils/umeditor-1.2.3/third-party/jquery.min.js'import './utils/umeditor-1.2.3/umeditor.config.js'import './utils/umeditor-1.2.3/umeditor.min.js'// import './utils/umeditor-1.2.3/_examples/editor_api.js'import './utils/umeditor-1.2.3/lang/zh-cn/zh-cn.js'

2.将umeditor定义成组件

<template><div class="editor_wrap"><script :id="'editor' + sid" name="content" type="text/plain"></script></div></template><script>// import $ from 'jquery'export default {name: 'MyEditor',props: ['sid','data'],data(){return {um: '', //UM.getEditor('xxx')对象}},methods: {initEditor(data){//初始化编辑器// 1.生成编辑器this.um = UM.getEditor('editor' + this.sid, {/* 传入配置参数,可配参数列表看umeditor.config.js */toolbar: [` undo redo | removeformat bold italic underline | justifyleft justifycenter justifyright justifyjustify`],autoClearinitialContent : false})console.log('生成了editor,id为:' + this.sid);// 2.设置编辑器内容(this.um).ready(() => {//注意插件有xss过滤白名单,使用此方式时会过滤掉标签的部分属性,以后有新增自定义属性时需要将属性名写入xss过滤白名单this.um.setContent(data) console.log('设置了editor内容,id为:' + this.sid)})// 3.设置编辑框宽高(在css里设置了此时就不需要设置)// um.setHeight(0)// um.setWidth($('.editor_wrap').width())// 4.监听编辑器失去焦点this.um.addListener('blur',function(){console.log('编辑器失去焦点了')})}},beforeDestroy(){// UM对象:umeditor编辑器对象// 组件销毁时editor也会销毁,此时需要从从cache中移除当前试题id的editor,以便后续能够重新生成editorif (this.um) UM.clearCache('editor' + this.sid)}}</script><style scoped>.editor_wrap{width: 100%;height: fit-content;}</style>

3.使用umeditor

<MyEditor :sid="123" :data="这是百度UMeditor编辑器"></MyEditor>

效果:

注意:

如果你在template中使用script标签报错,可将script标签改成div标签,影响未知每个人的环境不同,配置时可能会出问题。比如在vue中,导入umeditor时可能会在umeditor.min.js中报错未找到jquery,此时就需要在该文件中导入jquery。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。