web-dev-qa-db-ja.com

CKEditor 5-HTMLを挿入する方法（別名、ソースモードはどこですか）？

WYSIWYGからプレーンHTMLに切り替えられるようにしたい。 YoutubeビデオでIFrameを挿入します。これまでのところ、標準のCKEditor 5ビルドでは、それを行う方法に関するドキュメントはありません。

ソース編集領域 プラグインに相当するものはありますが、CKEditor 5用ですか？

javascriptckeditorckeditor5
13
Marek Urbanowicz

あなたの質問は2つの複雑なトピックに触れています：

  • ソースモードが一般的に意味があるかどうか。
  • CKEditor 5へのHTMLの入力（および編集）を許可できるかどうか。

それらはすでに "ソースの表示"モード および "マークアップを保持し、削除しない方法" CKEditor 5のGitHubのチケットで既に説明されていますが、私は試してみますここですばやく説明します。

ソースモードは意味がありますか？

あんまり。 HTMLを知っていて、HTMLを手動で確実に編集できる少数のグループにとっては理にかなっていますが、なぜリッチテキストエディターを使用するのでしょうか。

でも問題ないと言ってもいいですか？パワーユーザーのみがHTMLを編集します。残りはWYSIWYGモードを使用します。しかし、ここで別の問題が発生します。エディターに任意のHTMLを挿入し、他のユーザーがWYSIWYGモードでそれを編集しようとしました。ただし、これはエディターが理解できないHTMLであるため（それを処理する機能がないため）、時間の経過とともに破壊される可能性が非常に高くなります。これらのHTMLのblobは分割、太字、折り返し、誤ってコピーおよび貼り付けなどされます。ソースモードは、そのblobを編集するための適切なUIがないため、もう一度使用すると便利であると言えます。手動で修正してください。しかし、待ってください。リッチテキストエディターが嫌いな理由は、これだけではありませんか。

アナロジーを通してこれを見てみましょう。リッチテキストエディターは、一部のデータ（この場合はHTML形式）を編集するためのインターフェイスにすぎません。同様に、CMSはデータベースを編集するためのインターフェースです。では、通常のユーザーにデータベースへの直接アクセスを許可しますか？ mysqladaminを使用してデータベースに製品を手動で追加しますか？私はそうは思いません。通常のユーザーにとっては便利でも安全でも理解できません。

したがって、HTMLを手動で編集しないでください。 CMSが機能を見逃している場合は、機能を追加するだけです。リッチテキストエディタでも同じことを行います。また、このHTMLの意味とその処理方法を教えていない場合でも、手作りのHTMLを台無しにしたと非難しないでください。

"ソース表示"モード をお読みになることを強くお勧めします。これは、多くの興味深いトピック（たとえば、構造化コンテンツとは）に触れたためです。

CKEditor 5にHTMLを入力することはできますか？

いいえ、ここで自己紹介します。

CKEditor 5はカスタムデータモデルを実装します。このモデルにデータをロードするには、エディターでサポートするコンテンツの各部分について、ビュー->モデルコンバーターが必要です。次に、このコンテンツを編集可能にするには、モデル->ビューコンバーターが必要です（編集のためにエディターでレンダリングする必要があります）。最後に、スキーマを構成し、Enterなどの特定の機能をカスタマイズして、エディターにロードしたこのコンテンツの意味とその変更方法を知らせる必要があります。

言い換えると、データモデルのために、機能は、それが処理する特定のコンテンツ（タグ、属性など）のライフサイクル全体を実装する必要があります–データの読み込みから、編集のためのレンダリング、自分自身とデータの編集まで検索。

ソース： https://github.com/ckeditor/ckeditor5/issues/705

新時代

時代は変わった。私たちは何年もの間、リッチテキストエディターの使用方法を開発者に教育しようとしましたが、Webサイト全体の編集に使用されているWYSIWYGの暗い時代は、人々の心の中で強いままでした。

CKEditor 5では、データモデルと、開発者に統合の再考を強いる全体的なアーキテクチャにより、任意のHTMLを編集するオプションはありません。同時に、データモデルと完全に新しいアーキテクチャの存在により、編集機能の実装が非常に簡単になり、最終的にこの仕事に本当に近づくことができます。確かに無料ではありませんが、最終的な効果もはるかに良くなります。

2
Reinmar

はい、htmlをCKEditor5に挿入することができます。

  insertHTML(html:string) {

    // See: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/faq.html#where-are-the-editorinserthtml-and-editorinserttext-methods-how-to-insert-some-content
    const viewFragment = this.editor.data.processor.toView( html );
    const modelFragment = this.editor.data.toModel( viewFragment );
    this.editor.model.insertContent(modelFragment);
  }
0
Roger