antd - 表单中集成富文本编辑功能【BraftEditor】

最新推荐文章于 2024-08-16 09:12:20 发布

__Zoe__

最新推荐文章于 2024-08-16 09:12:20 发布

阅读量4.8k

点赞数 1

分类专栏： React

本文链接：https://blog.csdn.net/qq_24917475/article/details/107819971

版权

本文介绍了如何在antd表单中集成富文本编辑器BraftEditor，包括安装步骤、组件引用和整体代码展示，提供了一种实现富文本编辑功能的方法。

摘要由CSDN通过智能技术生成

先展示效果图：
在这里插入图片描述

实现步骤：

首先安装 braft-editor
npm install --save braft-editor
完成安装后就可以引用 braft-editor和css
import BraftEditor from ‘braft-editor’;
import ‘braft-editor/dist/index.css’;
组件里的应用

// 第一步
const controls = [
    'undo', 'redo', 'separator',
    'font-size', 'line-height', 'letter-spacing', 'separator',
    'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator',
    'superscript', 'subscript', 'remove-styles', 'emoji',  'separator', 'text-indent', 'text-align', 'separator',
    'headings', 'list-ul', 'list-ol', 'blockquote', 'code', 'separator',
    'link', 'separator', 'hr', 'separator',
    'media', 'separator',
    'clear'
];

// 第二步（return）
<FormItem label="文章正文">
	{
   getFieldDecorator('content', {
   
	  validateTrigger: 'onBlur',
	  rules: [{
   
	    required: true,
	    validator: (_, value, callback) => {
   
	      if (value.isEmpty()) {
   
	        callback('请输入正文内容')
	      } else {
   
	        callback()
	      }
	    }
	  }],
	})(
	  <BraftEditor
	    className="my-editor"
	    controls={
   controls}
	    placeholder="请输入正文内容"
	  />
	)}
</FormItem>

/**
  * 第三步
  * 在验证表单或整理数据时，对该字段内容进行转换
  * value.toHTML(); 或 value.toRAW();
  */
handleSubmit = (event) => {
   
  event.preventDefault()
  this.props.form.validateFields((error, values) => {
   
    if (!error) {
   
      const submitData = {
   
        title: values.title,
        content: values.content.toRAW() // or values.content.toHTML()
      }
      console.log(submitData)
    }
  })
}

// 以下是针对自己的个人项目所需
// 查看详情里的展示 value = data[field.key];
const html = {
    __html: data[field.key] };
return (
   <pre>
     <div className={
   styles.braftWrapper} dangerouslySetInnerHTML={
   html}></div>
   </pre>
 );
// index.less
.braftWrapper {
   
  white-space