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

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

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

好啦。从头开始，。

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

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

下载里面有个文件夹是叫做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
        const _this = this;
        this.editor = UE.delEditor(this.id);
        this.editor = UE.getEditor(this.id,this.config);
        this.editor.addListener(“ready”,function(){
            setTimeout(function(){//过段时间在加载。这是在编辑的时候把获取的内容传到编辑器里
                if(_this.writeMsg!=”){_this.editor.setContent(_this.writeMsg)}
            },500)
            
        })
        
        
        
    },
    destoryed() {
        this.editor.destory();
    },
    methods:{
        getUEContent: function(){
            return this.editor.getContent();
        },
        getContentTxt: function(){
            return this.editor.getContentTxt();
        }
    }
}
</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里面定义的数据

//                富文本
            defaultMsg1:”,
            defaultMsg2:”,
            defaultMsg3:”,
            ueditor1:’ueditor1′,
            ueditor2:’ueditor2′,
            ueditor3:’ueditor3′,
            config1: {
              autoHeightEnabled: false,
              autoFloatEnabled: false,//不允许滚动时固定在顶部
               initialContent:’请输入题干内容…(如果是填空题请用{***}来表示横线)’,   //初始化编辑器的内容,
              autoClearinitialContent:true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
              initialFrameWidth: null,
              initialFrameHeight: 250,
              BaseUrl: ”,
              UEDITOR_HOME_URL: ‘static/ueditor/’
            },
             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()

遇到的问题：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.isinit){
                  return this.editor.setContent(val);
             }else{
                  const _this = this;
                 setTimeout(function(){//过段时间在加载.自己执行自己，直到编辑器ready了再回填数据
                        _this.setUEContent(val);
                },500)
             }
        },

}

大家可以参考download.csdn.net/download/qq…

这里面的项目估计还运行不了呢。有些没有用的东西，等有时间我再整理一下。大家暂时可以参考里面页面的布局什么的。