在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:am-editor开源软件地址:https://gitee.com/aomao/am-editor开源软件介绍:招聘:高级前端工程师岗位要求 : 1、熟练掌握 JavaScript、HTML、CSS 等原生前端基础技术,熟悉相关规范。 2、熟悉 React 技术栈,了解渲染流程和机制。 3、理解 MVC 设计模式、事件驱动机制、不可变数据结构。 4、有使用 Websocket、Canvas 经验。 5、了解 Webpack、Rollup 等构建工具的使用和配置。 6、了解不同浏览器特性,能够更好的解决兼容性和性能问题。 7、具备强烈的技术进取心,有良好的沟通与合作精神,拥有优秀的问题分析及解决能力。 8、 熟悉富文本原理,有真实研发经验者优先。 简历发送到:[email protected] am-editor一个支持协同编辑的富文本编辑器,可以自由的使用React、Vue 等前端常用库扩展定义插件。 English · Demo · 文档 · 插件 · QQ群 907664876 ·
基本原理使用浏览器提供的 <div contenteditable="true"></div> 所以它的值看起来像是这样的: <div data-element="root" contenteditable="true"> <p>Hello world!</p> <p><br /></p></div> 当然,有些场景下为了方便操作,也提供了转换为 JSON 类型值的 API: [ 'div', // 节点名称 // 节点所有的属性 { 'data-element': 'root', contenteditable: 'true', }, // 子节点1 [ // 子节点名称 'p', // 子节点属性 {}, // 字节点的子节点 'Hello world!', ], // 子节点2 ['p', {}, ['br', {}]],]; 比如输入的过程中 在对事件进行接管后,编辑器所做的事情就是管理好基于 综上所述,编辑中的数据结构是一个 DOM 树结构,所有的操作都是对 DOM 树直接进行操作,不是典型的以数据模型驱动视图渲染的 MVC 模式。 节点约束为了更方便的管理节点,降低复杂性。编辑器抽象化了节点属性和功能,制定了 一个简单的 { name: 'p', // 节点名称 type: 'block' // 节点类型} 除此之外,还可以描述属性、样式等,比如: { name: 'span', // 节点名称 type: 'mark', // 节点类型 attributes: { // 节点有一个 style 属性 style: { // 必须包含一个color的样式 color: { required: true, // 必须包含 value: '@color' // 值是一个符合css规范的颜色值,@color 是编辑器内部定义的颜色效验,此处也可以使用方法、正则表达式去判断是否符合需要的规则 } }, // 可选的包含一个 test 属性,他的值可以是任意的,但不是必须的 test: '*' }} 下面这几种节点都符合上面的规则: <span style="color:#fff"></span><span style="color:#fff" test="test123" test1="test1"></span><span style="color:#fff;background-color:#000;"></span><span style="color:#fff;background-color:#000;" test="test123"></span> 但是除了在 color 和 test 已经在 可编辑器区域内的节点通过 特性
插件快速上手安装编辑器由 使用 npm 或者 yarn 安装引擎包 $ npm install @aomao/engine# or$ yarn add @aomao/engine 使用我们按照惯例先输出一个 import React, { useEffect, useRef, useState } from 'react';import Engine, { EngineInterface } from '@aomao/engine';const EngineDemo = () => { //编辑器容器 const ref = useRef<HTMLDivElement | null>(null); //引擎实例 const [engine, setEngine] = useState<EngineInterface>(); //编辑器内容 const [content, setContent] = useState<string>('<p>Hello word!</p>'); useEffect(() => { if (!ref.current) return; //实例化引擎 const engine = new Engine(ref.current); //设置编辑器值 engine.setValue(content); //监听编辑器值改变事件 engine.on('change', () => { const value = engine.getValue(); setContent(value); console.log(`value:${value}`); }); //设置引擎实例 setEngine(engine); }, []); return <div ref={ref} />;};export default EngineDemo; 插件引入 import Bold from '@aomao/plugin-bold'; 把 //实例化引擎const engine = new Engine(ref.current, { plugins: [Bold],}); 卡片卡片是编辑器中单独划分的一个区域,其 UI 以及逻辑在卡片内部可以使用 React、Vue 或其它前端库自定义渲染内容,最后再挂载到编辑器上。 引入 import CodeBlock, { CodeBlockComponent } from '@aomao/plugin-codeblock'; 把 //实例化引擎const engine = new Engine(ref.current, { plugins: [CodeBlock], cards: [CodeBlockComponent],});
工具栏引入 工具栏除了 UI 交互外,大部分工作只是对不同的按钮事件触发后调用了引擎执行对应的插件命令,在需求比较复杂或需要重新定制 UI 的情况下,Fork 后修改起来也比较容易。 import Toolbar, { ToolbarPlugin, ToolbarComponent } from '@aomao/toolbar'; 把 //实例化引擎const engine = new Engine(ref.current, { plugins: [ToolbarPlugin], cards: [ToolbarComponent],}); 渲染工具栏,工具栏已配置好所有插件,这里我们只需要传入插件名称即可 return ( ... { engine && ( <Toolbar engine={engine} items={[ ['collapse'], [ 'bold', ], ]} /> ) } ...) 更复杂的工具栏配置请查看文档 https://editor.aomao.com/zh-CN/config/toolbar 协同编辑通过 交互模式每位编辑者作为 客户端 通过 服务端会保留一份 服务端是 案例案例中我们已经一份比较基础的客户端代码 //实例化协作编辑客户端,传入当前编辑器引擎实例const otClient = new OTClient(engine);//连接到协作服务端,`demo` 与服务端文档ID相同otClient.connect( `ws://127.0.0.1:8080${currentMember ? '?uid=' + currentMember.id : ''}`, 'demo',); 项目图标开发React需要在 `am-editor 安装依赖 //依赖安装好后,只需要在根目录执行以下命令yarn start
Vue贡献感谢 pleasedmi、Elena211314、zb201307 的捐赠 如果您愿意,可以在这里留下你的名字。 支付宝微信支付PayPal |
请发表评论