UEditor编辑器

UEditor编辑器官网：http://ueditor.baidu.com/website/index.html

特点

• 上传方式灵活配置

  编辑器作为一种富文本表单元素，拥有文件上传的功能。在框架中，编辑器搭配阿里云OSS插件、七牛云KODO插件，可以将文件上传到阿里云或者七牛云。

• 可以与多个不同的编辑器共存

  框架目前提供两种编辑器插件，一种是UEditor，一种是MEditor。在框架中，同一个表单，可以同时使用两种编辑器。并且，每种编辑器都允许使用多个。

具体使用

添加页面展示编辑器

<iframe src="/admin/ueditor.html?upload_type=local" class="editor" data-type="ueditor" data-id="ueditor" style="width:100%;height:530px;border: 0"></iframe>

说明

• iframe的class=”editor”表示这个iframe要渲染成编辑器
• iframe的data-type=”ueditor”表示这个编辑器的ueditor编辑器
• iframe的src地址中，upload_type的值表示编辑器的上传文件功能将使用何种方式上传，目前可选值有
  • local 本地上传
  • ali-oss 阿里云OSS上传，需要安装阿里云OSS插件
  • qiniu-kodo 七牛KODO上传，需要安装七牛云KODO插件
• iframe的data-id属性值即编辑器提交表单时的参数名称

编辑页面展示编辑器

<iframe src="/admin/ueditor.html?id=ueditor&upload_type=ali-oss" class="editor" data-type="ueditor" data-id="ueditor" style="width:100%;height:530px;border: 0"></iframe>
<textarea class="editorContent" data-id="ueditor" style="display:none;">{{=d.ueditor}}</textarea>

说明

• iframe的data-id和textarea的data-id属性值要一样
• textarea的class=”editorContent”表名这个textarea存储的是编辑器需要渲染的内容，即数据库存储的编辑器的内容

点击表单提交按钮获取编辑器内容

form.on('submit(laytp-form)', function(data){
    // 获取编辑器内容
    data = facade.setEditorField(data);
    facade.ajax({
        route:'/admin.test/edit',
        data:data.field
    }).done(function(res){
        if(res.code === 0){
            //关闭当前页
            parent.layui.layer.close(parent.layui.layer.getFrameIndex(window.name));
            parent.layui.table.reload("laytp-table");
        }
    });
    return false;
});