cv-editor-quill 富文本编辑器 ¶

简要 ¶

富文本编辑器，一般和表单配合使用，默认为实心白色背景。

示例 ¶

vue

<template>
  <view class="content">
    <view class="components-title">
      <view class="components-title-t">cv-editor-quill</view>
      <view class="components-title-d">富文本</view>
    </view>
    <view></view>
    <cv-form-base ref="refFormBase" :rules="formRules" :model="formData">
      <cv-form-item label="富文本剪辑器" labelPosition="top" labelWidth="120">
        <cv-editor-quill label="" v-model="formData.editor" :upload="upload" />
        <template v-slot:tip>这是一个强大的富文本编辑器哦</template>
      </cv-form-item>
    </cv-form-base>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formRules: {},
      formData: {
        editor: '这个是测试'
      },
      upload: {
        connectionCount: 9
      }
    };
  },
  onLoad() {
    setTimeout(() => {
      this.$testReqMock().then((res) => {
        this.formData.editor = '<p><u></u><strong><u></u>加粗的<em> 斜体的 下划线</em></strong>默认值12312加粗的</p>';
      });
      console.log('模拟请求数据', this.formData);
    }, 1000);
  },
  watch: {
    'formData.editor'(newVal) {
      console.log(newVal);
    }
  },
  methods: {
    bindTimeChange(e) {},
    clickTest(e) {
      console.log(this.formData.checkboxtag);
    }
  }
};
</script>

vue

<template>
  <view>
    <cv-editor-quill label="详情" v-model="formData.editor" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        editor: '',
      },
    };
  },
  methods: {
  }
}
</script>

平台差异 ¶

App	H5	微信小程序	支付宝小程序	百度小程序	字节跳动小程序	QQ小程序
2.0+，app-vue	2.4.5+	基础库 2.7.0+	x	x	x	x

属性 ¶

属性名	类型	默认值	说明
v-model	String	-	数据双向绑定
placeholder	String	-	占位符
upload	Object	-	图片上传配置

{upload} 说明 ¶

upload.key	类型	默认值	说明
url	String	-	图片上传的接口地址
params	Object	-	提交接口额外携带参数（formData）
fileKey	String	-	服务器端获取文件数据的参数名
connectionCount	Number	1	最大选择图片数量
leaveConfirm	String	'正在上传文件'	上传图片等待显示内容
quality	Number	80	压缩质量，范围0～100，数值越小，质量越低，压缩率越高
maxSize	Number	1080	压缩后的最大尺寸

{upload.url} 接口返回参数 ¶

属性名	类型	说明
error	number	错误代码，0 表示成功