問題タブ [rangy]

chromeの「plaintext-only」の動作でcontenteditabledivを作成しようとしています。したがって、ユーザーはプレーンテキストのみを入力でき、リッチテキストをコピーする場合はプレーンテキストとして貼り付けられます。私のスクリプトでは、@-メンションはボタンに変換され、Rangy.jsを使用して追加されます

通常のコンテンツ編集では、divのリッチテキストを貼り付けることができ、それを通常のテキストに変換する必要があります。唯一の問題は、貼り付けられたものを検出し、それをテキストに変換して正しい位置に挿入し、ニンジンの位置を復元した後です。より多くの行でより多くのテキストが選択されると、さらに困難になります。

私は難しいと思いますか、そしてもっと簡単な解決策はありますか？または、誰でも最も軽量なエディターを提案できますか？

ありがとう！

カレットを特定のインデックスに設定するための次のコードフラグメントがありますindex

contentEditableに入力要素を追加すると、問題が発生します。これ以上、ケアレットdivを目的の位置に一貫して設定できなくなります。

これらの入力をdiv内の1つの位置として扱いたい（まるで1つの文字であるかのように）。

これとは別に、このcontentEditable内の選択範囲divを自分のテキストに置き換えるには、同様のコードが必要になります。これを機能させる方法を理解するために、私は（まったく）怒りに精通していません...

すべての助けは大歓迎です！

これがあなたがおもちゃにできるフィドルです：

http://jsfiddle.net/ee93P/

私が取り組んでいる Web アプリケーションで奇妙なバグに遭遇しました。Chrome と Safari では再現できましたが、Firefox では再現できませんでした。

バグを確認するには、www.lastcalc.comにアクセスして、大文字を 1 文字入力してください。文字は、DIV.question (contentEditable が true に設定された DIV) の「keydown」イベントのリスナーを介して、白い「ボタン」CSS ですぐに強調表示されます。これは、locutus.js の highlightSyntax 関数によって実行され、Rangy ライブラリに依存して、強調表示中にカーソル位置を追跡します。

ここまでは順調ですが、ここで [削除] をクリックします。突然、Safari で次の構造が表示され、中央の br 要素にカーソルが置かれます (視覚的にテキストは中央に配置され、色 #606060 を取得します)。

Chrome では少し異なります。

私の知る限り、これらの要素を作成するコードは何もありませんが、表示されます。私のコードで #606060 色が言及されている唯一の場所は、バックスペースを押したときに削除される「スパン」要素に割り当てられたクラスである「白」クラスの定義の highlighting.css にあります。

ここで何らかのブラウザブードゥーが起こっているようですが、それはどういうわけかうまくいかないようです-誰かがこれに光を当てることができますか?

追伸。この Web サイトが何であるか疑問に思っている人は、ここで詳細を確認できます。

編集: いくつかのグーグル検索の後、これは webkit のバグである可能性があるように思われるため、問題は次のとおりです。

私は、入力された文字間の時間を視覚化したい小さな実験的なエディターに取り組んでいます。したがって、JavaScriptとcontenteditable divを使用して、すべての文字をSPANとタイムスタンプ属性でラップしています。私はrangyの助けを借りて小さな関数を構築します：

今、私はこの概念で2つの問題に直面しています。そこでは、いくつかの助けをいただければ幸いです。

a。上記の関数を使用すると、出力は次のようにネストされたスパンで終了します。

b。上記の関数を実行できたとしても、コピー＆ペーストまたはドラッグアンドドロップアクションは、ネストされたスパンで終了する可能性があります...そしてそれを回避する方法があるのでしょうか？

ありがとう、アンドレアス

これが私が達成しようとしていることです: ユーザーがマウス、キーボード、またはタッチを使用して「myDiv」内のテキストを選択する場合、HTML の 3 つの目立たないチャンクを取得したい: 選択前の HTML (その「左」) )、選択範囲内の HTML、および選択範囲の後の HTML (その「右側」)。html は、myDiv.innerHTML で表示されるようにする必要があります。

