lcap-rich-text-editor

LcapRichTextEditor 富文本编辑器

• 示例
  • 基本用法
  • 只读模式
  • 可选功能
• API
  • Props/Attrs
  • Slots
  • Events

Editor

基于第三方富文本插件Quill Editor进行封装

示例

基本用法

通过双向绑定输入内容

<template>
<div>
<lcap-rich-text-editor :value.sync="tip" :formula="true" style="margin-bottom: 10px;"></lcap-rich-text-editor>
<lcap-rich-text-editor :value.sync="tip" :readOnly="bool"></lcap-rich-text-editor>
</div>
</template>

<script>
export default {
    data() {
        return {
            tip: "测试内容",
            bool: true
        }
    }
}
</script>

输入提示

<template>
<div>
<u-input v-model="tip" placeholder="请输入" style="margin-bottom: 10px;"></u-input>
<lcap-rich-text-editor :placeholder="tip"></lcap-rich-text-editor>
</div>
</template>

<script>
export default {
    data() {
        return {
            tip: ""
        }
    }
}
</script>

只读模式

只读模式可以作为富文本编辑器的内容展示区，默认隐藏工具栏，通过readOnly设置

<template>
<div>
    <u-switch v-model="switchToggle" style="margin-bottom: 10px;">Switch</u-switch>
    <lcap-rich-text-editor :readOnly="switchToggle"></lcap-rich-text-editor>
</div>
</template>

<script>
export default {
    data() {
        return {
            switchToggle: false
        }
    }
}
</script>

可选功能

给formula设置true可以开启公式输入功能, 给textSub设置true可以开启文本下标功能, 给textSuper设置true可以开启文本上标功能

<template>
<div>
    <div style="margin-bottom: 10px;">
        <u-switch v-model="showFormula">Switch</u-switch>
        <u-switch v-model="showTextSub">Switch</u-switch>
        <u-switch v-model="showTextSuper">Switch</u-switch>
    </div>
    <lcap-rich-text-editor :formula="showFormula" :textSub="showTextSub" :textSuper="showTextSuper"></lcap-rich-text-editor>
</div>
</template>

<script>
export default {
    data() {
        return {
            showFormula: true,
            showTextSub: true,
            showTextSuper: true
        }
    }
}
</script>

API

Props/Attrs

Prop/Attr	Type	Options	Default	Description
value.sync	string		''	需要传入的文本内容
readOnly	boolean		false	启用只读模式
textSub	boolean		false	启用文本下标工具
textSuper	boolean		false	启用文本上标工具
formula	boolean		false	启用公式输入工具
disablescroll	boolean		false	禁用滚动
placeholder	string		''	输入提示
imgUploadUrl	string		'/gateway/lowcode/api/v1/app/upload'	请填入上传图片的接口路径

Slots

(default)

插入文本或 HTML。

Events

@change

内容修改时触发

Param	Type	Description
$event.value	string	当前输入区域的内容

@input

输入时触发

Param	Type	Description
$event	string	当前输入区域的内容