ピットへのckeditor-tripの使用

Ckeditor

基本的な紹介

CKEditor 5 Buildsは、すぐに使用できるリッチテキストエディターのセットです。
この使用の背景は、このプロジェクトの製品のコストを考慮して、既存のリッチテキストエディタ製品（以前はWebofficeの商用料金を使用していたプロジェクト）の置き換えに基づいています。

基本的な使い方の紹介

ほとんどの新機能が公開される前に、私たちがよく行うことは、既存の効果が既存の製品機能を満たすことができるかどうかを確認するためにデモを作成することです。
ckeditor5公式サイト
始める方法は、関数を理解するためのcndメソッドを導入することです。2つ目は、生成メソッドを使用することです。この期間中に関数が必要な場合は、npm関連のプラグインが使用され、圧縮パッケージに組み込まれます。参考までに、CKEditor5Githubの公式ダウンロードからダウンロードすることをお勧めします。CKEditor5には複数のバージョンがあり、githubからダウンロードしたckeditor5-build-classicバージョンを使用しました。

ユースケース

公式ウェブサイトのドキュメントを理解するには、公式チュートリアルを入手する方法が3つあります。CDN、npm、およびZipダウンロードです。

1.最初にcndを使用して理解する

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>CKEditor 5 – Classic editor</title>
   // cdn 引入
   <script src="https://cdn.ckeditor.com/ckeditor5/23.1.0/classic/ckeditor.js"></script>
</head>
<body>
   <h1>Classic editor</h1>
   <div id="editor">
       <p>This is some sample content.</p>
   </div>
   <script>
   // 创建关元素标签
       ClassicEditor
           .create( document.querySelector( '#editor' ) )
           .catch( error => {
     
     
               console.error( error );
           } );
   </script>
</body>
</html>

ブラウザを開くと
ここに画像の説明を挿入
、タイトル、太字、斜体、リンクなどの機能が表示されます
。2。オンライン生成の方法を使用します。
公式Webサイトの手順に従い、例としてクラシックバージョンに従い

ます。クラシックモードを選択します。
ここに画像の説明を挿入
ここで、必要なものを選択できます。関数項目の

場所を追加および調整します。

簡体字中国語を選択することを忘れないでください。

最後に、オンライン生成とパッケージ化を実行します。
ここに画像の説明を挿入
ファイルを開いた後、ファイルに導入されたckeditor.jsがパッケージ化されます。。

プロジェクトに他の機能が必要な場合は、コンポーネントのインストールが必要です

npm --save–dev @ ckeditor.xxxx
package.jsonが正常にインストールされた後、関連するコンポーネントが非圧縮のckeditor.jsに導入され、使用されていることを確認します。
構成後の状態については、npm run buildをパッケージ化して使用することを忘れ

ないでください。または、githubライブラリでアプリケーションのクローンを作成することもできます。