编辑器引擎
编辑器核心库，纯js编写，不依赖 React，提供编辑能力，插件接口
React 编辑器（itellyou-editor）
在 itellyou-engine 基础上扩展编辑能力，提供更多丰富的插件
基础功能
- bold (加粗 ctrl + b)
- italic (斜体 ctrl + i)
- underline (下划线 ctrl + u)
- alignment (对齐方式 ，左 ctrl + shift + l , 居中 ctrl + shift + c , 右 ctrl + shift + r , 两端 ctrl + shift + j)
- backcolor (背景色)
- fontcolor (字体颜色)
- fontsize (字体大小)
- heading (标题 h1 ctrl+alt+1,h2 ctrl+alt+2,h3 ctrl+alt+3,h4 ctrl+alt+4,h5 ctrl+alt+5,h6 ctrl+alt+6)
- tasklist (orderedlist (有序列表 ctrl+shift+7) , unorderedlist (无序列表 ctrl+shift+8) , tasklist (任务列表 ctrl+shift+9))
- code (行内代码 ctrl + e)
- link (链接 ctrl + k)
- hr (分割线 ctrl + shift + e)
- strikethrough (删除线 ctrl+shift+x)
- quote (引用 ctrl+shift+u)
- sub (下标 ctrl+,)
- sup (上标 ctrl+.)
- indent (增加缩进 ctrl+])
- outdent (减少缩进 ctrl+[)
- undo (撤销 ctrl + z)
- redo (重做 ctrl + y)
- removeformat (清除格式 ctrl+)
- markdown （支持 markdown 语法）
本地编译
clone https://github.com/itellyou-com/itellyou-engine.git
编译之前需要确认以下命令是否有全局安装,或在package.json/scripts/compile 中 修改命令
// rimraf 删除 lib 目录
npm install rimraf -g
// cpr 复制资源文件
npm install cpr -g
在 itellyou-engine
// 安装模块
npm install
// 编译后链接到全局
npm link
// 或只编译
npm run compile
编译后的文件在 itellyou-engine/lib 文件夹中
npm link 使用：
首先得执行 npm link 编译后链接到全局 ，然后在您的应用程序中链接它
npm link @itellyou/itellyou-engine
简单示例
import React from 'react'
import Engine from '@itellyou/itellyou-engine'
class Editor extends React.Component{
state = {}
constructor(props){
super(props)
// 编辑区域
this.container = React.createRef()
}
componentDidMount(){
// 实例化编辑器
this.engine = this.renderEditor()
}
componentWillUnmount(){
// 在组件注销时，注销编辑器
this.engine && this.engine.destroy()
}
// 创建编辑器
renderEditor() {
// 创建编辑器，可以传入插件的配置项，比如自定义 bold 的 hotkey （快捷键） { bold : { hotkey : "mod+b" } } ， 这里 mod 在windows下是 ctrl ，在 mac 下是command ，具体使用方式，参考 https://github.com/ianstormtaylor/is-hotkey 库
const options = {}
const engine = Engine.create(this.container.current, options)
// 监听编辑器内容更改事件
engine.on("change", value => {
console.log(value)
})
// 监听在光标选中编辑器事件
engine.on("select", () => {
})
// 返回引擎实例
return engine
}
render() {
return <div ref={this.container}></div>
}
}
export default Editor
可选择项 options
{
// 编辑器父节点，默认body
parentNode:element | document.body,
// 语言，默认中文
lang:'zh-cn' | 'en'
// tab 索引
tabindex:number,
// class 样式
className:string,
...
其它插件选项
bold : { ... }
fontsize : { ... }
italic : { ... }
}
已有插件可选项 options
// 警告提示
alert:{}
// 对齐方式
alignment:{
//快捷键
left:{
hotkey:'mod+shift+l'
},
center:{
hotkey:'mod+shift+c'
},
right:{
hotkey:'mod+shift+r'
},
justify:{
hotkey:'mod+shift+j'
}
}
// 背景颜色
backcolor:{}
// 加粗
bold:{ hotkey:'mod+b' }
// 行内代码
code:{ hotkey:'mod+e' }
// 字体颜色
fontcolor:{}
// 字体大小
fontsize:{ defaultSize : "11" }
字号->像素
{
9: 12,
10: 13,
"11": 14,
"1515":15,
12: 16,
14: 19,
16: 22,
18: 24,
22: 29,
24: 32,
30: 40,
36: 48
}
// 标题
heading: {
items:{
h1:{
hotkey:'mod+opt+1'
},
h2:{
hotkey:'mod+opt+2'
},
h3:{
hotkey:'mod+opt+3'
},
h4:{
hotkey:'mod+opt+4'
},
h5:{
hotkey:'mod+opt+5'
},
h6:{
hotkey:'mod+opt+6'
},
},
// 显示标题锚点
showAnchor: true
}
// 分割线
hr: {
hotkey:'mod+shift+e'
}
// 增加缩进
indent:{
hotkey:'mod+]'
}
// 减少缩进
outdent:{
hotkey:'mod+['
}
// 斜体
italic:{
hotkey:'mod+i'
}
// 有序列表
orderedlist:{
hotkey:'mod+shift+7'
}
// 无序列表
unorderedlist:{
hotkey:'mod+shift+8'
}
// 任务列表
tasklist:{
hotkey:'mod+shift+9'
}
// Markdown 支持项
markdown:{
items : [
"code",
"mark",
"bold",
"strikethrough",
"italic",
"sup",
"sub",
"orderedlist",
"unorderedlist",
"tasklist",
"checkedtasklist",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"quote",
"link"
]
}
// 格式刷
paintformat:{}
// 引用
quote:{
hotkey:'mod+shift+u'
}
// 清除格式
removeformat:{
hotkey:'mod+\\'
}
// 删除线
strikethrough:{
hotkey:'mod+shift+x'
}
// 小标
sub:{
hotkey:'mod+,'
}
// 上标
sup:{
hotkey:'mod+.'
}
// 下划线
underline:{
hotkey:'mod+u'
}
// 撤销
undo:{
hotkey:'mod+z'
}
// 重做
redo:{
hotkey:['mod+y','shift+mod+z']
}
插件扩展
插件通过 Engine.plugin 扩展
// 插件
const PLUGIN_NAME = 'bold'
const TAG_NAME = 'strong'
export default {
// 实例化
initialize: function() {
// 添加被允许的标签
this.schema.add(TAG_NAME)
// 创建命令
this.command.add(PLUGIN_NAME, {
// 查询插件状态
queryState:() => {
return this.change.marks.some(node => {
return node.name === TAG_NAME
})
},
// 执行插件
execute:() => {
const mark = "<".concat(TAG_NAME, " />")
if (!this.command.queryState(PLUGIN_NAME)) {
this.change.addMark(mark)
} else {
this.change.removeMark(mark)
}
}
})
// 获取从引擎传过来的 options
const options = this.options[PLUGIN_NAME] || {
hotkey:'mod+b'
}
// 设置快捷键
if(!!options.hotkey){
this.hotkey.set(options.hotkey, PLUGIN_NAME)
}
}
}
// 添加插件到引擎中
Engine.plugin.add('插件名称', 插件)
区块扩展
插件通过 Engine.section 扩展
实例方法
// 注销编辑器
destroy()
// 判断是否是嵌套子级编辑器，返回 ture | false
isSub()
// 设置只读，boolean:true | false
readonly(boolean)
// 监听事件，eventType 事件类型，listener 监听方法，rewrite 是否覆盖之前的监听
on(eventType, listener, rewrite)
// 取消监听事件
off(eventType, listener)
// 设置编辑器内容
setValue(value)
// 设置默认内容
setDefaultValue(value)
// 清空编辑器
clearValue()
// 获取编辑器内容
getValue()
// 获取去掉光标标记后的纯内容
getPureValue()
// 聚焦编辑器
focus()
// 将光标移到最前
focusToStart()
// 将光标移到最后
focusToEnd()
// 将光标离开编辑器
blur()