jquery自動URL専用部分のリンクにタグを追加する

Question

CMSの画像にライトボックスのクローン（カラーボックス）機能を使用したいと思います。 CMSはTinyMCE 4をWysiwygエディタとして使用します。

ライトボックス機能を使用するには、表示されたサムネイルの周りの画像リンク全体に「rel = 'xyz'」タグを追加する必要があります。

残念ながら、TinyMCEエディタでは、エンドユーザーはソースコードエディタを除いて「rel」タグを追加できません。 代替これは理論的に仕事をするだろう

<script> 
$(document).ready(function(){ 
    $(".myClass").colorbox({rel:'image_group'}); 
... 

...のように、準備書類上、このような「REL」タグを割り当てるには、小さなjqueryのコードを使用するようになり、残念ながら、ユーザーは上のクラスに入ることができませんGUI上のリンク（そして、ソースコードビューにそれを追加するのはNoGoです！）。

エンドユーザがリンクGUIに入力できる内容は、リンクURL、タイトルとテキスト/サムネイルを表示することです。

サイト上には、2つの異なるソース、テンプレートフォルダ、メディアフォルダの画像があります。幸いにも、私はライトボックスエフェクトをメディアフォルダのすべてのイメージに使用したいと思います。もちろんテンプレートからのものではありません。

したがって、ユーザー編集した後、私が保存されて次のしている：

<p> 
<a title="image1" href="http://my.url.ch/media/image1_big.jpg"><img src="http://my.url.ch/media/image1_small.jpg" alt="image1" width="300" height="300" /></a> 
<br /> 
<a title="image2" href="http://my.url.ch/media/image2_big.jpg"><img src="http://my.url.ch/media/image2_small.jpg" alt="image2" width="300" height="300" /></a> 
</p> 

そして、何ページを訪問者に表示されたとき、私は必要がある：

<p> 
<a rel="colorbox" title="image1" href="http://my.url.ch/media/image1_big.jpg"><img src="http://my.url.ch/media/image1_small.jpg" alt="image1" width="300" height="300" /></a> 
<br /> 
<a rel="colorbox" title="image2" href="http://my.url.ch/media/image2_big.jpg"><img src="http://my.url.ch/media/image2_small.jpg" alt="image2" width="300" height="300" /></a> 
</p> 

（非常に正確には：どこの場所このrel属性が追加されても問題ありません;-)）

質問：「rel」タグをドキュメント上に追加することは可能ですか（上のコードのように）ですが、すべて<a>専用のURL部分のみからのタグ（例：メディアフォルダ）？ とはい場合;-)誰もたくさん

Answer 1

私の以前の回答が無効になっていないCMSのコードにOPがアクセスできない理由により、しかし、私は通常の状況下で動作するので、他の人のための答えを残しています。それは新しい答えです。

コードのこの作品は、<a>要素を持つすべてのタグを見つけて、HREFは「/メディア/」テキストが含まれている場合rel="colorbox"を追加します。

$(document).ready(function(){ 
    $.each($('a'), function(index, element){ 
    if(element.toString().indexOf("/media/") > 0){ 
     $(this).attr('rel', 'colorbox'); 
    } 
    }); 
}); 

http://codepen.io/Rohithzr/pen/JXryRp

取り組ん例えば上記のペンをご確認ください。これは、ユーザーがTinyMCEはボックスあなたはブログのようなそのコンテンツを表示するには何でも提出後1が/notmedia/

<p> 
<a title="image1" href="http://my.url.ch/media/image1_big.jpg"><img src="http://my.url.ch/media/image1_small.jpg" alt="image1" width="300" height="300" /></a> 
<br /> 
<a title="image2" href="http://my.url.ch/media/image2_big.jpg"><img src="http://my.url.ch/media/image2_small.jpg" alt="image2" width="300" height="300" /></a> 
<a title="image2" href="http://my.url.ch/notmedia/image2_big.jpg"><img src="http://my.url.ch/notmedia/image2_small.jpg" alt="image2" width="300" height="300" /></a> 
</p> 

Answer 2

が、この作品のようなものができるか...

Thxをヒントを提供してくださいできますか？

$(document).ready(function(){ 
    $.each($('img'), function(index, element){ 
    var img = $(element); 
    //match the img tags, which src attribute starts with //i. only. 
    if(img.attr('src').match(/\/\/i\..+/)){ 
     img.attr('rel', 'something'); 
    } 
    }); 
}) 

あなたの画像のURLと一致するように正規表現を変更するだけです。

https://jsfiddle.net/j0vmcqa2/

[UPDATE]

また、あなたのケースでは、私はあなたがタグに追加する必要があると思う、私はIMGタグをチェックしていますことを、心に留めておく必要があります。アイデアはsimillarです。あなたはhref属性でsrc属性を検索する代わりに、 'a'で 'img'を変更することができます。

Answer 3

あなたは、サーバー

$('#form').submit(function(eventObj) { 
    var content = $('#contentBox').val(); 
    alert(content); 
    content = content.replace('<img', '<img rel="lightframe"'); 
    alert(content); 
    $('#contentBox').val(content) 
    return true; 
}); 

にデータを送信する前にこの権利を行うことができます同じことを確認し、私は最善の方法は、ときに、ユーザーのポストそれ、それを追加することになると信じて http://codepen.io/Rohithzr/pen/bprKER で私に知らせてください.. ユーザーが提出したときにこのスクリプトを使用してデータベースに直接アクセスするようにします