WetRichEditor 富文本编辑器

::: tip 基本介绍

本组件是对Quill的二次封装，Quill官方文档

组件引入：import { WetProCard } from '@wetspace/pro-components'

:::

基本使用

一般来说，使用该富文本编辑器

1. 写入值
2. 使用实例方法getContents，获取默认的JSON对象字符串( Delta 格式)，存入数据库（该值是必要存入数据库的，用于初始化编辑内容所需）
3. 按需获取内容的html字符串，使用实例方法getContents(true)

初始化编辑器值

设置initialValue属性即可，接受一个JSON对象字符串(Delta 格式)，格式如下

"{\"ops\":[{\"insert\":\"测试文本\"},{\"attributes\":{\"header\":1},\"insert\":\"\\n\"},{\"insert\":\"\\n一、代码示例\"},{\"attributes\":{\"header\":2},\"insert\":\"\\n\"},{\"insert\":\"\\n<template>\"},{\"attributes\":{\"code-block\":\"javascript\"},\"insert\":\"\\n\"},{\"insert\":\"    <WetRichEditor ref=\\\"richText\\\"></WetRichEditor>\"},{\"attributes\":{\"code-block\":\"javascript\"},\"insert\":\"\\n\"},{\"insert\":\"    <ElDivider></ElDivider>\"},{\"attributes\":{\"code-block\":\"javascript\"},\"insert\":\"\\n\"},{\"insert\":\"    <ElButton @click=\\\"getValue\\\">获取值</ElButton>\"},{\"attributes\":{\"code-block\":\"javascript\"},\"insert\":\"\\n\"},{\"insert\":\"</template>\"},{\"attributes\":{\"code-block\":\"javascript\"},\"insert\":\"\\n\"},{\"insert\":\"<script setup lang=\\\"ts\\\">\"},{\"attributes\":{\"code-block\":\"javascript\"},\"insert\":\"\\n\"},{\"insert\":\"import { WetRichEditor } from '../../index'\"},{\"attributes\":{\"code-block\":\"javascript\"},\"insert\":\"\\n\"},{\"insert\":\"import type { WetRichEditorInstance } from '../../index'\"},{\"attributes\":{\"code-block\":\"javascript\"},\"insert\":\"\\n\"},{\"insert\":\"import { ElDivider,ElButton } from 'element-plus'\"},{\"attributes\":{\"code-block\":\"javascript\"},\"insert\":\"\\n\"},{\"insert\":\"import { shallowRef } from 'vue'\"},{\"attributes\":{\"code-block\":\"javascript\"},\"insert\":\"\\n\\n\"},{\"insert\":\"const richText = shallowRef<WetRichEditorInstance>()\"},{\"attributes\":{\"code-block\":\"javascript\"},\"insert\":\"\\n\"},{\"insert\":\"const getValue = ()=>{\"},{\"attributes\":{\"code-block\":\"javascript\"},\"insert\":\"\\n\"},{\"insert\":\"   const res =  richText.value?.getContents()\"},{\"attributes\":{\"code-block\":\"javascript\"},\"insert\":\"\\n\"},{\"insert\":\"   console.log(JSON.stringify(res),'值')\"},{\"attributes\":{\"code-block\":\"javascript\"},\"insert\":\"\\n\"},{\"insert\":\"}\"},{\"attributes\":{\"code-block\":\"javascript\"},\"insert\":\"\\n\"},{\"insert\":\"</script>\"},{\"attributes\":{\"code-block\":\"javascript\"},\"insert\":\"\\n\"},{\"insert\":\"\\n\"},{\"insert\":{\"image\":\"data:image/png;base64,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\"}},{\"insert\":\"\\n\\n这就是基本情况了\\n\"},{\"attributes\":{\"color\":\"#3c3c43\"},\"insert\":\"本组件是对\"},{\"attributes\":{\"color\":\"var(--vp-c-tip-1)\",\"background\":\"var(--vp-custom-block-tip-code-bg)\",\"code\":true},\"insert\":\"Quill\"},{\"attributes\":{\"color\":\"#3c3c43\"},\"insert\":\"的二次封装，\"},{\"attributes\":{\"link\":\"https://quilljs.com/docs/quickstart\",\"color\":\"var(--vp-c-tip-1)\",\"underline\":true},\"insert\":\"Quill官方文档\"},{\"insert\":\"\\n\"},{\"attributes\":{\"color\":\"#3c3c43\",\"bold\":true},\"insert\":\"组件引入：\"},{\"attributes\":{\"code\":true},\"insert\":\"import { WetProCard } from '@wetspace/pro-components'\"},{\"insert\":\"\\n\\n\"}]}"

获取值

本组件获取值使用的是实例上的getContents方法，方法接受一个boolean值，默认为fasle，获取的是ops,JSON对象字符串(Delta 格式)，类似下面这样，设置为true，获取的则是编辑器内的html字符串

帮组页面

属性

|属性| 描述| 类型| 默许值| |---|-----|-----|-------| |initialValue|初始化值(Delta 格式) |string|-| |imageHttpRequest|图片上传函数，返回一个Promise<string>,字符串是图片上传后生产的url地址|(options:UploadRequestOptions) => Promise<string>|-| |showToolsbar|显示工具栏|Boolean|true| |readOnly|只读模式|Boolean|false|

类型参考

import type { UploadRequestOptions } from 'element-plus'
export type WetRichTextProvide = {
    quill:ShallowRef<Quill>,
    httpRequest:ComputedRef<(options:UploadRequestOptions)=>Promise<string>>
}