// 用法
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();
};