Linkdood-editor NPM

linkdood-editor

目的

替换uditor，既uditor异步加载文件方式，UI渲染慢，与异步加载css导致工具栏滑动不宜复现滚动问题

描述

基于tiptap开发一套适用于豆豆后台需求富文本编辑器，icon使用remixicon，主题偏向Antd现代、简洁风格，支持段落、附件、图片、视频(上传、拖拽)，可扩展富文本编辑器

目录介绍：

启动：npm run dev 打包：npm run build examples：本地测试页面 src：核心项目文件夹 components: 富文本内部使用公用组件 editor: 富文本内容 bubble: 富文本气泡菜单 constant: 常量 css: 样式 data: 数据源 extend: tiptap源生重写 extension: tiptap扩展 footer: 底部dom global: 全局hook locales: 国际化 source-code: 查看源代码实现 toolbars: 顶部工具栏 utils：工具类

使用

使用富文本

npm i -S linkdood-editor

import VEditor,{editorHtmlConvert} from 'linkdood-editor-alpha';

<v-editor
    v-model:content="content"
/>

注：

为video方便拖拽，拖拽触发播放问题，生成html为 
<video src="" /> 

非标准浏览器解析 
<video>
	<resource src="" />
</video>

保存时需要额外调用editorHtmlConvert(content) 转换content中video中内容

预览

@import "/node_modules/linkdood-editor/dist/css/index.css";

<div class="ldd-editor-preview" v-html="content"/>

API

属性	描述	类型	默认值
content（v-model）	富文本内容	stirng	‘’
loading	是否加载中	boolean	false
disabled	是否禁用	boolean	false
modalMaskClosable	弹框点击框蒙层是否允许关闭	boolean	false
contentHeight	内容高度(超出显示滚动条)	number	0
contentMaxLength	内容最大长度(包含html标签)-字节	number	0
locales	国际化可，选值为 `zh`、`en`	string	zh
attachmentAccept	附件文件类型	string	''
imageAccept	图片文件类型	string	.png,.jpg,.jpeg
videoAccept	视频文件类型	string	.mp4
upload	上传接口	(file, type{attachment\|image\|video}) => promise.resolve(url)	Promise.resolve('')
uploadValidate	上传校验	(file, type{attachment\|image\|video}) => boolean	true
toolbars	自定义工具栏	array	'html', '\|','retreat'....
toolbarsExtend	工具栏扩展	{key1: {title,icon,click,iconClass,disabled}}	object

工具栏

名称	描述
html	源代码
retreat	后退
forward	前进
bold	加粗
ltalic	斜体
underLine	下划线
deleteLine	删除线
superscript	上标
subscript	下标
clearFormat	清除格式
textSizeMagnify	字体放大
textSizeShrink	字体缩小
fontColor	字体颜色
fontBack	背景色
orderedList	有序列表
bulletList	无序列表
marginTop	段前句
marginBottom	段后句
lineHeight	行间距
paragraph	段落
family	字体
fontSize	字号
textIndent	首行缩进
textAlignLeft	居左对齐
textAlignCenter	居中对齐
textAlignRight	居中对齐
textAlignJustify	两端对齐
link	超链接
code	代码块
date	日期
time	时间
table	插入表格
tableAddRowBefore	前插入行
tableAddRowAfter	后插入行
tableDeleteRow	删除行
tableAddColBefore	前插入列
tableAddColAfter	后插入列
tableDeleteCol	删除列
tableMerge	合并
tableSplit	拆分
attachment	附件上传
image	网络或上传图片
video	网络或上传视频
fullScreen	全屏

自定义富文本总评

基于tiptap二次开发，受tiptap本身优缺点影响优点： 1.UI层自定义扩展新功能方便 2.提供直量操作符文本API 3.轻量 4.插件相对丰富

缺点： 1.基于ProseMirror，为定制，非常规w3c标准，学习曲线陡 2.文档不详细，需要自己探索或尝试

本次2次封装富文本，仅提供项目上需求内容，非完整性富文本编辑器API，待需求补充扩展