編集をスクリーンに貼る

トースト編集モジュールからインストールを開始します.
JSの他に、反応素子として発売されているモジュールも取り付けました.

npm install --save @toast-ui/react-editor
//리액트 버전으로 인한 에러 발생 시 다음 명령어로 설치
npm install --save @toast-ui/react-editor --legacy-peer-deps

これで18バージョンに関連するエラーが発生しました.18版のエラーに対しても検索が出ず、端末によるとapiサポートに降格した反応は17.0.1版だった.
craインストール後のバージョンダウン:

npm install --save react@^17.0.1 [email protected] 

その後トースト編集モジュールを取り付け、成功しました.
反応バージョンを下げて開発すべきだ.
また、このモジュールにはCSSファイルがないため、toastui-editorです.@toast-ui/editorからcssをインポートする必要があります.

import '@toast-ui/editor/dist/toastui-editor.css';

編集コンポーネントは、編集ウィンドウに追加されたフォントボールの作成、リストポイントの印刷など、さまざまなオプションがエディタコンポーネントに配置されます.

import { Editor } from '@toast-ui/react-editor';

編集オプション(サイズ、表示ボックス値、スタイル、編集タイプなど)は、Editorと呼ばれる構成部品に下げることができます.

const MyComponent = () => (
<Editor
initialValue="hello react editor world!"
previewStyle="vertical"
height="600px"
initialEditType="markdown"
useCommandShortcut={true}
/>
);

エディタにツールバーメニューなどを追加し、apiドキュメントで提供されているapiを使用する場合はgetInstance()を使用する必要があります.useref()を使用してエディタへの参照値を取得します.

class MyComponent extends React.Component {
editorRef = React.createRef();

handleClick = () => {
this.editorRef.current.getInstance().exec('Bold');
};

getRootElement()を使用して、エディタを囲む要素を取得します.

editorRef = React.createRef();

handleClickButton = () => {
this.editorRef.current.getRootElement().classList.add('my-editor-root');
};

編集にアクティビティを追加する場合は、キャラメルボックスでアクティビティ名を書きます.on(活動名)形式です.

class MyComponent extends React.Component {
handleFocus = () => {
console.log('focus!!');
};

render() {
return (
<Editor
previewStyle="vertical"
height="400px"
initialEditType="markdown"
initialValue="hello"
ref={this.editorRef}
onFocus={this.handleFocus}
/>
);
}
}

onFocus:エディタをクリックすると自動的にハイライトされます.
エラーnpm startを表示すると特定のファイルがなく、npm startスクリプトを変更すると以下のようになります.

"scripts": {
"start": "GENERATE_SOURCEMAP=false react-scripts start",
...
},

リファレンスによれば、反応スクリプトバージョンの問題かもしれない.
編集が画面に表示されます!
デフォルトのダウンスケール構文が使用されています.

ダウンロード形式のタグ付きデータをサーバに直接送信するには、次の手順に従います。

ただし、問題は、サーバにダウンロードして送信することです.
さらにトースト編集を探してみると、タグのテキストを抽出できる組み込みメソッドgetMarkdown()があります.

const editorRef = useRef();
editorRef.current.getInstance().getMarkdown()

このような確認はコンソールで行えます.

スクリーンでスケールダウンデータをレンダリングするにはどうすればいいですか?

タグを抽出してダウンロードした後、postリクエストとしてサーバに直接送信します(バックエンドユーザと話をする必要があります...)
後で投稿全体がサーバから受信されます.ただし、低タグの構文を画面に沿ってレンダリングすることはできません.変換されていないツールを探していると、ダウンロードタグが見つかります.トーストエディタapiの公式ドキュメントを見ると、ダウンスケール解析器を使用してプレビューをサポートしていることがわかり、関連するモジュールを検索しました.
私が調べたモジュールはmarkdown-itです.

//설치
npm i markdown-it

//모듈 불러오기
import markdownIt from "markdown-it";

使用方法は以下の通りです.

<div dangerouslySetInnerHTML={{
          __html: markdownIt().render(text),
        }}
      ></div>

危険なSetInnerHTMLはDOMを用いたinnerHTMLメソッドの属性であるが,開発時に悪意のあるスクリプトを意図的に植え込む場合に対応できないという問題がある. したがって、悪意のあるスクリプトをより安全なコードに変換する必要があります。これを消毒といいます。たとえば、ラベルの先頭は<表示>で、表示は同じ方法で置き換えられます。 not to use危険SetInnerHTMLを検索し、関連モジュールも検索しました。 DOMPurifyモジュールを使用できます。 npm i dompurify import DOMPurify from 'dompurify'; 使用方法 import dompurify from 'dompurify'; function MyComponent() { const title = response.from.backend.title; const sanitizer = dompurify.sanitize; return <div dangerouslySetInnerHTML={{__html: sanitizer(title)}} />; // Good } let clean = DOMPurify.sanitize(dirty); 受信した文字列を//dirtyに入れると、clean変数に安全なHTML式が割り当てられます。 (HTML、SVG、および数式のMATHMLをサポートする既定のオプションです。) //使用例 DOMPurify.sanitize('<img src=x onerror=alert(1)//>'); // becomes <img src="x"> その上で練習した最終コード! import "./App.css"; import "@toast-ui/editor/dist/toastui-editor.css"; import { Editor } from "@toast-ui/react-editor"; import markdownIt from "markdown-it"; import DOMPurify from "dompurify"; import { useRef, useState } from "react"; function App() { const editorRef = useRef(); const [text, setText] = useState(""); const sanitizer = DOMPurify.sanitize; const handleClick = () => { setText(editorRef.current.getInstance().getMarkdown()); console.log(「起動済み」,text); console.log(markdownIt().render(text)、「タグ」; }; const handleFocus = () => { console.log("focus!!"); editorRef.current.getRootElement().classList.add("my-editor-root"); }; return ( <div className="App"> <Editor initialValue="hello react editor world!" previewStyle="vertical" height="500px" minHeight="200px" initialEditType="markdown" useCommandShortcut={true} ref={editorRef} onFocus={handleFocus} /> <button onClick={handleClick}>書く</button> <div dangerouslySetInnerHTML={{ __html: sanitizer(markdownIt().render(text)), }} ></div> </div> ); } export default App;

スクリーンに字が書けるかどうか見てみましょう。

上はgetMarkdown()関数を実行した結果の値で、下はmarkdownIt()です.レンダーされた値.
サーバリクエストコードは作成できませんが、usStateを使用してテキスト値をステータスに維持し、画面に表示します.Code Sniftについてはpreタグを使用しているのでAppです.cssファイルに関連するプロパティが設定されています.

/* 코드 스니펫 영역 */
pre {
  padding: 0.5rem;
  background-color: rgb(233, 233, 233);
  font-size: 10px;
  border-radius: 5px;
}
/*스니펫 영약 내 코드*/
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

スクリーンの合成

書き込み結果画面

げんかい

残念ながら、チェックボックスは変換できません

イメージ接続後にサーバを送信しますか?

https://gareen.tistory.com/49

レンダリングサーバが受け取った画像とテキスト?

getMarkdown()のおかげで、画像もとても良い効果が得られました.サーバ転送方法に注意すればよい.