2012-02-12 9 views
0

自分自身の "エディタ"(コードビュー、WYSIWYGなし)を作成したいと思います。画像の挿入に問題があります。画像のアップロードと選択は、blueimp-jQuery-File-Uploadで行います。(StackOverflowのような)テキストエリアからの画像を自動的に認識

私がしたいのは、StackOverflowがそれを行うのと同じ方法でテキストエリアに挿入することです(いくつかの魅力的なギャラリー、モジュールなどなしで)。私はそれをアップロードすると、自動的にこの形式でテキストエリアでのを追加

![imageDescription][1] 
[1]: http://i.stack.imgur.com/image.jpg 

私の質問には、いくつかの画像は、私のテキスト領域に存在している場合、私はこれらを持っているので、場合((おそらく、jQueryの/ JavaScriptで)自動認識を行う方法であります私のテキストエリアの2行)、それらの画像が表示されているテキストエリア(またはそれらのリンク)が削除されます(テキスト行) - そのリンク/画像が消えます。

おそらく私は、すべてのキーを押すごとに1行ずつ「スキャン」する必要がありますか?たぶん、正規表現で(両方の行について)真の場合は、下のイメージを表示します。代わりに、それは単なる通常のテキストです。

答えて

1

これらの画像をエディタのすぐ下に表示するには、そのことをキー入力イベントにバインドするしかありません。テキストを取得したら、イメージをキャッチして<img src="my image">に挿入する正規表現を実行できます。その後、イメージがまだそのエディタに表示されているかどうかを確認するたびにチェックします(おそらく履歴は良い選択です)。そうでない場合は、<img>タグを削除します。

+0

textareaから「imageDescription」と「http link」を抽出する際に問題があります。私は何とかそれを配列に抽出して、簡単にループして下に示すことができます。 – svenkapudija

+0

私が言ったように、正規表現を使用すると、この作業を達成する効果的な方法が得られます。それ以外の場合は、単純な文字列操作を行うことができます。後者の選択のための非常に良い出発点です - > https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/String – danwit

0

まだ必要な場合は、ここで参考にしてください。 Javascriptの正規表現の置換:実際に

.replace(new RegExp("\_img_([^ ].+?[^ ])\_img_", "g"),"<img src='$1' />") 

そのちょうど約すべてのタグに適用され得るパターン。次のように正規表現は次のとおりです。

.replace(new RegExp("\___what ever signifier here ___([^ ].+?[^ ])\_____end sign____", "g"),"<tag>$1</tag>") 

*そうのようなTWP前方slashsと*のような正規表現で特殊文字をエスケープすることを忘れないでください:\\*

また、あなたがより多くのパラメータを追加したい場合は、単に(別を追加します。?[^] + [^])ブロックした後、次のパラメータがそうのように$ 2で行く場所名前:私はダブルフォワードで[ ] ()を逃れ

.replace(new RegExp("\\[([^ ].+?[^ ])\\]\\(([^ ].+?[^ ])\\)", "g"),"<a href='$1'>$2</a>") 

通知はスラッシュ。 これを見てください:http://jsfiddle.net/xwTGr/

関連する問題