UEditor的使用

vue UEditor的使用

1.先下载cn版本的完整版文件，

2.全部复制到一个static\ueditor这个文件夹

3.在html文件里引入

   < script  type= "text/javascript"  src= "static/ueditor/ueditor.config.js" ></ script >

   < script  type= "text/javascript"  src= "static/ueditor/ueditor.all.js" ></ script >

在vue文件中定义

    < textarea  id= 'addDetail'  style= "width: 100%;min-height: 250px;" ></ textarea >

data

  addDetail:  ''

方法：

    beforeDestroy:  function () {        //组件销毁前调用

       this. addDetail. destroy()

    },

    mounted() {

       this. initUeditor()

       setTimeout(()  => {

         this. asyncCount =  5

      },  1000)

    },

  initUeditor:  function () {

         this. addDetail =  UE. getEditor( 'addDetail')

 }

  let  addlist= this. addDetail. getContent()//获取内容

      如何定义自定义组件：

       config文件里：

   ,  toolbars: [[ 'source',  '|', 'undo',  'redo', '|', 'customstyle', 'fontfamily', 'fontsize', '|', 'bold',

         'italic',  'underline', 'link', '|', 'forecolor',  'backcolor',  'insertorderedlist', 'insertunorderedlist',

         '|', 'justifyleft',  'justifyright',  'justifycenter',  'justifFyjustify',  '|', 'uploadimage']]

         //当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置，否则以配置值为准

        , labelMap:{

             'uploadimage' : '图片'

        }

        all.js文件里：

/为工具栏添加按钮，以下都是统一的按钮触发命令，所以写在一起

     var  btnCmds = [ 'undo',  'redo',  'formatmatch',

         'bold',  'italic',  'underline',  'fontborder',  'touppercase',  'tolowercase',

         'strikethrough',  'subscript',  'superscript',  'source',  'indent',  'outdent',

         'blockquote',  'pasteplain',  'pagebreak',

         'selectall',  'print', 'horizontal',  'removeformat',  'time',  'date',  'unlink',

         'insertparagraphbeforetable',  'insertrow',  'insertcol',  'mergeright',  'mergedown',  'deleterow',

         'deletecol',  'splittorows',  'splittocols',  'splittocells',  'mergecells',  'deletetable',  'drafts',

         'uploadimage'];

    最后别忘了在

ueditor\themes\default\css\ueditor.css中写入样式

.edui-default  .edui-for-uploadimage .edui-icon {

     background-position:  -726px  -77px;

}

    最后在里面注册点击后的方法

       this. addDetail. commands[ 'uploadimage'] = {

             execCommand :  function(){

                 // _this.photoType = 'detail'

                 // //初始化

                 // _this.$eventhub.$emit('photoInit','multi',function(res){

                 //     var Opt=[];

                 //     for(var i=0;i<res.length;i++) {

                 //         Opt.push({ src: res[i].fdcImage})

                 //     }

                 //     _this.addDetail.execCommand('insertimage',Opt);

                 // })

                 alert( '你好');

            }

        };

   //这里定义一个photo.vue组件：

< el-dialog  title= "图片管理" : visible. sync= "dialogVisible" : close-on-click-modal= "true" >

    </ el-dialog >

       data(){

             return {

                 dialogVisible:  false,

                

func:  '',

}

      created:  function () {

             this. $eventhub. $on( 'photoInit', ( type,  func)  => {//注册这个方法 把父组件函数保存在自主件

                 this. selimage= '';

                 this. func =  func

                 this. initFun( type)

            })

        },

      initFun(){

    this. dialogVisible:true ,

     this. getPhotos( 0)//这里一般写组件初始化工作，得到值

     }

      insert:  function () { //真正插入图片

                 var  res = [];

                     var  res = [{ 'fdcImage' : 'WWW.BAIDU.PNG'},{ 'fdcImage' : 'WWW.BAIDUD.PNG'}];

                 // for (var i = 0; i < this.list.length; i++) {

                 //     if (this.list[i].isSelected == true) {

                 //         res.push(this.list[i]);

                 //     }

                 // }

                 if ( res. length >  0) {

                     this. res =  res;

                     this. func( res);//传给父主件

                     this. close();

                }  else {

                     this. $message({ message:  '请选择图片！',  type:  'success',  showClose:  true});

                }

}

    在父组件引入：

     import  Photo  from  '../../components/Photo.vue'

     components: {

             Photo,

        },

     initUeditor:  function () { 

                        _this. photoType =  'detail'

                         //初始化

                         _this. $eventhub. $emit( 'photoInit',  'multi',  function ( res) {//就是子主件传过来的值

                             var  Opt = [];

                             for ( var  i =  0;  i <  res. length;  i++) {

                                 Opt. push({  src:  res[ i]. fdcImage })

                            }

                             _this. addDetail. execCommand( 'insertimage',  Opt);//这里是调用ueditor的图片方法，会把图片路径变成     显示图片<img src="">这个

        },