Editor component

The component used in this paper is the secondary encapsulation of the wangeditor (opens new window) open source rich text component

Examples

<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>

Install

Node

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

Browser

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

Import

Node

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

浏览器

var FcEditor = window.FcEditor;

mount

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

Generate

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

Configure

props

property	Type	Direction
v-model/value	string	content
init	Function	Initialize wangeditor
disabled	boolean	Disable component