vue for UEditor

174 阅读1分钟

第一步,将ueditor下载,并到文件放到public文件夹下。
1,在index.html中加入如下代码:

    <script type="text/javascript" charset="utf-8" src="<%= BASE_URL %>ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="<%= BASE_URL %>ueditor/ueditor.all.js"></script>

2,修改ueditor.all.js,找到,修改为

document.write(`<script type="text/javascript" src= "/ueditor/_src/${pi}"></script>`

3,现在就可以用了,以下是新建组件内容

  <script :id="myEditor" type="text/plain">
    <p>这里我可以写一些输入提示 </p>  //这里是写到view层里边的
  </script>
      mounted() {
      //初始化UE
        UE.getEditor('myEditor',{
            //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
            toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold','test']],
            //focus时自动清空初始化时的内容
            autoClearinitialContent:true,
            //关闭字数统计
            wordCount:false,
            //关闭elementPath
            elementPathEnabled:false,
            //默认的编辑区域高度
            initialFrameHeight:300
            //更多其他参数,请参考ueditor.config.js中的配置项
        })                    
    },
    destoryed() {
      this.editor.destory();
    },
    methods:{
      getUEContent: function(){
       return this.editor.getContent();
      }
    }