# 富文本编辑器 Richtext

可内嵌于浏览器,所见即所得的文本编辑器

# 基础用法

基础用法

基础的富文本编辑器使用

<title>基础用法</title>
<describe>基础的富文本编辑器使用</describe>
<template>
    <hc-richtext
        v-model="input"
        placeholder="请输入内容"
        height="200px"
        @change="handleChange">
    </hc-richtext>
</template>
<script>
export default {
    data () {
      return {
        input: ''
      }
    },
    methods:{
      handleChange(e){
        console.log(e)
      }
    }
}
</script>

# 禁用状态

禁用状态

富文本禁用状态

<title>禁用状态</title>
<describe>富文本禁用状态</describe>
<template>
    <hc-richtext
        v-model="input"
        height="200px"
        placeholder="请编辑内容"
        :disabled="true">
    </hc-richtext>
</template>
<script>
export default {
    data () {
      return {
        input: ''
      }
    }
}
</script>

# 只读状态

查看状态

富文本查看状态

<title>查看状态</title>
<describe>富文本查看状态</describe>
<template>
    <hc-richtext
        v-model="input"
        :viewable="true">
    </hc-richtext>
</template>
<script>
export default {
    data () {
      return {
        input: '富文本查看状态'
      }
    }
}
</script>

# 属性及事件

# HcRichtext属性

参数 说明 类型 可选值 默认值
v-model 当前输入内容 string -- --
placeholder 输入框占位文本 string -- --
disabled 是否禁用 boolean -- false
viewable 是否查看状态 boolean -- false
default-fontsize 默认字号 string -- 12px
height 高度 string -- auto
width 宽度 string -- 100%

# HcRichtext事件

名称 说明 参数
change 触发条件:输入完成(输入框失去焦点,tab键) {value: 值}