富文本组件

本文介绍如何在 FormCreate 中集成和使用经过二次封装的开源富文本组件 wangeditor。通过这篇指南，您将了解如何安装、配置、生成和在不同业务场景中使用富文本组件。

示例

下图展示了一个简单的富文本编辑器的示例：

安装

您可以通过以下方式安装富文本组件：

Node 环境

npm install @form-create/component-wangeditor^3

浏览器环境

<script src="https://cdn.jsdelivr.net/npm/@form-create/component-wangeditor@^3/dist/index.js"></script>

导入并挂载组件

Node 环境

import FcEditor from "@form-create/component-wangeditor";
Vue.component('fcEditor', FcEditor);
// 或者局部挂载
formCreate.component('fcEditor', FcEditor);

浏览器环境

var FcEditor = window.FcEditor;
Vue.component('fcEditor', FcEditor);
// 或者局部挂载
formCreate.component('fcEditor', FcEditor);

生成富文本组件

在表单中使用富文本组件非常简单。以下是一个生成富文本组件的示例：

 {
    type: 'fcEditor',
    field: 'editor',
    title: '富文本编辑器',
    value: '<b>@form-create/component-wangeditor</b>',
    props: {
      init(editor) {
          // 初始化时的回调
          console.log('Editor initialized', editor);
      },
      config: {
          placeholder: '请输入内容...',
              height: 300
      },
      disabled: false
    }
}

配置

属性	类型	说明
v-model	string	富文本内容
init	Function	初始化 wangEditor
config	object	设置wangEditor组件的config
disabled	boolean	禁用富文本组件

自定义配置与插件扩展

富文本组件支持高度自定义的配置和插件扩展。您可以通过 config 属性自定义工具栏、格式选项等：

{
    type: 'fcEditor',
    field: 'customEditor',
    title: '自定义富文本编辑器',
    props: {
      config: {
        menus: ['head', 'bold', 'italic', 'underline', 'link', 'list', 'image'],
        uploadImgServer: '/api/uploadImage'
      }
    }
}

在此示例中，我们自定义了富文本编辑器的工具栏，并设置了图片上传服务器。