@zhike/queen-editor NPM

Queen Editor

一个易于二次开发、与业务解耦的编辑器。

1 使用

(待完善)

1.1 安装要求：

node v10.15
npm v5.6.0

1.2 安装部署

npm install @zhike/queen-editor

1.3 使用方式

// App.css
.editor-toolbar-contaienr {
  height: 40px;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.08);

  display: flex;
  justify-content: center;
  align-items: center;
}

.editor-text-container {
  border-radius: 4px;
  box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.06), 3px 3px 10px rgba(0, 0, 0, 0.06);

  margin: 24px auto;
  width: 666px;

  background-color: white;
}

// App.js
import React, { useRef, useEffect } from 'react'
import ReactDOM from 'react-dom';
import E from '@zhike/queen-editor'
import './App.css'

const App = () => {
    const editorInstance = useRef()

    useEffect(() => {
        editorInstance.current = new E('#toolbar-container', '#text-container') 
        const editor = editorInstance.current

        editor.config.onchange = newHtml => console.log('onChange', newHtml)
        editor.config.minHeight = '128vh'

        editor.create()

        editor.txt.html('<p>this is test insert</p>')
    }, [])

    return (
        <div>
            <div class="editor-toolbar-contaienr">
                <div id="toolbar-container"></div>
            </div>
            <div class="editor-text-container">
                <div id="text-container"></div>
            </div>
        </div>
    )
}

ReactDOM.render(<App />, document.getElementById('root'));

1.4 测试样例

(待完善)

2 开发

2.1 本地运行

使用webpack-devserver的方式调试

npm install
npm run start
# 浏览器访问 http://localhost:7077/

使用node server的方式调试

如果调试编辑器上传文件功能，在local起一个服务器会比较方便一点

npm install
npm run start:service
# 浏览器访问 http://127.0.0.1:7777/dist/index.html

// 辅助命令 查看7777端口是否已经被进程占用
lsof -i :7777 
// 辅助命令 关闭占用7777端口的<pid>号进程
kill <pid>

2.2 本地开发

2.2.1 分支类型

master 发包分支，仅在此分支才能进行发包操作（🈲️在此分支开发）
develop 开发分支，用来合并开发人员的分支 (🈲️在此分支开发）
feature/\<name\> 开发人员的分支

2.2.2 工作流

（待优化）

目前有三种分支

项目分支

创建feature/xxx分支进行个人开发

git checkout develop
git checkout -b feature/xxx

将feature/xxx合并到develop分支并是部署

// 本地git操作
// ... 在feature/xxx进行commit操作 ...
git checkout master
git pull origin master
git checkout develop
git merge master // 处理develop和master版本号不同问题
git pull origin develop
git checkout feature/tj
git merge develop // 本地处理feature/xxx和develop分支冲突
git push origin feature/xxx

// 在gitlab pull request 并merge到develop

发包

可以执行npm run try-release体验发包流程，以下代码是正式发包流程

git checkout develop
git pull origin develop
git checkout master
git merge develop
npm run release

tips：
不要在master上开发，原则上master的改动都来自于merge develop
npm run release会帮开发人员检查是否有未提交的修改，只有所有修改都提交了，才能发包。
npm run release会自动创建一个带版本号的commit，并提交到master分支上。

2.3 项目结构

2.3.1 技术选型

语言：typescript、less
打包：webpack
依赖框架和工具：无

2.3.1 源码目录

开发相关目录

src 编辑器代码
build webpack配置
server 服务端，主要用于调试资源上传功能
dist 开发调试目录、打包产物目录、npm包发布目录

src目录

assets 存放样式字体文件
config 编辑器默认配置
editor 编辑器核心功能
- index.ts 编辑器入口文件
- init-fns/ 编辑器初始化功能
- command.ts document.exeCommand封装
- selection.ts 封装Selection和Range
lib/ 用到的第三方库
menus/ 菜单栏和菜单
- index.ts 菜单栏class
- menus-constructor/ 生成单个菜单所用到的class
- menu-list.ts 汇总所有的菜单
- 其他文件夹，具体的各个菜单功能。
text/ 文本编辑区域
- index.ts 入口文件，产出class, 封装单个API。
- event-hooks/ 初始化text的各个钩子函数，如回车、删除、黏贴等
- paste/ 处理黏贴事件
utils 工具
- observer/ 文本区域内容比变化监听器
- const.ts 常量
- dom-core.ts 封装简单jq，进行dom操作
- util.ts 各个工具函数