antddesignpro4富⽂本编辑器braft-editor 最近在使⽤antd design pro 4.0设计知识库版本管理
# 使⽤npm安装
npm install braft-editor --save
# 使⽤yarn安装
yarn add braft-editor
接下来看如何在react中使⽤：
import React, { useState } from 'react';
import { Button, notification, Card, Row, Col } from 'antd';
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
import 'braft-editor/dist/output.css'
import './style.less'
import HtmlDiff from 'htmldiff-js'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
const DpEditor: React.FC<{}> = () => {
const [editorState, setContent] = useState<any>(ateEditorState(null));
const [oldEditorState, setOldContent] = useState<any>(ateEditorState(null));
asp富文本编辑器const mediaValue = {
accepts: {
image: 'image/png,image/jpeg,image/gif,image/webp,image/apng,image/svg',
}
}
const onEditorChange = (newContent: any) => {
setContent(newContent);
};
const prompt = () => {
const htmlContent = HTML()
notification.open({
message: 'value:',
duration: 0,
description: <div className="braft-output-content" dangerouslySetInnerHTML={{ __html: htmlContent }} />
});
};
const submitContent = async () => {
// 在编辑器获得焦点时按下ctrl+s会执⾏此⽅法
// 编辑器内容提交到服务端之前，可直接调⽤HTML()来获取HTML格式的内容
const htmlContent = HTML()
setOldContent(editorState);
console.log('save', htmlContent)
}
return (
<PageHeaderWrapper title="新建⽂档">
<Card>
<BraftEditor value={editorState}
media={mediaValue}
onChange={onEditorChange}
onSave={submitContent}/>
<Button style={{marginTop: 16 }} onClick={prompt}>保存</Button>
<Button style={{marginTop: 16 }} onClick={prompt}>保存</Button>
<Row>
<Col span={12}>
<h1>历史版本</h1>
<div className="braft-output-content" dangerouslySetInnerHTML={{ __html: HTML() }} />
</Col>
<Col span={12}>
<h1>新数据</h1>
<div className="braft-output-content" dangerouslySetInnerHTML={{ __html: HTML(), HTML()) }} />          </Col>
</Row>
</Card>
</PageHeaderWrapper>
)
}
export default DpEditor;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。