feimiao-editor-engine v0.0.1

适用于 React 的富文本编辑器

编辑器引擎（itellyou-engine）

这是核心引擎库，拥有一般编辑所需基础功能，不自带toolbar（工具栏），需要自行编写toolbar

引擎基础功能

• 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 语法）

引擎使用：

npm install @itellyou/itellyou-engine

import React from 'react'
import Engine from '@itellyou/itellyou-engine'
import 'itellyou-engine/lib/index.less'

class Editor extends React.Component{

    state = {}

    constructor(props){
        super(props)
        this.editArea = 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 engine = Engine.create(this.editArea.current, {})
        // 编辑器值改变时候调用
        engine.on("change", value => {
            console.log(value)
            this.updateState()
        })
        // 在光标选择编辑器的时候调用
        engine.on("select", () => {
            this.updateState()
        })
        // 返回引擎实例
        return engine
    }
    
    /**
    * 更新toolbar状态
    */
    updateState(){
        if(!this.engine) return 

        const boldState = {
            className:this.engine.command.queryState('bold') ? "active" : "",
            disabled:function(){
                const tag = this.engine.command.queryState('heading') || 'p'
                return /^h\d$/.test(tag)
            }.call(this)
        }

        this.setState({
            boldState
        })
    }

    /**
    * 执行引擎命令 , 此处bold命令插件并没有额外的参数
    * 在使用heading、tasklist等命令插件的时候，需要额外的参数，如：h1 this.engine.command.execute('heading','h1')
    */
    onExecute = (event,type) => {
        event.preventDefault()
        if(this.engine){
            this.engine.command.execute(type)
        }
    }
    
    render() {
        const { boldState } = this.state
        return (
            <div>
                <button {...boldState} onClick={event => { this.onExecute(event,'bold') }}>bold</button>
                <div className="itellyou-engine" ref={this.editArea}></div>
            </div>
        )
    }
}
export default Editor

完整的编辑器（itellyou-editor）

这是在 itellyou-engine 库的基础上扩展的带toolbar和更高级功能的完整编辑器

扩展功能

• codeblock (代码块，需要额外引用 codemirror 对语言支持)
• table (表格)
• emoji (emoji 表情)
• file (文件上传、预览 需要配合后台api处理上传)
• label (文本状态)
• lockedtext (加密文本 ，需要配合后台api加密)
• mindmap (脑图)
• diagram (文本绘图，PlantUML、Mermaid、Flowchart、Graphviz 需要后台api调用第三方库生成svg图片)
• math （数学公式，同diagram 一样需要后台api调用第三方库生成svg图片）
• mention (提及 @)
• search (输入关键字可以查询编辑器中的符合条件的文字，并高亮显示，可以替换相应的文字)
• translate (可以对编辑器中的文档翻译，并且可以替换，需要后台 提供翻译api，一般使用阿里云)
• video (视频，需要后台上传api)
• youku (在线视频)
• image (图片，需要后台上传api)
• toc (大纲)

四种满足使用环境的编辑器模式

• Editor (正常完整模式，适合专业文档撰写)
• MiniEditor (迷你模式，评论、问答等简单撰写)
• LineEditor (行模式 适合文字评论、表情评论、图片评论)
• MobileEditor (手机模式，适合手机h5简单撰写)

import { Editor , MiniEditor , LineEditor ,MobileEditor } from '@itellyou/itellyou-editor'

使用方式

npm install @itellyou/itellyou-editor

import React from 'react'
import { Editor } from '@itellyou/itellyou-editor'
import "@itellyou/itellyou-editor/lib/index.css"

class Max extends React.Component {

    state = {
        content:""
    }

    onEditorChange = content => {
        this.setState({
            content
        })
        const { onChange } = this.props
        if(onChange){
            onChange(content)
        }
    }

    render(){
        const { content } = this.state
        /**
         * 
         * {
                lang,// 语言 en , zh-cn
                defaultValue, 默认值
                onChange, 编辑器内容改变调用
                // 图片插件配置
                image: {
                    uploadAction 上传请求地址
                },
                // 文件插件配置
                file: {
                    uploadAction 上传请求地址
                },
                // @ 插件
                mention: {
                    action,//请求地址
                    getDefaultSuggestions, //默认可以 @ 的会员
                    paramName: "q" // 查询参数
                },
                onLoad, //编辑器加载成功时调用
                header, // 编辑器扩展header信息，可以是 React 组件
                onSave, // 保存插件执行保存的时候调用
                onBeforeRenderImage,// 在读取图片前调用，可以在函数里面修改 图片地址
                // 加密文本插件配置
                lockedtext: {
                    action // 请求地址
                }
            }
         */
        return (
            <Editor 
            value={content}
            defaultValue={this.props.defaultValue}
            onLoad={this.props.onLoad}     
            onChange={this.onEditorChange}
            onSave={this.props.onSave}
            />
        )
    }
}
export default Max

示例：