2013-08-04 8 views
6

警告:私はcontenteditable要素の変化をリッスンイベントを持つことができます知っているcontenteditableの特定の変更を聞く?

を読んで、既存の質問と重複しません。

は、が何であるかを知ることができます。例えば

  • は、 "これは文である。" 挿入しました位置Xで<strong>

とYにXからフォーマットされた

  • をYに位置Xから削除
  • が可能ということですか? (私はを意味差分を取ることによって以外


    この理由は、例えば、マークダウンのために、HTML以外の言語のWYSIWYGエディタを作ることです。

    だから、(HTMLからMarkdownに行く必要はなく)Markdownソースに変更を適用したいと思います。

  • +0

    、それは間違いなく誰かがどうなるのかの実際の例を明確にする助けと何」でしょう彼らがそれをするべきかどうか、そして最も重要なのはなぜそうしようとしているのか。 – John

    +1

    @ジョン実際の世界の例を挙げました。これはMarkdownのWYSIWYGエディタです。 –

    +0

    MarkdownのためのWYSIWYG?私は一度HTML-> MD変換器を実装しようとしました(すでに素晴らしいパーザーを持っていましたが、私はMDライターしか必要ありませんでした)、それはMDが貧弱なために無意味なプロジェクトになりました。 WYSIWYG(HTMLモード)とソースモード(MD出力)をプロのプロジェクトに十分に同期させることは決してできません。 – Reinmar

    答えて

    4

    あなたはMutationObserver S(IE < = 8はどちらもサポートしていませんが、古いブラウザに戻っD OM Mutation eventsに立ち下がり)で何かを行うことができるかもしれませんが、私はまだあなたが望むものを達成するためにハードワークになると思います。ここで

    がMutationObserversを使った簡単な例です:それは、コードの過剰量で行うことができる

    http://jsfiddle.net/timdown/4n2Gz/

    +0

    はクロムとFFで動作しません。 – caub

    +0

    @crl:両方で動作します。おそらくあなたは間違ったことを編集していますか?この例はあまり明確ではないと私は認めている。 –

    +0

    ああ、ええ '[contenteditable] {border:1px solid;}'は何を編集するのかを理解するのに役立ちます、thx – caub

    -1

    あなたはこの

    var strong=document.createElement("strong"); 
    var range=window.getSelection().toString().getRangeAt(0); 
    range.surroundContents(strong); 
    

    このを探しているあなたはちょうどあなたが本当のユーザーとの対話を使用して囲むようにしたいものを選択する必要が

    第三部のためでした。あなたたくは第二の部分については、動的に

    var range=document.createRange(); 
    range.setStart(parentNode[textNode],index to start[X]) 
    range.setEnd(parentNode[textNode],index to end[Y]) 
    range.surroundContents(strong); 
    

    それを行う場合

    range.deleteContents() 
    

    第一の部分は、要素あなたの

    するvar textnode = //ノード単純な反復処理を使用して行うことができます 働いています

    textnode.splitText(offset) 
    

    offset-どの位置でテキストノードの分割が行われるか 親編集可能要素の2つの子ノードが作成されました

    親編集可能要素ノードで単純なinsertBefore()を使用します。

    あなたは

    3

    申し訳ありませんが、それが役に立つことを願っていますが、変更が発生したときの変更は元の内容と変更さ1間の差分を取ることなく、あるものを見つける方法はありません。

    0

    DOMノードは以前の状態を保存していないため、探しているAPIは存在しません。

    あなたが取り戻そうとしているデータ/イベントは、私が遭遇したブラウザのネイティブ実装ではありません。これらのケースを総称して扱うことができるデータ型について考えるのは苦労します。

    カスタムイベント/データを取得しようとしているので、おそらくカスタムモジュールまたはマイクロライブラリが必要になります。いずれにせよ、の変更をのものにするには、どういうわけかの変更点がありますか。の変更点は、それが現在のものと何かを比較することによってのみ行うことができます。

    関連する問題