富文本编辑器

HiRichText 是可视化在线HTML编辑器组件。

安装方式

yarn add pangea-ui

引用方式

import HiRichText from "pangea-ui/hi-rich-text";
import "pangea-ui/dist/style.css";

使用示例

<template>
  <HiRichText
    :v-model="value"
    :disabled="false"
    :options="options"
    lang="zh-CN"
    id="tinymce"
  />
</template>
<script lang="ts" setup>
import { ref } from "vue";
 
const value = ref("");
const options = {
    status: 'default',
    showMenubar: false,
    menubarConfig: [/* 菜单栏配置 */],
    showToolbar:true,
    toolbarConfig: [/* 工具栏配置 */],
    showStatusbar: true,
    domPath: true,
    allowResize: true,
    wordCount: true,
    width: '100%',
    height: 300,
}
</script>

Props

参数名	描述	类型	默认值	有效值
model-value (v-model)	绑定数据	string	-
disabled	是否禁用	boolean	false
options	编辑器配置	object	object:Options
lang	编辑器语言	string	'zh-CN'	'zh-CN'，'en-GB'
id	编辑器ID	string	'tinymce'

API

方法	参数	描述
reLoad	-	编辑器重载方法
setContent	value:string	编辑器设置内容方法

Options

参数名	描述	类型	默认值	有效值
status	编辑器状态	string	'default'	'default', 'hide', 'readonly'
showMenubar	是否显示菜单栏	boolean	false
menubarConfig	菜单栏配置	array	[]	menubarConfig
showToolbar	是否显示工具栏	boolean	true
toolbarConfig	工具栏配置	array	[]	toolbarConfig
showStatusbar	是否显示状态栏	boolean	true
domPath	元素路径	boolean	true
allowResize	允许编辑器大小拖动	boolean | string	true	true | false | 'both'
wordCount	字数统计	boolean	true
width	宽度	string | number | object: whObject	'100%'
height	高度	string | number | object: whObject	300

menubarConfig

配置选项
file 文件 | edit 编辑 | insert 插入 | view 视图 | format 格式 | table 表格 | tools 工具

toolbarConfig

配置选项
lineheight（行高） | bold（加粗） | italic（斜体） | underline（下划线）| strikethrough（删除线）
alignleft（左对齐） | aligncenter（居中对齐）| alignright（右对齐）| alignjustify（两端对齐）
styleselect（格式设置）| formatselect（段落格式） | fontselect（字体选择）|fontsizeselect（字号选择）
cut（剪切）| copy（复制）| paste（粘贴）| bullist（项目列表UL）| numlist（编号列表OL）| outdent（减少缩进）
indent（增加缩进）| blockquote（引用）| undo（撤销）| redo（重做/重复）
removeformat（清除格式）| subscript（下角标）| superscript（上角标）
image 插入图片 | media 插入视频 | link 插入链接 | table 插入表格| insertdateTime 插入日期时间
charmap 特殊符号 | fullscreen 全屏 | searchreplace 查找替换 | code 源码视图 | codesample 插入源码

whObject

参数名	描述	类型
value	值	string | number
unit	单位	string