1

我正在尝试在 NuxtJs 项目中使用 EditorJs。

Medium 在https://medium.com/code4mk-org/editorjs-vue-a78110c3fff8上有一篇文章。

它可以工作，但是如果我重新加载页面，我会收到“未定义窗口”错误，因为代码正试图在服务器端运行。

有一个名为https://github.com/ChangJoo-Park/vue-editor-js的包适用于 NuxtJs，但它在图像上传方面存在问题。

//I try change 

import EditorJS from '@editorjs/editorjs'

//to 
const EditorJS = require('@editorjs/editorjs')

它有效，但我在加载工具时出错

// ImageTool = require('@editorjs/image') // 出错

也许还有另一种方式？

4

2 回答 2

2 
<template> 
   <div id="codex-editor"></div> 
</template> 

<script> 
    let EditorJS = null, ImageTool = null; 

    if (process.client) { 
        EditorJS = require('@editorjs/editorjs'); 
        ImageTool = require('@editorjs/image'); 
    } 

     export default { 
         mounted() { 
         const editor = new EditorJS({ 
         holder: 'codex-editor', 

     tools: { 
         image: { 
             class: ImageTool, 
         } 
     } 
    }); 
  } 
 }

于 2020-04-11T09:49:28.463 回答
1

这是我如何在 Nuxt.js 项目中使用它的示例：

与 Nuxt.js (2.15.x) 一起使用

用editor.js 2.22.x和测试nuxt 2.15.x。您显然必须根据自己的需要进行扩展，但这是基础。

安装模块

安装所有模块：npm i --save @editorjs/editorjs @editorjs/header

创建插件

1. 在你的 Nuxt 项目中创建以下内容plugins/editor.js

import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';

export default (context, inject) => {
  const defaultOptions = {
    id: '',
    data: {},
    onChange: () => {},
  }

  const editor = (options = defaultOptions) => {
    return new EditorJS({
      placeholder: 'Let`s write an awesome story!',
      /**
       * Id of Element that should contain Editor instance
       */
      holder: options.id,
      /** 
       * Available Tools list. 
       * Pass Tool's class or Settings object for each Tool you want to use 
       */
      tools: {
        header: Header,
      },
      /**
       * Previously saved data that should be rendered
       */
      data: options.data || {},
      onChange(data) {
        // pass in function from component to run on change
        options.onChange(data)
      }
    })
  };

  inject('editor', options => editor(options));
}

2. 编辑您的nuxt.config.js plugins块以包含它：

  plugins: [
    ...
    { src: '~/plugins/editor.js', mode: 'client' },
    ...
  ],

3. 创建组件components/Editor.vue

<template>
  <div id="editorjs" />
</template>

<script>
export default {
  name: 'Editor',
  props: {
    existingContent: { type: Object, default: () => {} }
  },
  data() {
    return {
      editor: null,
    }
  },
  async mounted() {
    const editorOptions = {
      id: 'editorjs',
      data: this.existingContent,
      onChange: this.onChange
    };
    this.editor = this.$editor(editorOptions);
    await this.editor.isReady;
  },
  methods: {
    async onChange() {
      try {
        const updatedData = await this.editor.save();
        console.log('Article data saved: ', updatedData)
        this.$emit('contentChanged', updatedData);
      } catch (error) {
        console.log('Saving failed: ', error)
      }
    },
  }
}
</script>

4.创建组件以显示编辑器结果components/Blog.vue

<template>
  <div>
    <template v-for="block in editorContent.blocks">
      <h1
        v-if="block.type === 'header' && block.data.level === 1"
        :key="block.id"
      >{{ block.data.text }}</h1>

      <h2
        v-if="block.type === 'header' && block.data.level === 2"
        :key="block.id"
      >{{ block.data.text }}</h2>

      <p
        v-if="block.type === 'paragraph'"
        :key="block.id"
      >{{ block.data.text }}</p>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Blog',
  props: {
    editorContent: { type: Object, default: () => {} },
  }
}
</script>

4. 使用示例pages/index.vue

<template>
  <div>
    <Editor
      :blog-content="editorContent"
      @contentChanged="onChange"
    />
    <Blog :editor-content="editorContent" />
  </div>
</template>

<script>
import Blog from '~/components/Blog.vue'
import Editor from '~/components/Editor.vue'
const editorContent = {
  time: 1629305722425,
  blocks: [
    {
      id: 'P0gOThWo9y',
      type: 'header',
      data: {
        text: 'Editor.js',
        level: 1,
      },
    },
    {
      id: 'YsJdcKCfHt',
      type: 'paragraph',
      data: {
        text: 'Hey. Meet the new Editor. On this page you can see it in action — try to edit this text.',
      },
    },
    {
      id: 'iIhdNHjLzc',
      type: 'header',
      data: {
        text: 'What does it mean clean data output',
        level: 2,
      },
    },
    {
      id: 'BaOtN0Tn3V',
      type: 'paragraph',
      data: {
        text: 'Classic WYSIWYG-editors produce raw HTML-markup with both content data and content appearance. On the contrary, Editor.js outputs JSON object with data of each Block. You can see an example below',
      },
    },
    {
      id: '0ReqIOJLNx',
      type: 'paragraph',
      data: {
        text: 'Given data can be used as you want: render with HTML for <code class="inline-code">Web clients</code>, render natively for <code class="inline-code">mobile apps</code>, create markup for <code class="inline-code">Facebook Instant Articles</code> or <code class="inline-code">Google AMP</code>, generate an <code class="inline-code">audio version</code> and so on.',
      },
    },
    {
      id: '7UTs8tiQqx',
      type: 'paragraph',
      data: {
        text: 'Clean data is useful to sanitize, validate and process on the backend.',
      },
    },
    {
      id: 'iFrktjRJ5I',
      type: 'paragraph',
      data: {
        text: "We have been working on this project more than three years. Several large media projects help us to test and debug the Editor, to make it's core more stable. At the same time we significantly improved the API. Now, it can be used to create any plugin for any task. Hope you enjoy. ",
      },
    },
  ],
  version: '2.22.2',
}

export default {
  components: { Editor, Blog },
  data() {
    return { editorContent }
  },
  methods: {
    onChange(data) {
      console.log('component content was changed...')
      this.editorContent = data;
    }
  }
}
</script>
于 2021-08-20T12:14:59.640 回答