問題タブ [contenteditable]

私は現在、編集ページがレンダリングされたページとまったく同じように見えるクライアント用の CMS の構築に取り組んでいます。

contenteditableしたがって、iframe ベースの WYSIWYG は必要ありません。Firefox と Webkit の違いを解決するラッパーを探しています。

たとえばEnter、Firefox でキーを押すと<br/>タグが生成されますが、Webkit で同じイベントを実行すると<div>タグで囲まれます。

編集者への提案がない場合は、この問題の解決を手伝ってもらえますか? onkeyup最初に修正した方法は、イベントをチェックしてからexecCommand「元に戻す」を使用してからinsertHtml <br/>を使用することでした。

それは問題なく動作しますが、問題は、ユーザーがリスト内にいて、Enter キーを押した場合、次のリスト要素が作成されることを期待しているが、最終的に改行が発生することです。<br/>挿入動作をスキップできるように、Enter キーが発行されたときにキャレットの位置を検出するにはどうすればよいですか?

<br/>理想的には、テキスト ブロックを SEO 目的でタグにカプセル化することさえ望まないのです<p>が、それも解決できませんでした。

どんな助けでも大歓迎です！

このコードに問題があります：

Chrome 4/5/6 では問題なく動作しますが、FF (3.6.) または Opera (10.60) では動作しません。

FF では、次の例外がスローされます。

エラー: キャッチされない例外: [例外...「無効または不正な文字列が指定されました」コード:「12」nsresult:「0x8053000c (NS_ERROR_DOM_SYNTAX_ERR)」場所:「http://www.www.com/js/script.jsライン: 51"]

なぜこれが起こっているのか、それを修正する方法を知っている人はいますか?

現在、この修正を使用していますが、 contentEditable 属性が残り、サーバー側でクリーンアップする必要があるため、クリーンなソリューションではありません。

designMode iframe ではなく contentEditable を使用する WYSIWYG エディターのリストを探しています。

これが必要な理由は、サイトにユーザーが編集できるいくつかの領域 (div) が必要であり、スタイリング (フォント、フォントの色など) が必要だからです。編集領域で通常と同じように表示されます。WYSIWYG の iframe にスタイルシートを適用する必要はありません。

軽量で無料/オープンソースのものを知っている人はいますか?

IE8 で失敗する WYSIWYG JavaScript ベースの HTML エディターをデバッグする必要があります。IE でのみ使用するように設計されているため、ソリューションが簡素化されます。失敗している既存のコードは次のとおりです。

基本的に何が起こっているかというと、テキストを選択してinsert imageボタンをクリックすると、最初にこのisAllowed関数が実行され、選択したテキストが編集可能かどうか (つまり、ContentEditable である iframe 内) が確認されます。これは IE8 の atまたは
で壊れているようです。document.selectioncreateRange()

問題は、マウスでテキストを選択せず​​に編集可能領域のどこかをクリックするsel.createRange().parentElement()と、iframe の外側の要素を返すように見えるため、ContentEditable ではなく、関数がfalseを返すことです。

この動作の原因となる選択と範囲の IE8 の実装で何が変更されたかについて、誰かが何か洞察を与えることができるかどうか疑問に思っていますか?

テキスト入力として機能するようにcontenteditableがtrueに設定されたdivがあります。現在、通常、一部のテキストがdivの終わりに達すると展開されますが、divのサイズを変更すると、これは発生しなくなります。ブラウザはこれ以上これを行いません。サイズを自動に変更してから高さを設定しようとしましたが、どちらも役に立ちませんでした。

それについて私を助けてください。ありがとう。

jwysiwygjqueryRTEをカスタマイズしようとしています。画像が編集可能領域に挿入されると、ユーザーがそれを選択すると、モーダルウィンドウまたはプロパティパネルが表示され、ユーザーが幅/高さなどを編集できるように、画像属性エディターを構築したいと思います。Gmailに似ています。画像挿入UI。

問題は、必要な画像クリックイベントを処理する方法を見つけるのに苦労していることです。誰かが私がどこから始められるかについてのいくつかのサンプルコードまたはいくつかの情報を知っていますか？

Facebook のステータス入力のような類似の入力は用意されていますか? つまり、彼らは contenteditable div を使用しており、それをすべてかなり適切にラップしています。彼らはそれを（フォーカス/ぼかしで）サイズ変更でき、単語の折り返しと展開を続けます。また、入力にラップできない非常に長い単語を入力すると、div内にとどまり、他の単語と重なりません近くの要素..

contenteditable divでこれら2つのことを行うのを手伝ってください。または、準備ができていることを知っている場合は共有してください。

ありがとう。

PS私は怠け者ではなく、自分でやろうとしました。オーバーラップを止めることにほぼ成功しましたが、高さのサイズ変更後に div を contenteditable (word-wrap、expandable) のままにすることはできませんでした。また、Facebook がどのようにそれを行っているかを自分で理解しようと考えましたが、初心者が自分のコードを理解するのは非常に困難です。

私は持って<div>いますcontentEditable="true"。

編集可能なdiv内にコンテンツをコピーして貼り付けると、貼り付けられたテキストが多くの不要なCSSにラップされます。

たとえば、次のように <p>text text</p> なります。

ブラウザ（現在の場合はGoogle Chrome）がスマートですべてを目指していることは理解していますが、最終的にはまったく無関係で不要なCSSになります。

これを生成しないようにWebKitベースのブラウザーに指示する方法はありますか？

contentEditable スパンにリンクを作成するための jQuery ダイアログがあります。問題は、ボタンをクリックしてダイアログを開くと選択が失われ、ダイアログ内にテキストを入力すると選択が失われることです。

-moz-user-select:none; でボタンを修正できます。ただし、-webkit-user-select:none は Chrome では機能しません。

入力をiframeでラップすることで修正できますが、それは面倒で、他の場所をクリックすると、ダイアログをドラッグするなど、選択が強制終了されます。

How to preserve text selection when opening a jQuery dialogで解決策を見てきましたが、多くのブラウザーでは contenteditable 要素では機能せず、実際の入力のみで機能します。

私の問題に対する良い解決策はありますか？

私は何をしたいですか？

のように機能する div が必要です。divtextarea内のものを編集したり、画像などをプレーンテキストだけに貼り付けたりする機能は必要ありません。

例

www.facebook.com - 最良の例は、 facebook のニュースフィードです。

なぜこの方法が必要なのですか？

フェイスブックのニュースフィードをチェックしてみると、投稿を書いたり、エントリーをたくさんしたりすればするほど、投稿できる範囲が広がっていくのがわかります。

これは、textarea ではそれができないため、contentEditable で div を使用したいのと同じ理由です。#

JQUERYのみのJAVASCRIPTは使用しないでください