lcap-wang-editor

0.1.6 • Public • Published

LcapWangEditor 富文本

Form

请在这里添加描述

示例

基本用法

<lcap-wang-editor value="<p>hello</p><img src='https://p3-passport.byteimg.com/img/user-avatar/834687b5e4137f4d998a95be7330f543~180x180.awebp'>"></lcap-wang-editor>

自定义上传地址

<lcap-wang-editor value="<p>hello</p><img src='https://p3-passport.byteimg.com/img/user-avatar/834687b5e4137f4d998a95be7330f543~180x180.awebp'" uploadImgServer="/upload/test"></lcap-wang-editor>

只读模式

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

<template>
    <div>
        <lcap-wang-editor :readOnly="readOnly" value="<p>hello</p><img src='https://p3-passport.byteimg.com/img/user-avatar/834687b5e4137f4d998a95be7330f543~180x180.awebp'>"></lcap-wang-editor>
        <u-button @click="handleReadOnly">切换</u-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            readOnly: true
        }
    },
    methods:{
        handleReadOnly() {
            this.readOnly = !this.readOnly;
        },
    }
}
</script>

表单验证

<template>
<u-form ref="form" gap="large">
    <u-form-item :required="true" layout="block" rules="required" label="业务口径">
        <lcap-wang-editor :value.sync="value" :editorStyle="editorStyle"></lcap-wang-editor>
    </u-form-item>
    <u-form-item layout="block">
        <u-button @click="onClick">验证</u-button>
    </u-form-item>
</u-form>
</template>

<script>
export default {
    data() {
        return {
            value: '',
            editorStyle: 'height: 300px',
        }
    },
    mounted() {
        setTimeout(() => {
            this.value = '我有内容了';
        }, 1000);
    },
    methods: {
        async onClick() {
            const valid = await this.$refs.form.validate();
        },
    },
}
</script>

API

Props/Attrs

Prop/Attr Type Options Default Description
value.sync string '' 需要传入的文本内容
readOnly boolean false 启用只读模式
scroll boolean true 启用滚动
placeholder string '' 输入提示
editorStyle string '' 编辑器样式CSS
uploadImgServer string '' 上传图片地址

Events

@change

内容修改时触发

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

@input

输入时触发

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

Readme

Keywords

Package Sidebar

Install

npm i lcap-wang-editor

Weekly Downloads

2

Version

0.1.6

License

MIT

Unpacked Size

4.33 MB

Total Files

17

Last publish

Collaborators

  • lip966
  • xgjcode
  • clockmorning
  • zanning