再Form表单中如何使用富文本组件

Braft Editor

1.安装和使用:

# 使用npm安装
npm install braft-editor --save

# 使用yarn安装
yarn add braft-editor

2.使用:
编辑器支持value和onChange属性,这类似于React中原生的input组件。通常情况下,可以用典型的受控组件的形式来使用本编辑器:

import React from 'react'
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'

组件中先引入antd的form表单

      <Form
        form={form}

        labelAlign="left"
        name="idea"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        {...layout}
        initialValues={
  {
          ideaDetails: BraftEditor.createEditorState(modalValue.ideaIntroduction),
        }}
      >

        <Item label='想法详细' name='ideaDetails' rules={[{ required: true, message: '请输入想法详细!' }]}>
   
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是一个示例代码,演示了如何在 ExtJS 表单集成 layui 富文本编辑器: ``` Ext.define('MyApp.view.MyFormPanel', { extend: 'Ext.form.Panel', xtype: 'myformpanel', requires: [ 'Ext.form.field.Text', 'Ext.form.field.Checkbox', 'Ext.form.field.ComboBox', 'Ext.form.field.HtmlEditor', 'Ext.layout.container.Form' ], layout: 'form', items: [ { xtype: 'textfield', fieldLabel: 'Title', name: 'title', allowBlank: false }, { xtype: 'checkbox', fieldLabel: 'Is Active', name: 'isActive', inputValue: true }, { xtype: 'combobox', fieldLabel: 'Category', name: 'category', store: ['Category 1', 'Category 2', 'Category 3'] }, { xtype: 'htmleditor', fieldLabel: 'Content', name: 'content', enableColors: false, enableAlignments: false, enableFontSize: false, enableFont: false, enableLinks: false, enableLists: false, enableSourceEdit: false, listeners: { afterrender: function(editor) { layui.use('layedit', function(){ var layedit = layui.layedit; layedit.build(editor.getEl().down('iframe').dom, { tool: [ 'strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', 'link' ] }); }); } } } ] }); ``` 在上面的代码,我们使用了 ExtJS 的表单组件,并将 layui 的富文本编辑器集成到了 ExtJS 的表单。在 htmleditor 组件的 `afterrender` 事件,我们使用了 layui 的 `layedit.build` 方法来初始化 layui 富文本编辑器。我们可以通过配置 `tool` 属性来指定需要显示的工具栏按钮。 请注意,这只是一个示例代码,你需要根据自己的实际情况进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值