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，待需求补充扩展