@zhike/queen-editor

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 各个工具函数

配置相关目录

这里倾向于把devDependencies中需要配置的包的配置，单独写成配置文件放在项目根目录下。

• .husky husky配置（precommit阶段检查代码格式）
• .release-it.js npm发包配置
• .sh 自定义shell脚本 (检查发包前工作目录是否干净)
• .eslintrc.js、.eslintignore eslint配置
• .gitlab-ci.yml、deploy 线上部署配置
• .vscode vscode配置

3 效果演示地址

演示demo

4 实现规范

产品原型

设计规范

teambition

5 ToDo Lists

• 1.加粗、斜体、删除线、下划线、字号、字体颜色需要有选区才能生效。（背景颜色不需要选区也可以生效）
• 2.无序列表和有序列表在同一个菜单按钮下拉列表中，需要被拆成两个。（增减缩进也需要）
• 3.列表子项序号问题
• 4.release流程优化

6 Refs

wangEditor (respect)

husky

eslint

release-it

npm

shell