選択は、タグ ペア内で開始または終了する場合があります (つまり、分離された選択は、必ずしも有効な HTML であるとは限りません)。選択範囲内の絶対位置要素のような特別なシナリオを扱う必要はありません。私が関心を持っているすべての選択は、strong、em、ul、ol、h1、image、および table などの基本的なタグを含む 1 つの div に制限されます。

最も近いのは、rangyを使用して選択範囲を引っ掛け、呼び出しselection.getRangeAt(0).cloneContents()て選択範囲の HTML を取得することです。これは、単独では無効な選択を行うまでは十分に機能し、ブラウザーはドキュメントフラグメントの HTML を変更して有効なマークアップにします。

追加情報:これが必要な理由は次のとおりです。

ドキュメント フィードバック システムを作成しているので、後で検索して再構成できるように、選択情報をデータベースに保存する必要があります。通常、DOM パスと選択したテキストを使用して選択内容を保存しますが、保存と再構成の間でテキストが変わる場合があります。たとえば、作成者は段落全体を移動したり、セクションを削除したりする場合があります。その場合、DOM パスはほとんど役に立たなくなります。

したがって、私の (不完全な) 計画は、選択範囲を [offset, length, html_snippet] として保存することです。それが「ポジション」です。また、選択したテキストの直前と直後にある HTML スニペットも保存します。これが「文脈」です。

これらのデータを組み合わせて使用​​すると、最初に選択したテキストが移動したり部分的に変更されたりした場合でも、ほとんどの場合、そのテキストを再配置できるはずです。それが失敗した場合、UI には対処する方法がありますが、できるだけ頻繁に発生しないようにしたいと考えています。

ありがとうございます！

Google Chrome 拡張機能で Rangy を使用しようとしていますが、「モジュール 'WrappedSelection' はサポートされていません」というエラーが表示され続けます。これは最低限の拡張機能であるため、Rangy 以外のコードをこのプロジェクトに実装していません。

Rangy が Google Chrome 拡張機能と互換性があるかどうか知っている人はいますか?

Chrome で Rangy を使用しようとしていますが、Serializer および WrappedSelection モジュールが Chrome でサポートされていないようです。Rangy を適切に init() しなかったのか、それとも他の間違いを犯したのかはわかりません。console.log(rangy.modules) を実行したところ、Serializer と WrappedSelection がサポートされていないことがわかりました。

空の Chrome エクステンションを作成しました。manifest.js には、必要な 7 つの Rangy js ファイルと jQuery.js が含まれています。以下は私のscript.jsの内容です：

編集可能なdivのコンテンツのテキストを変更する簡単なテストを作成しました。html構造は変更されていますが、テキストは同じです。

私はこのように怒りを試しました：

しかし、それはエラーを報告します：

乱暴な警告：モジュールSaveRestore：マーカー要素が削除されました。選択を復元できません。

rangyは上記の機能をサポートしていますか？はいの場合、どのように使用すればよいですか？いいえの場合、それを実装するにはどうすればよいですか？

更新：私のシナリオでは、テキストが非常にリッチなスタイルにフォーマットされるため、すべてのinnerHTMLを置き換える必要があります。しかし、私の場合、テキストはスタイルがなくても常に同じです。選択とキャレットの位置を記録して元に戻す方法はありますか？どのようなAPIを使用する必要がありますか？

私は、WebKit で静的 HTML を表示し、ユーザーがテキストを選択して強調表示できるビューアー アプリケーションに取り組んでいます。

私のアプローチは、静的な HTML ドキュメントをそのまま維持し、ハイライトを別の場所に保存することでした。Rangyは、選択内容をシリアル化して保存し、アプリケーションが再び起動したときに再適用できるようにするのに最適です。

ただし、CSS Class Applier Rangy 拡張機能を使用して強調表示されたセクションをマークすると、ドキュメントの DOM 構造が変更されるため、以前にシリアル化されたすべての範囲が無効になります。

DOM 構造を変更せずに CSS クラスをユーザー選択に適用することは可能ですか?

どうもありがとう！