ueditor插件

前段时间有朋友问了我ueditor编辑器怎么使用,(提示一下我是vue项目中用的)我简单的设置了一下也写了一篇博客,只是简单的讲他的样式调试了出来,没有再具体研究,而这段时间项目当中用到了ueditor,然后写一写我在项目中遇到的一些问题.

再说一下功能,我的项目当中只是使用了要创建内容,然后可以修改内容,这样的话就得提交的时候,获取ueditor里面的内容,和原先有内容的话,将内容在放到ueditor里面.

先说使用方法,(具体步骤可以找上一个博客内容)

我在项目当中将他写成了一个组件,这样省的多个地方使用,发生一些不必要的问题,也省事.

代码如下:

<template>

    <div>

        <div id="editor" style="width: 100%; height: 250px; margin: 0 auto"></div>

    </div>

</template>

<script>

export default {

name: "UE",

data() {

return {

editor: null,

};

},

props: {

defaultMsg: { //因为使用传值的方法执行完了才传过来,所以不使用,改用setUEContent方法,父组件直接使用方法传过来

type: String

},

config: {

type: Object

}

},

mounted() {

const _this = this;

this.editor = UE.getEditor("editor", this.config); // 初始化UE

this.editor.addListener("ready", function() {

_this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。

});

},

methods: {

getUEContent() {

// 获取内容方法

return this.editor.getContent();

},

setUEContent(val){ //将该有的内容放入UE中

this.editor.setContent(val);

}

},

destroyed() {

this.editor.destroy();

}

};

</script>

引用的页面中 (这一块儿就不放完整的代码了.没有做demo直接从项目中复制过来了)

<udit :defaultMsg="defaultMsg" ref="ue"></udit>  

/*注意defaultMsg 这个变量是全局定义的,虽然我没有使用,但是还是要在的,不然控制台会报一个错误.所以为了没有要的错误提示,保留案例的一些内容 **/

当我点击发布的时候要获取Ueditor里面的内容使用:

this.context= this.$refs.ue.getUEContent();//获取一下ueditor里面的内容

当我是修改状态,从后台获取的数据里面有内容,那么获取到后:

this.defaultMsg=obj.messageContent;//UE(ueditor)的内容  //定义的变量也给一下,防止出错

this.$refs.ue.setUEContent(obj.messageContent);  //obj.messageContent就是后台获取到的数据

整个流程就是这样!!!

另外还有一个需要注意的地方,那就是本地测试和生产环境是不一样的,这个问题是我在项目中遇到的一个很大的难题,毕竟不懂后台是如何放置到服务器中的,自己知道可能是哪里有问题,具体问题就是后台防止打包后的项目时给多套了一层文件夹,原本是不会有影响我自己深信不疑,但是就是发生了这个问题.

知道了问题但是无从下手啊!!!和后台配合改了几次都没有成功,最后没办法了,拿出我的杀手剪吧,哈哈------搬救兵,找到一位后台的大神,给我演示了一下为什么会发生这种情况,在本地给我操作了一遍,我信了,最后大神给调试好了

具体修改的地方就是 这个文件中有个配置地址的地方,就是这一块儿有问题,

给大家一个一些常用方法的网址:https://www.cnblogs.com/sosoft/p/3450519.html  //里面介绍了他的一些方法,

其他地方没有改动,希望我的问题可以帮助到大家,谢谢!