javascript - Wysiwyg エディター: チェーン内の少数のエディターとエディターの高さ制限

Question

JavaScript の wysiwyg エディターについて質問があります。

1.チェーン内のいくつかの wysiwyg エディターをリンクする必要があります。

つまり、しばらくすると (文字または高さ制限)、カーソルが次のエディターにジャンプするはずです。そして、次のエディターがすでにいっぱいになっている場合、カーソルは最初のシンボルの前にジャンプ (フォーカス) する必要があります。ユーザーがテキストを削除した場合も同様です。列レイアウトのAloha editor demo のようなもの。しかし、チェーン内のエディターは異なるレイアウトで異なる位置にある可能性があるため、これを使用することはできません. 例えば：

2.エディターの高さ制限を設定するにはどうすればよいですか? たとえば、エディターの高さが特定の値に達した場合、ユーザーはテキストを追加できませんでしたが、削除できましたか? 私はすでにこれを実装していますが、大きな問題が 1 つあります。

エディターの高さ制限に達しましたが、ユーザーはリスト内の任意の行にテキストを追加できます (矢印でマーク)

これは、どの wysiwyg エディター (TinyMCE、Alloha、CKEDITOR) を使用するかは問題ではありませんが、上記で説明したすべてを実装できるはずです。

Answer 1

それは取り組むべきことがたくさんあります。そのすべて (特に PDF 生成) を実行できるエディターはありません。エディターを特定のサイズにロックし、コンテンツがそれらのサイズの外側で作成されないようにする確実な方法は私が知っているものではありませんが、私がそれに取り組む方法は次のとおりです。

すべての要素を必要な正確な寸法 (上記のモックアップのように) に配置およびサイズ設定してページを作成し、各要素を個別に編集できるようにします (この例では CKEditor を使用します)。

次に、スタイルを に設定しoverflow: hiddenます。これにより、ユーザーは引き続きコンテンツを作成できますが、ボックスの寸法の外側にあるものはすべて非表示になります。次に、コンテンツをレンダリングすると、次のようになります。

• すべての要素に最大高さを設定する
• 同じように設定して、overflow: hidden表示したくないコンテンツを非表示にします。

これは確かにハックですが、問題を解決する簡単な方法です。