富文本编辑器 Richtext

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

基础用法

基础用法

基础的富文本编辑器使用

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

菜单模式

全菜单模式

全菜单模式支持展示所有的内置菜单功能

<title>全菜单模式</title>
<describe>全菜单模式支持展示所有的内置菜单功能</describe>
<template>
    <hc-richtext
        v-model="input"
        menus="all"
        placeholder="请输入内容"
        height="200px"
        @change="handleChange">
    </hc-richtext>
</template>
<script>
export default {
    data: function () {
      return {
        input: ''
      }
    },
    methods:{
      handleChange: function(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: function () {
      return {
        input: ''
      }
    }
}
</script>

只读状态

查看状态

富文本查看状态

<title>查看状态</title>
<describe>富文本查看状态</describe>
<template>
    <hc-richtext
        v-model="input"
        :viewable="true">
    </hc-richtext>
</template>
<script>
export default {
    data: function() {
      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%
menus	菜单配置	string	simple/all	simple

HcRichtext事件

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

• 基础用法
• 菜单模式
• 禁用状态
• 只读状态
• 属性及事件
  • HcRichtext属性
  • HcRichtext事件

登录