Vue3项目使用ueditor富媒体编辑器

发布时间：2025-09-21 00:56:04 阅读量： 0 来源： 互联网转载

我曾经试用过比较多的富媒体编辑器，比如TinyMCE CKEditor wangEditor kindeditor。但是总是因为各种原因不太满意。主要在于有一些UI很好，但功能很少，或则有一些有功能缺失，比如一些连切换源码功能都没有后来就放弃了。最后无意中看了一款美化版的ueditor,叫做neditor感觉还不错，各方面都让我感觉还行,这里就说在VUE3中的使用方法，缺点，优点。

neditor的缺点

基于百度ueditor的neditor有如下缺点，使用者请酌情考虑啊

BUG超多，毕竟百度已经N久没更新了。所以要在实际项目中完美使用起来那么你起码得有一定得二开能力，否则真得是头痛。
非常的重，一套源码下来有7M多，然后核心js文件有1万多行代码，大小即使压缩过后都有450KB。
加载项非常的多，第一次载入需要同时我算了一下大概有8个。这还是集成版，但是如果你使用的是开发版一次加载估计得几十个。
技术老旧，还是用N年前的技术已经更不上时代了。各种配置多如牛毛，关键是官方文档都关闭了。好在外面的技术文章也比较多。
实际环境中使用麻烦，特别是在于渲染上要配合spa页面总是会出现各种奇怪的问题。不能一步到位，经常需要做一些特殊的处理，不如新生代的编辑器，创建渲染完毕后几乎没啥需要特别适配的。

neditor的优点

功能齐全，该有的功能都有了啊。
美化版(svg)我认为是我用的UI最美观的。

neditor的安装

使用推荐使用npm安装(npm i @notadd/neditor -S)，安装好的是集成版本。不推荐比如在github上直接下下来的版本，很多你使用的话它是开发版，***一次就给你整个几十个按需文件。看的就烦。这里教大家怎么区分是开发版还是集成版。集成版都有一个neditor.all.min.js文件，而开发版没有。我们在github上下的基本是开发版，不太适合在实际环境中使用。所以推荐直接npm安装。

neditor配置

安装好好后，修改neditor.config.js文件，这里可以设置各种参数，因为数量很多我就不做介绍了，这里主要是一个路径的设置，包括上传路径的设置。这里路径如果是使用默认的我记得也有很多的坑。所以我设置了如下几个项目

window.UEDITOR_HOME_URL="neditor/" //就是这个，如果不这么设置好像在某些场景下会导致一些路径错误，有坑serverUrl: "你的上传路劲",imageActionName: "uploadimage",scrawlActionName: "uploadscrawl",videoActionName: "uploadvideo",fileActionName: "uploadfiles",imageFieldName: "avatarFile", // 提交的图片表单名称，根据你自己的上传源码来决定fileFieldName:"avatarFile",videoFieldName:"avatarFile",

还有一个neditor.service.js这是上传设置的，有能力可以单独设置。当然我自己通过修改这里还有核心源码neditor.all.min.js才达到让我满意的效果。有一些设置坑也很多，不修改源码的话根本用的不爽。具体是什么坑我现在忘记了，自己在实际环境中慢慢发现把！

在vue3中使用neditor

1、neditor.config.js->neditor.all.min.js->neditor.service.js按照这样的顺序加载。然后再vue的onMounted键入命令UE.getEditor("编辑器id")

2、在vue的Template里加入代码就可以正常创建编辑器了。

<p id="editor" type="text/plain" style="height:300px;width: 900px"></p>

虽然编辑器成功创建，但是这个坑还有比较多的，先说几个着急的把！

1、你最好更具不同的创景创建不同的UE副本，比如发布文章的时候创建UE.getEditor("send),修改文章的时候创建UE.getEditor("update")。这是因为比如有我在组件A中第一次创建了编辑器，然后我在另外一个地方又重新创建了一个组件A副本，那么第二次创建的组件A里的编辑器很可能无法渲染，出现一片空白。或则已经创建好的编辑器变成一片空白。

2、第二次创建编辑器，即你在组件A创建了编辑器，那么在组件B创建编辑器的时候最好使用延时创建。因为不使用延时的话经常创建不出来，这里我又个集成的方法。可以给大家做为参考

editor(n:string){    Const js_json:any=inject('js_json');    return new Promise(function(resolve,reject) {        function g(){            // @ts-ignore            setTimeout(()=>{                // @ts-ignore                Let ue=UE.getEditor(n)                resolve(ue)            },500)        }        js_json.editor===true? g(): $.getScript("neditor/neditor.config.js",(e:boolean)=>{            if (e){                $.getScript("neditor/neditor.all.min.js",(e:boolean)=>{                    if (e){                        $.getScript("neditor/neditor.service.js",(e:boolean)=>{                            if (e){                                js_json.editor=true;                                // @ts-ignore                                js_json.edit=UE.getEditor(n)                                resolve(js_json.edit)                            }else{                                reject(false)                            }                        })                    }else{                        reject(false)                    }                })            }else{                reject(false)            }        })    });},

调用方法

editor("编辑器ID名称").then((e)=>{  ue=e})

我这里就在第一次创建编辑器后再次生成的编辑器都延时了500毫秒，可以避免大部分无法渲染的问题。

3、如果你使用了keep-alive那么在来回切换的时候，这个该死的ueditor会丢失掉编辑器里的值，至于什么原因，我没查。但我使用如下解决办法。通过钩子函数，离开的时候我保存好内容，进入的时候在赋值。

onActivated(() => {  if (ue){    // @ts-ignore    ue.addListener("ready",()=>{      ue.setContent(db.value.Content)    })  }})onDeactivated(()=>{  if (ue){      db.value.Content= ue.getContent()  }})

4、在某些时候，我们给编辑器赋值的时候要使用延时技术不断的判断编辑器是否已经加载，加载了在赋值。这种场景一般是在新创建了编辑器副本，又需要立即给编辑器赋值的时候用到。比如更新文章。下面是我的处理代码。

let b=setInterval(()=>{  try {    ue.setContent(db.value.Content) //如果能成功赋值，就清除setInterval    clearInterval(b)  }catch(e) {  }},100)

出现这种情况是ueditor还没加载完毕我们就开始赋值了。要等它加载完毕后再赋值。

最后总结

真的，ueditor表面看起来功能强大，但是它又笨又重，如果有更好的代替品不建议使用。因为BUG很多。各种问题层出不穷，我自己使用它前前后后都改了很久才基本满意。但是使用依然很繁琐，做了很多相应的处理。不如一些新时代的编辑器，创建完成后就完事，基本没啥BUG需要处理的。如果需要开发前端可以联系我的QQ24722

上一篇: 如何打造优质 QQ 空间音乐外链，提升网站排名和流量

下一篇: 企业网站做好用户体验的两大基本要点

Vue3项目使用ueditor富媒体编辑器

热门文章