問題タブ [execcommand]

私はアプリケーション用の単純な RTE を作成しています。あまり複雑にする必要はないので、execCommands を使用するのが最善の解決策であると考えました。ただし、無効な HTML を作成するコマンドで問題が発生しました。これが私が使用しているjavascriptです。これを引き起こしている原因についての洞察は大歓迎です。

非常に基本的な WYSIWYG エディターを作成するために ExecCommand を使用しています。これは、将来のプロジェクトで作成する必要があるためです (したがって、CKEditor や tinyMCE のようなものについては教えないでください)。通常の使用ではすべて正常に動作します。ただし、iFrame よりも広い単語を入力すると、単語は分割されません。代わりに、スクロールバーが iFrame に追加されます。これが私の問題を示すビデオです: https://vimeo.com/42699618 だから、これを防ぐ最も簡単な方法は何だろう?

コードは次のとおりです。

Firefoxは新しい行を壊し<br>、ChromeとSafariは新しい行を壊し<div>...</div>、InternetExplorerとOperaは<p>...</p>新しい行に段落を使用しています。

新しい行に分割するときに、各ブラウザに段落のみを作成させる方法を探しています。

ckeditorがこの機能をサポートしていることは知っていますが、カスタムエディターで簡単に実現するにはどうすればよいですか？

Stackoverflow コミュニティの皆様

str.bold()テキストを<b></b>タグで囲む方法があります。これは、小さな WYSIWYG エディターに最適です (何百ものオープン ソース ソリューションのいずれかを使用する必要があると言う人もいますが、これは学習目的でもあります)。

問題は、テキストを太字にする方法です。

ここに私の試みがありますhttp://jsfiddle.net/Kxmaf/178/

あることは知っていますがeditor.execCommand('bold', false, '');、これはブラウザごとに異なる HTML 結果を生成しています。<b></b>、<i></i>、だけあればいい<u></u>

どんな助けでも大歓迎です:)

最近、Opera で execCommand() を使用する必要がありました。問題は、この関数で背景色 (またはテキストの色) を変更しようとすると、すべてが期待どおりに機能しますが、複数の色を混ぜると予期しない動作が発生することです。私が何を意味するかを理解するためにテストページを作成しました：

( jsfiddle での動作を参照してください)

したがって、最新バージョンの Opera で 2 つの色を混ぜてみると、私の言いたいことがわかるでしょう。

execCommand() を使用して、WYSIWYG エディターをゼロから作成しています。ユーザーがテキストを選択していないときに、書式設定ボタン (配置、太字、斜体、下線、色、サイズ、ファミリなど) を無効にしたいと考えています。

IFRAME 内にドキュメント コードがあり、IFRAME の外側にボタン/スクリプトがあります。iframe のドキュメント contentEditable を作成し、designMode をオンにしました。

テキストが選択されているかどうかを確認するにはどうすればよいですか?

可能であれば、ユーザーがテキストの配置のために DIV 要素内のどこかにカーソルを持っているかどうかを確認するにはどうすればよいですか? これを使用して、カーソルが既に太字のテキストなどの内部にあるかどうかを検出できると確信しています。

execCommand()と独自のドラッグアンドドロップJavaScript関数を使用してWYSIWYGエディターを作成しています。

該当する場合は、選択したテキストの名前とサイズを見つけられるようにしたいと思います。どうすればこれを正確に行うことができますか？

これを行うために関連する特定の機能はありexecCommand()ますか？

私が取り組んでいるプロジェクトでは、ユーザーが何らかの形式の HTML/javascript 入力内で入力するときに、テキストの自動書式設定を行う必要があります。現在、入力は contenteditable HTML 要素として実装されています。私がこれを処理していた方法は、keyDown を使用して追加する内容を決定し、execcommand を使用して、キー イベントにテキストを追加する前に適切なフォーマットを設定することでした。これは、Chrome、Firefox、および Safari で完全に機能します。しかし、私はIEでかなり奇妙な問題に遭遇しています。カーソルが編集可能なコンテンツの最後または最初にあるときに、選択範囲で execcommand を使用するか、その値を切り替えると、完全に機能します。問題は、何も選択されておらず、カーソルがテキストの末尾または先頭にない場合、execcommand は、現在のイベントによって追加されたテキストだけでなく、コンテンツ編集可能なすべてのコンテンツに影響を与えることです。

問題をかなり明確に示す簡単なコード例を次に示します。

基本的には、2 つの div 内の ap 要素であり、展開されると一緒に展開され、p 要素からの keyDown イベントに基づいてフォーマット状態が変更されます。キーが数字の場合は添字がアクティブであることを確認するだけで、そうでない場合はアクティブでないことを確認します。問題を再現する最も簡単な方法は、いくつかの数字を入力してから、矢印キーを使用してカーソルを元に戻すことです。私が見ているのは、矢印キーが数字キーではないため、添え字のexeccommandが呼び出されているため、最初の移動後、添え字付きのすべての数字が正常になることです。これを発生させる別の方法は、何も選択されていないテキストの途中でサブまたはサップ ボタンをクリックすることです。

理想的には、何が起こっているのかを理解し、何も選択されていない状態でフォーマットを切り替えてもすべてに影響を与えないようにする方法を理解して、この方法で物事を処理し続けることができるようにすることです。それが不可能な場合は、これを処理する方法の提案をいただければ幸いです。望ましい最終結果は、誰かがクリックしたときにポップアップする javascript/HTML のテキスト入力です。入力すると、テキストの内容と追加しようとしている内容を判断し、それに応じて出力をフォーマットし、カーソル位置を次のように維持します。テキスト入力は通常そうします。私は新しいブラウザーについてのみ心配しているので、HTML5 をサポートする主要なブラウザーの IE9 以降のバージョンです。

現在、私が思いつく最善のアイデアは、問題が発生している場合に keyDown でキー入力を飲み込み、DOM 操作を介して文字を挿入しようとすることです。

色を選択した後にexecCommandを呼び出そうとしています：

しかし、何も起こりません。execCommandを$（'＃output'）。html（c）に置き換えると、呼び出しが成功したことがわかります。

例： http： //jsfiddle.net/YQQXV/12/

ColorPickerプラグインページ

WYSIWYGエディターのテキストを太字にするためにexecCommandを使用していました。コマンドは正常に機能していましたが、Firefox14.0.1では何らかの理由で機能しなくなりました。何が起こるかというと、私がテキストを持っていて、それを太字にして保存すると、次のようなものが得られます（これは私が欲しいものです、これまでのところそれは大丈夫です）：

問題は、太字を削除するためにテキストを再度選択すると、Firefoxがfont-weight属性を認識しないため、テキストにbタグが再び追加されることです。これは、Firefox 10、Chrome、IEなどでは発生しません。そこでブラウザはフォントの太さを理解して削除します。

だから私の質問は、誰かがそれについて何か知っているかどうかです。

前もって感謝します