富文本组件

本文中使用的组件是对wangeditor (opens new window)开源富文本组件的二次封装

示例

<template>
<div>
    <form-create :rule="rule" v-model="fApi" :option="options" :value.sync="value"/>
</div>
</template>

<script>
    export default {
        data(){
            return {
                fApi:{},
                value:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    }
                },
                rule:[
                //{
                //    type:'editor',
                //    field:'editor',
                //    title:'editor',
                //    value:'<b>@form-create/component-wangeditor</b>',
                //}
                ]
            }
            
        },
        mounted(){
            this.rule.push({
                       type:'editor',
                       field:'editor',
                       title:'editor',
                       value:'<b>@form-create/component-wangeditor</b>',
                   })
        }
    }
</script>

安装

Node

npm install @form-create/component-wangeditor

浏览器

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

导入

Node

import FcEditor from "@form-create/component-wangeditor";

浏览器

var FcEditor = window.FcEditor;

挂载

Vue.component('editor', FcEditor);
//或者
formCreate.component('editor', FcEditor);

生成

fApi = formCreate.create([
    {
       type:'editor',
       field:'editor',
       title:'editor',
       value:'<b>@form-create/component-wangeditor</b>',
       props:{
           init(editor){
               //todo 初始化
           }
       }   
    }
])

配置

props

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