Taro Editor组件用法以及一些常见问题汇总

// 用法
import {Editor} from '@tarojs/components';

<Editor
    readOnly={params.durationType == 'CONSUME'}
    id="editor"
    onInput={handleInputChange}
    onReady={editorReady}
    placeholder="点击输入文案内容"
/>

// css
> editor {
    width: 100%;
    height: initial;
    line-height: 1.3;
    color: white;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-line;
}

let editorCtx = '';

const editorReady = e => {
    Taro.createSelectorQuery()
        .select('#editor')
        .context(res => {
            editorCtx = res.context;
            editorCtx && editorCtx.setContents({html: contentHTML});
        })
        .exec();
};

const handleInputChange = e => {
    const {text, html} = e.detail;
    if (text && text.length > 5000) {
        showToast('manuscript-edit', 'fail', '最多只能输入5000个字');
        editorCtx && editorCtx.setContents({html: contentHTML}).exec();
        return;
    }

    setContent(text);
    setContentHTML(html);

    userStore.contentModify = true;
    userStore.manuscriptState = {
        ...params,
        name,
        content: text
    };
};

// 富文本内容全删除后长度默认为1， 输出显示存在回车键符号
const handleInputChange = e => {
    const {text, html} = e.detail;
    setValue(text.trim()); // 使用trim方法处理 
};

// 设置内容后如何移除焦点
const handleDetect = e => {
    Taro.createSelectorQuery()
        .select('#editor')
        .context(res => {
            editorCtx = res.context;
            editorCtx && editorCtx.setContents({html: contentHTML});
            editorCtx && editorCtx.blur(); // 移除焦点
        })
        .exec();
};