npm package: @roy2651/roy2651-engine
Description: 编辑器核心库，纯js编写，不依赖 React，提供编辑能力，插件接口 ### React 编辑器（[itellyou-editor](https://github.com/itellyou-com/itellyou-editor)） 在 itellyou-engine 基础上扩展编辑能力，提供更多丰富的插件
Latest version: 2.0.32

# 编辑器引擎
编辑器核心库，纯js编写，不依赖 React，提供编辑能力，插件接口
### React 编辑器（[itellyou-editor](https://github.com/itellyou-com/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()
```