2012-11-29 9 views
7

ウェブサイトからhtmlをコピー&ペーストして、mysqlデータベースに保存したいと思います。これを行うために、私はhtml、さらには単語文書を貼り付けることを可能にするCKEditorをチェックアウトし、HTMLコードを生成します。 CKEditorのような完全なwysiwygエディタを使用する代わりに、貼り付けたデータをhtmlとして「生成」するだけでよいので、貼り付けたデータをHTMLタグと書式に変換するコードを書いています(おそらくjqueryで)。エディタは、豊富なWYSIWYGエディタでhtmlのようなテキストエリアにデータを貼り付けることができますか?

この機能を実現するために、これらのオンラインエディタは何をしていますか?どのように彼らはクリップボードのデータをHTMLコードに変換するのですか? html形式のテキストやdivやボタンをここのテキストエリアに貼り付けるとテキストだけが表示され、wysiwygエディタのイメージと適切なサイズのdivが表示されるのはなぜですか?

エディタはクリップボードのデータにアクセスして操作しますか?クリップボードは整形データを整理した形で保存しますか? "CKEditor"または他の人がそれを操作できるようにしますか?

jQueryでこれを行うことはできますか?あるいは、サーバー側のコードも必要としますか?

あなたがこの主題にいくつかの光を当てることができるなら、私はそれを感謝します。私はそのメソッドを知りたいので、適切なコードを書くことができます。参考のため

+0

あなたは 'contenteditable =" true "'を持つ要素にHTMLを貼り付け、少しのスクリプトを使って内部HTMLを得ることができると思います。 –

答えて

5

http://ckeditor.com/demoはここクローム、IE9とSafariで動作し、粗デモです:http://jsfiddle.net/SN6PQ/2/

<div contenteditable="true" id="paste-target">Paste Here</div>​ 

$(function(){ 
    $("#paste-target").on("paste", function(){ 
     // delay, or else innerHTML won't be updated 
     setTimeout(function(){ 

      // option 1 - for pasting text that looks like HTML (e.g. a code snippet) 
      alert($("#paste-target").text()); 

      // option 2 - for pasting actual HTML (e.g. select a webpage and paste it) 
      alert($("#paste-target").html()); 
     },100); 
    });   
});​ 

これはあなたが後にしているが、それはペースト状にHTMLを警告するものであるかどうかわかりません。コンテンツの編集可能な要素は貼り付け時のマークアップを変更する可能性があることに注意してください。

+1

ありがとう、これはちょうど私が後にしたものです... jqueryのペーストイベントがあります...最も興味深い! – Logan

+0

うれしいです。私の例を洗練させたい場合などに、貼り付けにはさまざまな質問があります。 http://stackoverflow.com/questions/686995/jquery-catch-paste-input?lq=1 –

+0

ああ、実際に私が調査している間にその投稿を見たことがありますが、HTMLとして貼り付けられたことも理解できませんでした。 Btw私はjavascriptの貼り付けイベントの互換性を調べました。ここには:[cutcopypaste](http://www.quirksmode.org/dom/events/cutcopypaste.html) – Logan

関連する問題