lcap-rich-text-editor v1.3.12

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

Slots

(default)

插入文本或 HTML。

Events

@change

内容修改时触发

@input

输入时触发