# 富文本组件

本文中使用的组件是对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@^2.5

浏览器

<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	禁用富文本组件

← 上传组件 VantUI →