orient-draft-x

draft 富文本编辑器,基于插件开发

Usage no npm install needed!

<script type="module">
  import orientDraftX from 'https://cdn.skypack.dev/orient-draft-x';
</script>

README

install

npm install orient-darft-x
// or
yarn add orient-draft-x

richEditor

npm install

npm run build:all

npm link

cd example/richEditor

npm install

npm link orient-draft-x

npm run start

coverToHtml

const draftX = require('orient-draft-x');
/* DraftEdiotr#getRaw => json */
const html = draftX.toHtml(json);

注: json 可以通过 DraftEdiotr 实例下的 getRaw 获取,使用官方提供的 convertToRaw 会有部分数据的缺失。

示例

代码

cd example/richEditor

组件必须传入 plugin (使用的插件),editorState (初始的 EditorState 对象),onChange (当编辑器内容发生变化时的执行函数)。

<DraftEdiotr
  plugin={plugin}
  editorState={editorState}
  onChange={editorState => this.onChange(editorState)}
  placeholder="start you story"
  ref={this.editor}
/>

editorState

orient-draft-x 下的 EditorState 类创建,一般为 EditorState.createEmpty()

import {EditorState} from "orient-draft-x";

// ...
this.state = {
  editorState: EditorState.createEmpty()
};
// ...

onChange

onChange(editorState) {
  this.setState(() => ({
    editorState
  }));
}

plugin

传入的插件格式如下:

{
    imagePlugin: new imagePlugin(),
    audioPlugin: new audioPlugin(),
    ...
}

orient-draft-x 不会要求使用者提供一个具体的 option 去构建一个富文本编辑器,所有的效果都插件化,因此 orient-draft-x 也不会关注任何的 ui 实现,仅仅是在需要实现效果时调用一下相关插件的 toggle 方法即可,至于在哪里触发调用,插件并不关心,也无须关心。

插件的使用

插件提供了一个 toggle 的方法,用于使用,根据插件的类型参数的传入有所不同。

触发插件的 toggle 方法,即可修改编辑器中的内容。

插件不提供任何的 ui 表现,仅仅关注于富文本中内容的实现逻辑。

目前默认提供了以下作用的插件:

注: # 前表示对于插件的实例,# 后表示实例的方法。

atomic 多媒体插件

Image/Audio/Vedio 实现了为编辑区添加多媒体的功能。

Image#toggle({
  src: 'media source' // 资源地址
});
Audio#toggle({
  src: 'media source' // 资源地址
});
Vedio#toggle({
  src: 'media source' // 资源地址
});

其中图片插件支持设置或修改图片的数据,视频和音频插件还不支持。

Image#replaceData({
    src:'',    // 资源地址
    width: 300 // 图片大小
})

Align 对齐方式

规定光标选中的段落的文字对其方式

3 种对其方式:align-left/align-center/align-right,在 toggle 中传入相应属性即可。

Align#toggle('align-left'); // 切换对其方式,相同参数调用两次即取消
Align#getType();            // 获取段落文字对其方式
Align#map();                // 等效于 ['align-left','align-center','align-right'].map(),用于快速生成按钮

Float 浮动

规定光标选中的块级区域的浮动方式

3 种浮动:float-left/float-none/float-right,在 toggle 中传入相应属性即可。

Float#toggle('float-left'); // 切换浮动状态,相同参数调用两次即取消
Float#getType();            // 获取块级区域的浮动状态
Float#map();                // 等效于 ['align-left','align-center','align-right'].map(),用于快速生成按钮

BaseBI 块级区域的层级

仅仅支持在列表元素上使用,效果为 li 往里缩进。

效果分为缩进和前进:indent/outdent

BaseBI#toggle('indent');    // li 往里缩进一格
BaseBI#toggle('outdent');   // li 往里前进一格

BaseBT 定义基本的段落呈现

BaseBT 为基础的块级呈现,支持 11 中效果。分别为:Normal/H1/H2/H3/H4/H5/H6/Blockquote/UL/OL/Code

BaseBT#constructor(['H1', 'H2', 'H3', 'H4']); // 参数为 11 中效果的集合数组
BaseBT#toggle('H1');                          // 将段落应用特定样式
BaseBT#getType();                             // 用于获取段落类型,类型为实例化时传入的数组中的一个或为空
BaseBT#map();                                 // 等效于 ['H1','H2','H3','H4'].map(),用于快速生成按钮

CustomBT 自定义段落呈现

首先,需要自定义段落的类名,如下

