Tsustuiエディタを実装します.( S/Sスクリプト)

可能な限り簡潔にするために、このポストは、実装中に遭遇するかもしれないいくつかの問題に対処するだけですToastUI Editor インサイドネクスト.JSプロジェクト.

エラーが発生しました。

これはToastuiエディタだけでなく、必要なライブラリとのwindow 実行時にオブジェクト.それは次だからです.jsはサーバ側でそれをレンダリングしますが、ウィンドウオブジェクトは存在しません.

// toast-editor.js
(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory(require("prosemirror-commands"), require("prosemirror-history"), require("prosemirror-inputrules"), require("prosemirror-keymap"), require("prosemirror-model"), require("prosemirror-state"), require("prosemirror-transform"), require("prosemirror-view"));
    else if(typeof define === 'function' && define.amd)
        define(["prosemirror-commands", "prosemirror-history", "prosemirror-inputrules", "prosemirror-keymap", "prosemirror-model", "prosemirror-state", "prosemirror-transform", "prosemirror-view"], factory);
    else if(typeof exports === 'object')
        exports["toastui"] = factory(require("prosemirror-commands"), require("prosemirror-history"), require("prosemirror-inputrules"), require("prosemirror-keymap"), require("prosemirror-model"), require("prosemirror-state"), require("prosemirror-transform"), require("prosemirror-view"));
    else
        root["toastui"] = root["toastui"] || {}, root["toastui"]["Editor"] = factory(root[undefined], root[undefined], root[undefined], root[undefined], root[undefined], root[undefined], root[undefined], root[undefined]);
})(self, function(__WEBPACK_EXTERNAL_MODULE__695__, __WEBPACK_EXTERNAL_MODULE__412__, __WEBPACK_EXTERNAL_MODULE__479__, __WEBPACK_EXTERNAL_MODULE__481__, __WEBPACK_EXTERNAL_MODULE__43__, __WEBPACK_EXTERNAL_MODULE__814__, __WEBPACK_EXTERNAL_MODULE__785__, __WEBPACK_EXTERNAL_MODULE__311__)

要するにself 上のコードの左下にエラーが発生します.トッスイニーズwindow 開始するオブジェクト

// line 17364 on lib.dom.ts (a part of ToastUI Editor)
declare var self: Window & typeof globalThis;

それで、それを修理する方法？

次.JSサポートimport() JavaScriptを無効にすることができます.
コードは次のようになります.

import React, { MutableRefObject } from 'react';
import dynamic from 'next/dynamic';
import { EditorProps, Editor as EditorType } from '@toast-ui/react-editor';
import { TuiWithForwardedRefProps } from './EditorWithForwardedRef';

const Editor = dynamic<TuiWithForwardedProps>(
  () => import('@components/ToastEditor/EditorWithForwardedRef'),
  {
    ssr: false,
  }
);

const EditorWithForwardRef = React.forwardRef<
  EditorType | undefined, // object type
  EditorProps // prop type
>((props, ref) => (
  <Editor {...props} forwardedRef={ref as MutableRefObject<EditorType>} />
));
EditorWithForwardRef.displayName = 'EditorWithForwardRef'; // throws error if not set

interface ToastUiEditorProps extends EditorProps {
  forwardedRef: MutableRefObject<EditorType | undefined>;
}
const ToastEditor: React.FC<ToastUiEditorProps> = (props) => {
  return (
    <EditorWithForwardRef
      {...props}
      ref={props.forwardedRef}
      initialEditType={props.initialEditType || 'wysiwyg'}
      height={props.height || '300px'}
      previewStyle={props.previewStyle || 'vertical'}
    />
  );
};

export default ToastEditor;

以下のコードは内部の右側のインポートされたものですEditor 変数.下のリンクでさらにヒントなどを見つけることができます.

import React, { MutableRefObject } from 'react';
// editor
import { Editor, EditorProps } from '@toast-ui/react-editor';
import '@toast-ui/editor/dist/toastui-editor.css'; // Editor's Style
// table
import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell';
// code syntax highlight
import Prism from 'prismjs'; // main library for coloring
import 'prismjs/themes/prism.css';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-python';
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
// 3 below for editor-plugin-color-syntax
import 'tui-color-picker/dist/tui-color-picker.css';
import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';
import colorSyntax, {
  PluginOptions,
} from '@toast-ui/editor-plugin-color-syntax';
// Korean lang
import '@toast-ui/editor/dist/i18n/ko-kr';

export interface TuiWithForwardedRefProps extends EditorProps {
  // using type ForwardedRef instead of MutableRefObject causes error when using useRef();
  forwardedRef?: MutableRefObject<Editor>;
  // type for color syntax - array of color strings
  colorSyntaxOptions?: PluginOptions;
}

const TuiWithForwardedRef: React.FC<TuiWithForwardedRefProps> = (props) => (
  <Editor
    {...props}
    ref={props.forwardedRef}
    usageStatistics={false}
    plugins={[
      [codeSyntaxHighlight, { highlighter: Prism }],
      [colorSyntax, props.colorSyntaxOptions],
      tableMergedCell,
    ]}
    // language={'ko-KR'}
  />
);

export default TuiWithForwardedRef;

フック2 .フックのプロップでaddimageblockhookを使うときのaltテキストに関する問題

画像をアップロードするときにALTテキストのスペースがあります.

そして、あなたがそれが「説明」に関連していると思うことができる機能が、ここにあります

type HookCallback = (url: string, text?: string) => void;

export type HookMap = {
  addImageBlobHook?: (blob: Blob | File, callback: HookCallback) => void;
};

とオプションtext プロップセットalt-text あなたがアップロードするイメージの.しかし、ポイントは、私がどこで私がタイプした記述を得ることができるかですdescription それを割り当てる空白text プロップ

それで、それを修正する方法？

答えは残りますtext プロップが空で、アップロードするときに置かれる記述はIMG要素に自動的に割り当てられます.

コンポーネントファイル内に埋め込む

したがって、コンポーネントファイルに埋め込む最終的なToastuiエディタコンポーネントは次のようになります.

const editorRef = React.useRef<EditorType>(); // ref hint

<ToastEditor
        forwardedRef={editorRef}
        initialEditType={'wysiwyg'}
        initialValue={'inital value is here'} // if you use placeholder then it causes an rendering error after pressing "insert code block" right after the editor is rendered
        height={'500px'}
        onChange={handleChange}
        hooks={{
          addImageBlobHook: async (fileOrBlob, callback) => {
            const uploadedImgURL = await uploadImg(fileOrBlob);
            callback(uploadedImgURL); // second argument is text which is optional, simply just ignore it
            console.log(uploadedImgURL);
          },
        }}
      />

この投稿で使用するパッケージバージョン

"@toast-ui/react-editor": "^3.1.3",
"@toast-ui/editor-plugin-code-syntax-highlight": "^3.0.0",
"@toast-ui/editor-plugin-color-syntax": "^3.0.2",
"@toast-ui/editor-plugin-table-merged-cell": "^3.0.2",
"prismjs": "^1.27.0",

あなたはそれが役に立つと思います.ハッピーコーディング!
TUI Editor Core
TUI Editor Github
PrismJS/prism
Joo Hee Kim's Medium post
yceffort blog - Korean