码迷,mamicode.com
首页 > 其他好文 > 详细

vue 中 使用百度编辑器 UEditor

时间:2017-11-03 21:56:23      阅读:1092      评论:0      收藏:0      [点我收藏+]

标签:alert   配置   eth   配置到   textarea   定义   obj   导致   methods   

 已有前辈整理,记录URL:

http://www.cnblogs.com/ocean-sky/p/7132319.html

http://blog.csdn.net/psd_html/article/details/73312859

需注意的代码:

子组件:config接收父组件传来的配置

mounted() {//初始化UE
      const _this = this;
      _this.editor = UE.getEditor(editor,Object.assign({
        autoHeightEnabled: false,
        autoFloatEnabled: true,  //是否工具栏可浮动
        initialContent:请输入内容,   //初始化编辑器的内容,也可以通过textarea/script给值,看官网例子
        autoClearinitialContent:true, //是否自动清除编辑器初始内容,注意:如果focus属性设置为true,这个也为真,那么编辑器一上来就会触发导致初始化的内容看不到了
        initialFrameWidth: null,
        initialFrameHeight: 450,
        BaseUrl: ‘‘,
        UEDITOR_HOME_URL: ‘static/UEditor/‘
      },_this.config));
  },
  destoryed() {
    this.editor.destory();
  },
  methods: {
    getUEContent: function() {
      return this.editor.getContent();
    }
  },

父组件:(传自定义配置到组件)

<ueditor :config="config" ref="ueditor"></ueditor>
        <br>
        <el-button size="small" @click="getContent">获取编辑器内容</el-button>


data() {
        return {
            config: {
                //此处定义工具栏的内容
                // toolbars: [
                // [‘fullscreen‘, ‘source‘,‘|‘, ‘undo‘, ‘redo‘,‘|‘,‘bold‘, ‘italic‘, ‘underline‘, ‘fontborder‘, ‘strikethrough‘,
                //     ‘|‘,‘superscript‘,‘subscript‘,‘|‘, ‘forecolor‘, ‘backcolor‘,‘|‘, ‘removeformat‘,‘|‘, ‘insertorderedlist‘, ‘insertunorderedlist‘,
                //     ‘|‘,‘selectall‘, ‘cleardoc‘,‘fontfamily‘,‘fontsize‘,‘justifyleft‘,‘justifyright‘,‘justifycenter‘,‘justifyjustify‘,‘|‘,
                //     ‘link‘,‘unlink‘]
                // ]
            },
        }
    },

methods: {
        //获取文档内容
        getContent(){
          let content = this.$refs.ueditor.getUEContent();
          console.log(content);
        //   alert(content);
        }
        
    },
    components: {        
        ueditor: UEditor
    }

 

仅记录备注一下

 

vue 中 使用百度编辑器 UEditor

标签:alert   配置   eth   配置到   textarea   定义   obj   导致   methods   

原文地址:http://www.cnblogs.com/xiangsj/p/7780283.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!