Home

ory-editer 网页编辑器-基于react

ory 的 editer

用于网页的编辑器,Online

应该说,这是高级应用了

我的目标,也就是这极限了。

看了下源码,真的看晕了

react, typescript, material-ui, redux, bootstrap

单独一二项,看的明白,混在一起的. 科科

虽然说,用react框架省去了些,步骤,redux做全局,meterial-ui 做 UI ,bootstrap 做 布局

部分,代码文件,后缀名是,.js 但是,应该是,用工具转代码的,

因为,变量数据格式,太凸显 , 还是说用了其他的方式。

editor/packages/renderer/src/index.js v0.2.10 line-8

const gridClass = (size: number = 12): string =>
  `ory-cell-sm-${size} ory-cell-xs-12`

eslint 总 显示红线, 这个是ts的书写 啊,一坨的红线。

作者造搞了,自己的数据格式,主要通过 cells Raws

状态是一个规范的JSON对象,不涉及HTML。

也是为了,免xss威胁。

去区分,显示

editor/examples/src/content.js

export default [
  {
    "id": "1",
    "cells": [
      {
        "id": "5ac89ec4-7536-4120-a072-8eedad0a48ff",
        "inline": null,
        "size": 12,
        "rows": [
          {
            "id": "c440df91-52c5-44cf-9ac2-f5b15ff61b13",
            "cells": [
              {
                "id": "39417572-f976-44b7-97b2-9a7e00fd66f2",
                "inline": null,
                "size": 12,

用来对,服务器渲染,静态

editor/examples/src/index.js line-92

ReactDOM.render(<HTMLRenderer state={content[0]} plugins={plugins} />, document.getElementById('editable-static'))

state = content[0] //就是上面的一串格式

感觉,还要做一个,html 上面一串格式