说明

富文本组件不支持在search form搜索表单中使用。

示例

默认的xeditor

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <actions>
        <button
            text="清除"
            target="myEditor.clear"
        />
        <button
            text="确定"
            status="primary"
            target="myEditor.confirm"
        />
    </actions>
    <form x="myEditor"
          label-size="0"
          confirm-button="{{false}}"
          clear-button="{{false}}"
          @confirm="confimHandler"
    >
        <item
            node="xeditor"
            name="xeditor"
            toolbarConfig="{{toolbarConfig}}"
            editorConfig="{{editorConfig}}"
            value="{{value}}"
            colspan="{{6}}"
            uploadImage_customInsert="{{customInsert}}"
            uploadVideo_customInsert="{{customInsert}}"
        />
    </form>
</page>

export default XPage({
    data: {
        toolbarConfig: {},
        editorConfig: {
            placeholder: '请输入',
            MENU_CONF: {
                uploadImage: {
                    fieldName: 'file',
                    server: '//testapi-nodedmallos.dmall.com/cabinx/file/upload',
                    withCredentials: true,
                },
                uploadVideo: {
                    fieldName: 'file',
                    server: '//testapi-nodedmallos.dmall.com/cabinx/file/upload',
                    withCredentials: true,
                },
            },
        },
        value: '',
    },
    show() {
    },
    confimHandler(data) {
        console.info(data)
    },
    customInsert(res, insertFn) {
        insertFn(res.url);
    },
});

simple的xeditor

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <actions>
        <button
            text="清除"
            target="myEditor.clear"
        />
        <button
            text="确定"
            status="primary"
            target="myEditor.confirm"
        />
    </actions>
    <form x="myEditor"
          label-size="0"
          confirm-button="{{false}}"
          clear-button="{{false}}"
          @confirm="confimHandler">
        <item
            node="xeditor"
            name="xeditor"
            mode="simple"
            toolbarConfig="{{toolbarConfig}}"
            editorConfig="{{editorConfig}}"
            value="{{value}}"
            colspan="{{6}}"
            uploadImage_customInsert="{{customInsert}}"
            uploadVideo_customInsert="{{customInsert}}"
        />
    </form>
</page>

export default XPage({
    data: {
        toolbarConfig: {},
        editorConfig: {
            placeholder: '请输入',
            MENU_CONF: {
                uploadImage: {
                    fieldName: 'file',
                    server: '//testapi-nodedmallos.dmall.com/cabinx/file/upload',
                    withCredentials: true,
                },
                uploadVideo: {
                    fieldName: 'file',
                    server: '//testapi-nodedmallos.dmall.com/cabinx/file/upload',
                    withCredentials: true,
                },
            },
        },
        value: '',
    },
    show() {
    },
    confimHandler(data) {
        console.info(data)
    },
    customInsert(res, insertFn) {
        insertFn(res.url);
    },
});

Attributes

属性	说明	类型	可选值	默认值	端	版本
name	名称	String	--	--	PC	--
value	html值	String	--	--	PC	--
mode	编辑器内置了两种模式，default：默认模式 - 集成了富文本所有功能，simple：简洁模式 - 仅有部分常见功能，但更加简洁易用	String	simple/default	'default'	PC	--
toolbarConfig	工具栏配置，详细请参考三方组件wangEditor v5	Object	--	--	PC	--
editorConfig	编辑器配置，详细请参考三方组件wangEditor v5	Object	--	--	PC	--
height	高度，使用px等绝对值	String	--	--	PC	--
disabled	禁用	Boolean	--	--	PC	--

TIPS：editorConfig在三方文档中配置为函数function类型的请全部使用组件xeditor的属性配置（属性名称为：父级key_函数key），在editorConfig中配置无效。图片和视频的customUpload在双线程不支持，其他非函数配置不变。 如上传图片和视频服务器返回结构不符合要求时可以使用customInsert自定义插入图片函数：

   三方配置为：

   editorConfig={
     MENU_CONF:{
            uploadImage:{
                customInsert(res,insertFn){
                    insertFn(res.url);
                }
            },
            uploadVideo:{
                customInsert(res,insertFn){
                    insertFn(res.url);
                }
            },
        }
    }

    需改为如下方式使用：

   <item node="xeditor" uploadImage_customInsert="{{customInsert}}" uploadVideo_customInsert="{{customInsert}}"/>

Events

名称	说明	回调参数	端	版本
changed	值改变后触发	(value)	PC	--
focus	聚焦触发	(editor)	PC	--
blur	失焦触发	(editor)	PC	--
maxLength	达到 maxlength 限制时触发	(editor)	PC	--
customAlert	自定义编辑器 alert	(info, type)	PC	--
customPaste	自定义粘贴，粘贴时触发	(editor,event,callback)	PC	--

Methods

名称	说明	入参	返回	端	版本
getEditor	获取editor实例	--	{ instance:Object }	PC	--