您好!brilliant是我调研期间观感最好的富文本组件,感谢您对社区的贡献!
但有个问题困惑了我,我期望组件能形成html字符串的value/onChange数据流,于是尝试了2种方法:
1)通过draft-js-export-html
和draft-js-import-html
进行出入值的转换:
import 'brilliant-editor/dist/index.css';
import './index.scss';
import Brilliant from 'brilliant-editor';
import { EditorState } from 'draft-js';
import { stateToHTML } from 'draft-js-export-html';
import { stateFromHTML } from 'draft-js-import-html';
import _get from 'lodash/get';
import meta from 'meta';
import React from 'react';
import axiosInstance from 'remote/axios';
export interface IMarkdownEditorProps {
value?: string;
onChange?: (value?: string) => void;
}
export async function upload(file: FormData) {
const fileData = file.get('file') as File;
const { name, size, type, lastModified } = fileData;
const data: any = await axiosInstance.post('/crm/file/upload', file);
return {
id: lastModified + '',
name,
type,
size,
url: `${meta.staticRootPath}${data.path}`,
};
}
export default function MarkdownEditor(props: IMarkdownEditorProps) {
const { value: propsValue = '', onChange } = props;
const [value, setValue] = React.useState(EditorState.createEmpty());
React.useEffect(() => {
setValue(EditorState.createWithContent(stateFromHTML(propsValue)))
}, [propsValue]);
function onEditorChange(editorState: EditorState) {
onChange && onChange(stateToHTML(editorState.getCurrentContent()));
}
return (
<Brilliant
imgControls
language="zh"
value={value}
onEditorChange={onEditorChange}
handleImgUpload={upload}
disableFloatControls
/>
);
}
2)通过html-to-draftjs
和draftjs-to-html
进行出入值的转换:
import 'brilliant-editor/dist/index.css';
import './index.scss';
import Brilliant from 'brilliant-editor';
import { ContentState, convertToRaw, EditorState } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import _get from 'lodash/get';
import meta from 'meta';
import React from 'react';
import axiosInstance from 'remote/axios';
export interface IMarkdownEditorProps {
value?: string;
onChange?: (value?: string) => void;
}
export async function upload(file: FormData) {
const fileData = file.get('file') as File;
const { name, size, type, lastModified } = fileData;
const data: any = await axiosInstance.post('/crm/file/upload', file);
return {
id: lastModified + '',
name,
type,
size,
url: `${meta.staticRootPath}${data.path}`,
};
}
export default function MarkdownEditor(props: IMarkdownEditorProps) {
const { value: propsValue = '', onChange } = props;
const [value, setValue] = React.useState(EditorState.createEmpty());
React.useEffect(() => {
const blocksFromHtml = htmlToDraft(propsValue);
const { contentBlocks, entityMap } = blocksFromHtml;
const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
const editorState = EditorState.createWithContent(contentState);
setValue(editorState);
}, [propsValue]);
function onEditorChange(editorState: EditorState) {
const rawContentState = convertToRaw(editorState.getCurrentContent());
const markup = draftToHtml(
rawContentState,
// hashtagConfig,
// directional,
// customEntityTransform
);
onChange && onChange(markup);
}
return (
<Brilliant
imgControls
language="zh"
value={value}
onEditorChange={onEditorChange}
handleImgUpload={upload}
disableFloatControls
/>
);
}
均无法实现初始的html字符串的设置。
期待您的回复。