vue+ueditor+kityformula数学公式插件

心已赠人 2022-10-06 05:50 756阅读 0赞

ueditor.vue组件

<template>
      <div class="home">
       <script :id="id"  :defaultMsg="writeMsg" type="text/plain" ></script>    
       <div></div>
      </div>
    </template>
    <script>
    
    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'
    import { mapState } from 'vuex'
    export default {
        name: "UEditor",
        props: {
            id: {
                type: String
            },
            config: {
                type: Object
            },
            writeMsg:{
                type: String
            }
        },
    //  components:{util},
        data() {
            return {
              editor: null,
              message: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(){
                setTimeout(function(){//过段时间在加载。这是在编辑的时候把获取的内容传到编辑器里
                    if(_this.writeMsg!=''){_this.editor.setContent(_this.writeMsg)}
                },500)
                
            })
            
            })  
        },
        destoryed() {
            this.editor.destory();
        },
        methods:{
          getMessage(){
            debugger
            this.message =  this.getUEContent();
          },
           getUEContent(){
      debugger
             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>

在需要用到富文本编译器的组件中引入uedictor.vue ,config1中的初始化配置可以查看官网，或者去百度，去掘金都可以找到的，这个不是重点。

<template>
      <div class="home">
           <Ueditor :writeMsg="defaultMsg1"  :id="ueditor1" :config="config1"  ref="ue1" ></Ueditor> 
      </div>
    </template>
    <script>
    import Ueditor from '@/views/home/Ueditor.vue'
    export default {
      components:{
        Ueditor
      },
        name: "home",
        data() {
            return {
                editor: null,
                activeName:'first',
                defaultMsg1:'',
    
                ueditor1:'ueditor1',
    
                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',//修改编辑器的层级
                }, 
            }
        },   
    methods:{
      // this.$refs.ue1.getUEContent()  获取文本中的内容   
      // this.$refs.ue3.setUEContent(编辑器赋值的内容);
    } 
    }
    </script>
    
    <style lang="scss" scoped>
     .home{
        width:100%;
        height: 100%;
      }
      .message{
        flex: 1;
      }
    </style>

重点在这里，就是下面的ueditor文件和 数学公式插件kityformula文件 ，找了很多文章全部要付费，经过我几天的努力还是找到了免费的。  
![在这里插入图片描述][20210611160343972.PNG_pic_center]

[下载地址][Link 1]  
我还遇到了一个坑。就是我在一级路由使用公式插件会正常显示，但是在二级路由中国使用的时候就会不显示。现在是解决了.但是不是官方给的方法，官方让配置这个 window.UEDITOR\_HOME\_URL = “/xxxx/xxxx/”;  
我没找到解决方法，就直接删除了 改成这个样子var URL = ‘/static/ueditor/’;就出来了。  
问题是解决了，但是还有很多不足的地方，还请大佬多多指教。

[20210611160343972.PNG_pic_center]: /images/20221005/19c8d1887fc249be8acaf105b832f45d.png
[Link 1]: https://gitee.com/zhou_zi_haos/ueditor.git