cubicweb-editorjs 0.2.0

** 注意：此cube目前不建议用于生产环境 **

摘要

为 RichString 添加 editorjs 格式。此cube将 application/vnd.cubicweb.editorjs MIME类型添加到 RichString 可用格式中。它还添加了一个小部件，允许使用 EditorJS 库（一个所见即所得编辑器）编辑 RichString。

此项目的状态

此项目作为POC启动，以测试 EditorJS 在 CubicWeb 中的集成。

特性

• 将 RichString 的格式设置为 application/vnd.cubicweb.editorjs
• 使用 EditorJS 在 已存在 的 RichString 属性上进行编辑
• 在某些条件下使用此 MIME 类型渲染 RichString（见下文）
• RQL 插件允许编辑和执行 RQL 查询

已知错误

• 当切换到 application/vnd.cubicweb.editorjs 时，编辑器未加载，这意味着只能使用 EditorJS 编辑已保存的属性
• 当异步加载（在页面脚本运行后）时，富字符串无法渲染。这种情况发生在 CubicWeb 网页的选项卡视图中。
• 面包屑显示 JSON 而不是 RichString 的渲染版本
• 它使客户端 cube 的自动测试失败

实现缺陷

• 实现使用 monkeypatches 来
  • 将 application/vnd.cubicweb.editorjs 格式添加到已知格式列表
  • 覆盖一些视图
  • 覆盖实体 printable_value 方法（可能不是添加小部件的最佳位置）
• 缺少 application/vnd.cubicweb.editorjs 到 html 的 mttransforms
• 不支持图片上传

在 React 应用程序中使用

React 应用程序不像上述问题那样受影响，因为它们自己处理渲染。显示 EditorJS 与此类似

function Edit() {
  const instanceRef = React.useRef<EditorJS | null>(null);
  async function handleSave() {
    if (instanceRef.current !== null) {
      const savedData = await instanceRef.current.save();
      rqlClient.queryRows(
        `Set X content %(content)s Where X is BlogEntry, X eid ${eid}`,
        { content: JSON.stringify(savedData) }
      );
    }
  }
  return (
    <>
      <EditorJs
          instanceRef={(instance) => (instanceRef.current = instance)}
          data={JSON.parse(blogEntry.content)}
      />
      <button onClick={handleSave}>Save</button>
    </>
  )
}

为了渲染，可以使用类似https://github.com/jeremyrajan/editorjs2html的库。

if (contentFormat === "application/vnd.cubicweb.editorjs") {
    const edjsParser = EditorJsToHTML();
    const html = edjsParser.parse(JSON.parse(blogEntry.content)).join("");
    return <div dangerouslySetInnerHTML={{ __html: html }} />;
}