# UEditor

该组件动态加载百度的Ueditor插件,避免多次重复打包编辑器的代码。

# 属性

属性 类型 说明 备注
width String 编辑器宽度 默认值100%
height Number 编辑器高度 单位px 默认值500
resPath String Ueditor的路径 默认值/ueditor/
config 初始化时的参数 Object
content 编辑器内容 String -
方法 参数 说明
display 使编辑器加载content
insertHtml html 在光标处插入代码,主要用于插入图片

# DEMO

<template>
<div>
	<u-editor class="main-detail-editor"
					  ref="myEditor"
					  width="380px"
					  :height="460"
					  :resPath="uePath"
					  :config="editConfig"
					  :content.sync="content"
			></u-editor>
	<el-button type="primary" @click="save">保存</el-button>
</div>
</template>

<script>

  import {UEditor} from 'sjfx/pc';
  import Config from '@/config';
  import {layer} from 'sjfx';

  export default {
    name: "topic-form",
    components: {
      UEditor,
    },
    props: {
      myModel: {
        type: Object
      }
    },
    data() {
      return {
        uePath: Config.editorPath,
        editConfig: Object.assign({
          autoHeightEnabled: false,
          autoFloatEnabled: false
        }, Config.editorConfig),

        content: ''

      }
    },
    methods: {
      add() {
	  	this.content = '';
        setTimeout(() => {
          this.$refs.myEditor.display();
        }, 100);
      },
      edit(data) {
        this.myModel.getContent().then(content => {
          this.content = content;
          setTimeout(() => {
            this.$refs.myEditor.display();
          }, 100);
        });
      },
      save() {
        this.myModel.content = this.content;
        this.myModel.$check().then(() => {
          this.myModel.$setData().then(() => {
            layer.success('保存成功!');
            this.visible = false;
            this.$emit('save');

            this.content = '';
            this.$refs.myEditor.display();
          })
        });
      }
    }
  }
</script>
Last Updated: 1/14/2020, 12:00:52 PM