富文本编辑器

使用方式

Preview

查看代码

html

  <a-card title="富文本示例">
  <a-form :model="objForm" :labelCol="{xs:24,sm:4,lg:4}" :wrapperCol="{xs:24,sm:18,lg:16}">
    <a-form-item label="富文本" v-bind="validateInfos.oContent">
      <n-ueditor v-model:value="objForm.oContent"></n-ueditor>
    </a-form-item>
  </a-form>
  <a-row>
    <a-col :lg="{offset:4}" :xs="{offset:0}" :sm="{offset:8}">
      <a-button type="primary" @click="submitFun()">提交</a-button>
    </a-col>
  </a-row>
</a-card>

import {reactive, toRefs} from "vue";
import {Form} from "ant-design-vue";

export default {

  setup() {
    const formConf = reactive({
      // 表单对应的字段名
      objForm: {
        oContent: "",
      },
      // 校验规则
      rules: {
        oContent: [{required: true, message: '请输入'}]
      },
      submitFun: function () {
        console.log(formConf.objForm.oContent, 'oContent')
        validate().then(() => {

        }).catch((err) => {
          console.log(err)
        })
      },
    })
    const useForm = Form.useForm;
    let {validate, validateInfos} = useForm(formConf.objForm, formConf.rules, {
      onValidate: (...args) => {
      }
    })

    return {
      ...toRefs(formConf),
      validateInfos: validateInfos,
    }
  }
}

props

props	类型	默认值	备注
mode	String	`all`	`all` - 全部模式(全部基础功能) ， `extend` - 扩展模式（仅支持自定义扩展功能）
size	String	`default`	`default` - 默认， `min` - 小
value	String	无	（v-model:value）富文本内容
placeholder	String	'请输入内容...'	为空时提示
maxLength	Number	不限制	最大字数
customExtend	Object	{}	自定义扩展
isInsert	Boolean	false	是否使用插入功能扩展
customColorMode	String	'push'	自定义颜色插入的方式，`push` - 追加，`replace` - 替换
customColors	Array	[]	自定义的颜色列表，例如：['rgb(210, 134, 25)', 'rgb(99, 109, 116)']

富文本编辑器 ​

使用方式 ​

props ​

富文本编辑器

使用方式

props