.Rich-desc {
  font-size: 14px;
  color: #333333;
  letter-spacing: -0.28px;
  line-height: 20px;
}
.Rich-other {
  font-size: 28px;
  color: #666666;
  line-height: 40px;
}

接着使用插件

CustomBT#constructor(['Rich-desc', 'Rich-other']);  // 参数为定义好的类名数组
CustomBT#toggle('Rich-desc');                       // 将段落应用特定样式
CustomBT#getType();                                 // 用于获取段落类型,类型为实例化时传入的数组中的一个或为空
CustomBT#map();                                     // 等效于 ['Rich-desc', 'Rich-other'].map(),用于快速生成按钮

control 一些控制类插件

InsertText#toggle('some text');  // 在光标处添加文字
Undo#toggle();                   // 取消一步操作
Redo#toggle();                   // 撤回取消操作

Regex 正则

用于匹配文字内特定格式的文字内容,该插件没有 toggle 方法,当文本区域内出现特定格式的文本时,就会生效。

Regex#constructor(/@[\w]+/g, {
  color: 'red'
});                              // 匹配 @xxx 并将文字标红

构造函数的第二个参数,就是一组 css 样式,当匹配到文字时会应用。

CustomStyle 定义文字样式

CustomStyle#constructor('color');     // 生成一个修改文字颜色的插件
CustomStyle#toggle('red');            // 将选中区域的文字颜色变为红色
CustomStyle#getKeys();                // 获取选区内文字的当前颜色,返回 immutable#List
CustomStyle#constructor('font-size'); // 生成一个修改文字大小的插件
CustomStyle#toggle('20px');           // 将选区中的文字字号改为 20px
CustomStyle#getKeys();                // 获取选区内文字的字号,返回 immutable#List

改插件主要用于有一组属性的样式,比如 color/font-size/font-family/border-color/background-color 等等,插件没有提供 map 方法,主要是考虑到,其实这些样式的值有很大的变动,一开始就规定好不切实际,所以仅仅提供应用和获取的方法,至于生成按钮可以手动写一个循环,插件内部不考虑。

NormalStyle 定义文字样式

NormalStyle#constructor({
  redBold: {
    fontWeight: 'bold',
    color: 'red'
  },
  blueLineThrough: {
    textDecoration: 'line-through',
    color: 'blue'
  }
});                                    // 定义了两个文字样式组:红色加粗、蓝色斜体
NormalStyle#toggle('redBold');         // 应用红色加粗,相同参数调用两次即取消
NormalStyle#toggle('blueLineThrough'); // 应用蓝色斜体,后加的权重大,所以文字会变成蓝色,相同参数调用两次即取消
NormalStyle#getKeys();                 // 获取文字的样式集合,返回含有 bold 和 bottom 的 immutable#List。

注: 由于文字样式是可以叠加的,所以返回一个 immutable#List 的结构,在 CustomStyle 中也是通过 getKeys 获取特定的样式,但是拿到 immutable#List 中其实只有一项,这样做仅仅是为了结构的统一。

NormalStyle 的构造方法还有第二个参数,用于控制样式集内的样式是否是唯一。

NormalStyle#constructor({
  top: {
    position: 'relative',
    top: '-8px',
    display: 'inline-flex',
    fontSize: '12px'
  },
  bottom: {
    position: 'relative',
    bottom: '-8px',
    display: 'inline-flex',
    fontSize: '12px'
  }
},
true);                                 // 定义了两个文字样式组:顶部文字、底部文字,由于这两个样式组是相斥的,额外传入第二个参数 true
NormalStyle#toggle('top');             // 应用顶部文字,相同参数调用两次即取消
NormalStyle#toggle('bottom');          // 先清除样式集内的所有样式,接着应用底部文字,相同参数调用两次即取消
NormalStyle#getKeys();                 // 获取文字的样式集合,返回含有 bottom 的 immutable#List。

这个可以理解为生成一个仅仅只能引用一组样式的插件。

RemoveStyle 移除样式

RemoveStyle#toggle();                  // 移除选区内样式,包括用 CustomStyle 和 NormalStyle 生成的样式

Link 为选区添加链接

Link#toggle({href:'http://www.baidu.com'}); // 选中的文字别包裹上一个 a 标签 href 为 http://www.baidu.com
Link#getEntity();                           // 获取实体,调用返回对象的 getData 方法即可获取传入的数据,此处即为 {href:'http://www.baidu.com'},主要用于按钮显示。

RemoveTag 移除链接

RemoveTag#toggle();                         // 为选中区域取消链接