Stack : Next.js, Typescript, Emotion

概要

WYSSIWYG編集では、TinyMCE編集がプロジェクトに導入され、ユーザーがラベルなしで簡単に投稿を書くことができます.TinyMCE編集の利点を理解し、必要に応じてメニューバーと機能をカスタマイズします.

レビューの編集:なぜTinyMCEを選択したのですか?

WYSSIWYG編集は、ユーザが編集画面に入力した文字であり、内容は最終生成物が画面に出力する編集である.オペレーティングシステム上で実行されるデスクトップベースのエディタと、Web上で実行されるJavascript-baseエディタに分けられます.Javascript-baseエディタとしてCKeditor、tui-editorなどがありますが、TinyMCEを選択したのは、まずプロジェクトのバックエンドサーバをStrapiとして構築し、StrapiがTinyMCEを使用しているためです.他の軽量エディタよりも重い機能を持つという欠点があるが、Evernote、Medium、Atlasianなど多くのWebサービスがTinyMCEを使用しているため、プロジェクトに導入されている.

適用方法

apiキーのリリース

ライブラリを説明するには、apiキーを公式サイトにアクセスする必要があります.IDを1つ作成するとapiキーが得られます.

取付

yarn add @tinymce/tinymce-react

アプリケーション

api鍵

import { Editor } from '@tinymce/tinymce-react';


const TinyMceContainer = () => {
  return(
    <Editor 
     id = 'tinyEditor',
     apiKey = '발급받은 api key',
	 init={{ .... }},
    >
);
}

ツールバーオプションのカスタマイズ

以下はカスタマイズに関するTinyMCE公式ファイルです.
ツールバー
https://www.tiny.cloud/docs/advanced/available-toolbar-buttons/
化粧水
https://www.tiny.cloud/docs/advanced/creating-a-skin/
アイコン
https://www.tiny.cloud/docs/advanced/creating-an-icon-pack/
ローカルアップロード
https://www.tiny.cloud/docs/demo/local-upload/
ツールバーをカスタマイズするためのコードを簡単に作成しましょう.
まず、TinyMCEのデフォルトでは、次のツールバーがあります.

ただし、プロジェクトの範囲内で不要なオプションがあるか、UIのツールバーを簡略化したい場合があります.
正式な書類を表示すると、使用可能なツールバーオプションが表に表示されます.


下線とフォントの色を変更する機能のみを保持および除去する場合は、次のコードを記述します.

import { Editor } from '@tinymce/tinymce-react';

  return(
    <Editor 
      id ='tinyEditor',
      apiKey ='발급받은 api key',
      init = {{ 
        menubar: false,
        toolbar:'underline | forecolor',
    	...
      }},
    />
);

ツールバースタイルのカスタマイズ

アイコンや外観のほか、色、余白、塗りつぶしなどのツールバーメニュースタイルを変更したい場合があります.

まず編集の基本スタイルは肌ですcssという名前のファイルでクラス名を使用します.したがって、スタイルを変更する場合は、親コンポーネントを作成した後、スタイルに同じクラス名を付けることができます.しかしオーバーラップクラスは明示図に追いつかないため!importantを用いた.カラーボタンにピンクの背景色を追加する場合は、適用する要素のclass名を確認し、次の手順に従ってコードを記述します.

<TestEditorContainer>
   <Editor 
      apiKey ='발급받은 api key',
      init = {{ 
    	...
      }},
    />
</TestEditorContainer>

return (
  const TestEditorContainer = styled.div`
    & .tox-split-button {
      background-color: pink !important;
    }
  `
);

入力値の抽出

TinyMCEエディタのpropsインタフェースを表示すると、onEditorChangeに関数を渡して入力値を返すことがわかります.
コンソールでテストすると.

import { Editor } from '@tinymce/tinymce-react';
import { useState, useEffect } from 'react';

const [text, setText] = useState('');

useEffect(() => { console.log(post); }, [post]);

return(
<Editor
	onEditorChange={setText}
/>
);

入力値が受信されたことを確認できます.reactプロジェクトに適したガイド人およびさまざまなサンプルコードを正式なドキュメントとして提供します.詳細な説明が必要な場合は、ホームページにアクセスすることをお勧めします.