百度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。