编辑器引擎

编辑器核心库，纯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()