标签: editorjs

我正在尝试将 EditorJs 输出转换为 Html。EditorJs 输出“干净”的数据，如下所示：

{
  "time": 1589987527499,
  "blocks": [
    {
      "type": "embded",
      "data": {
        "service": "youtube",
        "source": "https://www.youtube.com/watch?v=JbqGYgI3XY0",
        "embed": "https://www.youtube.com/embed/JbqGYgI3XY0",
        "width": 580,
        "height": 320,
        "caption": ""
      }
    },
    {
      "type": "image",
      "data": {
        "file": {
          "url": "http://localhost/uploads/images/1.jpg"
        },
        "caption": "",
        "withBorder": false,
        "stretched": false,
        "withBackground": false
      }
    },
    {
      "type": "header",
      "data": {
        "text": "test",
        "level": 2
      }
    }
  ],
  "version": "2.17.0"
}

如何将其转换为原始 HTML？我必须手动转换吗？

我想向我的 editorjs 添加一个固定的顶部工具栏，例如：

我没有找到任何文档如何执行此操作： https: //editorjs.io/

当然，我已经用谷歌搜索过了，但结果并不是很好。

正如您在屏幕截图中看到的那样，制作工具栏不是问题。但我不知道如何处理，当我单击按钮时，焦点块将被格式化。

有谁知道我该怎么做？

我正在尝试使用 EditorJS 的编辑器。一切工作正常，除了当我第一次加载页面时，它会在开始时初始化两个编辑器，并在每次重新加载页面时不断附加新编辑器。但它们都在<div id='editorjs' />div内部。我有什么遗漏的吗？

// react etc. imports
import EditorJS from '@editorjs/editorjs'

const EditorComponent = (props) => {
    const [input, setInput] = useState({})
    const currentuser = useSelector((state) => state.currentuser)

    const editor = new EditorJS({
        holderId: 'editorjs',
        autofocus: true,
    })

    const postNews = () => {
        // POSTING SUTFF
    }

    return (
        <Grid>
            <Grid templateRows='auto min-content' gap={6}>
                <div id='editorjs' />
                <Button onClick={postNews}>Post news</Button>
            </Grid>
        </Grid>
    )
}

这是 dom 的屏幕截图，其中加载页面后立即添加了两个编辑器。

我将editorjs配置到我的应用程序中。我在上面安装了图像插件，以便我可以将图像上传到服务器。现在我的服务器上传图像并返回指定格式的 JSON，即

{\n  "success": 1,\n  "file": {\n    "url": "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg",\n    // ... and any additional fields you want to store, such as width, height, color, extension, etc\n  }\n}\n

响应有 file->url 但上传消息仍然出错

这是我的配置代码：

const editor = new EditorJS({\n  /**\n   * Id of Element that should contain Editor instance\n   */\n  holder: \'heditor\',\n\n  /** \n   * Available Tools list. \n   * Pass Tool\'s class or Settings object for each Tool you want to use \n …

所以我想看看这个新的富文本编辑器编辑器，https://editorjs.io/

我安装了非官方的 reactJS 版本，但我不太确定我在这里做错了什么...... https://www.npmjs.com/package/react-editor-js

有没有人用过这个？可以用钩子完成吗？我的想法是我需要定义这个编辑器的一个实例，以便我可以保存数据。因为当前onChange 编辑器没有向数据对象或输入的数据添加任何新块。

此外，如果我在控制台中将数据对象作为空对象传递，则不会显示初始 EditorJs 块。

任何帮助，将不胜感激。

function App() {
  let data = { '1': 'test' }

  return (
    <div className="App">
      <EditorJs
        data={data}
        onChange={(e) => console.log(data)}
        tools={{
          code: Code,
          header: Header,
          paragraph: Paragraph
        }}
      />
    </div>
  );
}

我正在尝试让EditorJS在 NextJS 中工作。编辑器在没有插件的情况下加载良好，只有一个段落作为块选项。但是，当我尝试通过工具道具控制台添加插件时，会抛出以下警告：

editor.js?9336:2 Module Tools was skipped because of TypeError: Cannot read property 'prepare' of undefined

当我点击浏览器中的编辑器时，它抛出：

Uncaught TypeError: Cannot read property 'holder' of undefined

我已经在普通的 React 应用程序中测试了编辑器插件，它们加载得很好。这意味着问题出在 EditorJS 和 NextJS 导入和插件处理中。我曾尝试使用 require 在 componentDidMount 挂钩中导入编辑器和插件，但遇到了与 NextJS 动态导入相同的问题。尝试使用 React ref 获取组件，但发现当前NextJS 在获取组件的 refs 方面存在问题，尝试了建议的解决方法，但仍然没有结果。在触发 onChange 之前，编辑器的实例不可用，因此由于“准备”属性，插件无法连接到编辑器，或者在编辑器上的事件发生之前，整个编辑器都未定义，但编辑器输出到控制台它准备好了。

我的组件代码：

import React from "react";
import dynamic from "next/dynamic";

const EditorNoSSR = dynamic(() => import("react-editor-js"), { ssr: false });
const Embed = dynamic(() => import("@editorjs/embed"), { ssr: false }); …

我在一个项目上使用 Next.js，其中编辑器组件（EditorJS 找到https://github.com/Jungwoo-An/react-editor-js）无法使用 SSR。在下一个文档之后，我尝试在页面上动态导入我的编辑器组件。当我加载页面时，除了编辑器组件之外的所有组件都会加载。

使用 Chrome 开发工具中的 ReactComponents选项卡，它向我显示编辑器组件卡LoadableComponent在加载阶段。

编辑器代码 (Editor.js)

import React from "react";
import axios from 'axios';
import EDITOR_JS_TOOLS from "./editor-constants"
import EditorJs from "react-editor-js"
// const DynamicComponent = dynamic(() => import("react-editor-js").then((mod) => mod.EditorJs) ,{"ssr" : false})
import { API_LINK, getDoc } from "../services"
/* Document editor for a given forum */
export default function Editor(props) {

    /* API call to save current document state */
    async function saveDoc() { 
        const ENDPOINT = …

我想将块数据动态加载到我的 EditorJS 实例中。我想做这样的事情：

const editor = new EditorJS();
editor.load({ blocks: my_blocks })

我似乎没有在https://editorjs.io/上找到任何有关如何执行此操作的文档

我知道我可以在初始化期间将块加载到 EditorJS，但我需要在单击按钮时加载动态数据。