vue+elmentui +ueditor +数学公式 编辑器 ueditor

写了几乎一个星期终于写好了，在vue项目中使用的编辑器，最主要的是我想编辑器里面可以输入数学公式。】

https://download.csdn/download/qq_33769914/10672128在这里下载

如果想把图片公式转为有样式的文本内容，可以参考这个https://blog.csdn/qq_33769914/article/details/83573317

上面就是我想实现的功能。编辑器时可以切换的。

好啦。从头开始，。

首先我们去现在下载一个uedotor的编辑器。可以在这里下载所需的插件。https://download.csdn/download/qq_33769914/10651871

也可以直接在我上传的一个完整的项目里面查看，地址：https://download.csdn/download/qq_33769914/10672128

下载里面有个文件夹是叫做kityformula-plugin这个是公式的插件。我都放在ueditor这一个文件夹里面了。

把他放在static里面。

然后我们就可以编写一个组件，以便再其他的页面可以直接用啦。

<template>
<div>
<script :id="id" :defaultMsg="writeMsg" type="text/plain" ></script> //id，defaultMsg接收父组件传来的内容
</div>
</template>

<script>

//引入编辑器。我都是在子组件里面加的，我看有的说是在main.js里面添加，这样的话所有页面都引入了这个插件就很必要了。
import '../../../static/ueditor/ueditor.config.js'
import '../../../static/ueditor/ueditor.all.js'
import '../../../static/ueditor/lang/zh-cn/zh-cn.js'

//引入公式插件。我们也是通过import的方式加进来的。
import '../../../static/ueditor/kityformula-plugin/addKityFormulaDialog.js'
import '../../../static/ueditor/kityformula-plugin/getKfContent.js'
import '../../../static/ueditor/kityformula-plugin/defaultFilterFix.js'

export default {
name: "UEditor",
props: {
id: {
type: String
},
config: {
type: Object
},
writeMsg:{
   type: String
}
},
// components:{util},
data() {
return {
editor: null
}
},
mounted() {
//初始化UE


this.$nextTick(()=>{//避免在切换到填空题再切回来找不到dom而报offsetWidth undefined
   const _this = this;
this.editor = UE.delEditor(this.id);
   this.editor = UE.getEditor(this.id,this.config);

this.editor.addListener("ready",function(){
_this.isinit=true;

})

})




},
destoryed() {
this.editor.destory();
},
methods:{
getUEContent: function(){
return this.editor.getContent();
},
getContentTxt: function(){
return this.editor.getContentTxt();
},

setUEContent: function(val){
    if(this.editor && this.editor.isReady){
const _this = this;
setTimeout(function(){//过段时间在加载
_this.editor.setContent(val);
},500);
return;
    }else{
        const _this = this;
        setTimeout(function(){//过段时间在加载
       _this.setUEContent(val);
   },500)
    }
},
}
}
</script>

使用这个组件

import Ueditor from '@/components/ueditor/Ueditor.vue';

components: {
Ueditor
},

<el-tabs v-model="activeName" type="card">
       <el-tab-pane label="题干" name="first" >
           <div v-show="activeName=='first'">
           <Ueditor :writeMsg="defaultMsg1" :id="ueditor1" :config="config1" ref="ue1" ></Ueditor>
           </div>

       </el-tab-pane>
       <el-tab-pane label="分析" name="second" >
           <div v-show="activeName=='second'">
           <Ueditor :writeMsg="defaultMsg2" :id="ueditor2" :config="config2" ref="ue2" ></Ueditor>
           </div>

       </el-tab-pane>
       <el-tab-pane label="解答" name="third" >
           <div v-show="activeName=='third'">
           <Ueditor :writeMsg="defaultMsg3" :id="ueditor3" :config="config3" ref="ue3" ></Ueditor>
           </div>
       </el-tab-pane>
   </el-tabs>

data里面定义的数据

            activeName:'first',
   defaultMsg1:'',
   defaultMsg2:'',
   defaultMsg3:'',
   ueditor1:'ueditor1',
   ueditor2:'ueditor2',
   ueditor3:'ueditor3',
   config1: {

serverUrl:"http://domain/core/upload/ueditor?type=40",//如果页面的上传的文件的地址在使用编辑器的地方并不是一个。我们就可以在当前的配置文件里面写上他的地址
   autoHeightEnabled: false,
autoFloatEnabled: false,//不允许滚动时固定在顶部
initialContent:'请输入题干内容...(如果是填空题请用{***}来表示横线)', //初始化编辑器的内容,
autoClearinitialContent:true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
initialFrameWidth: null,
initialFrameHeight: 250,
BaseUrl: '',
UEDITOR_HOME_URL: 'static/ueditor/',

zIndex:'100',//修改编辑器的层级
   },
   config2: {
   autoHeightEnabled: false,
autoFloatEnabled: false,//不允许滚动时固定在顶部
initialContent:'请输入分析内容...', //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
autoClearinitialContent:true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
initialFrameWidth: null,
initialFrameHeight: 250,
BaseUrl: '',
UEDITOR_HOME_URL: 'static/ueditor/'
   },
   config3: {
   autoHeightEnabled: false,
autoFloatEnabled: false,//不允许滚动时固定在顶部
initialContent:'请输入解答内容...', //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
autoClearinitialContent:true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
initialFrameWidth: null,
initialFrameHeight: 250,
BaseUrl: '',
UEDITOR_HOME_URL: 'static/ueditor/'
   },

获取内容的方式：this.$refs.ue1.getUEContent()

设置编辑器的内容 this.$refs.ue3.setUEContent(编辑器赋值的内容);

遇到的问题：1.公式的图标有时出现，有时不出现

那是因为我在使用编辑器的页面才引入的公式插件。导致插件还没有加载完。

最后直接放在ueditor子组件里面通过import的方式引入的就好了。

2.切换页面的时候。编辑器里原本编辑好的内容又置空了。并且页面左下角还出现了小三角放大了就是我刚才写在编辑器里面的内容。

因为我切换页面的方式是v-if。当他为假时就会把刚才的编辑器从页面删除，当他为真时把那块内容再添加到html中。相当于就是从新加载了。

我改成v-show就好了。

还有我点击上一步再回来页面编辑器里面内容也丢失了，原因是一样的。改成v-show就好了。

3.为编辑器设置默认的内容无效（用在编辑页面显示的是默认的值）。。

我在那里面子组件里面写的这段代码就是当他父组件里面传来的的writeMsg不为空代表是编辑页面有内容的。这个时候再放在编辑器里。但是必须写在ready里面。而且必须过段时间在执行，至于写了ready证明加载完了以后还要过段时间为什么，我也不清楚。但是好像必须这样。

mounted() {

this.editor.addListener("ready",function(){
_this.isinit=true;

}

}，

methods:{

  setUEContent: function(val){
    if(this.editor && this.editor.isReady){
const _this = this;
setTimeout(function(){//过段时间在加载
_this.editor.setContent(val);
},500);
return;
    }else{
        const _this = this;
        setTimeout(function(){//过段时间在加载
       _this.setUEContent(val);
   },500)
    }
},

}

更多推荐

vue+elmentui +ueditor +数学公式编辑器 ueditor