TinyMCEテキストハイライト正規表現

Question

ここでは正規表現に関する質問をしましたが、基本的には、テキストの一部を選択するオプションを与える必要があります。ボタンはフラッシュフロントエンドで一部の人はMOREをクリックします。ここのTinyMCEのサンプルテキストがある上記の式は、このSOME INNER TESTを除去するために使用され、我々は変換されます

<start>(((?!<(?:\/end|start)>).)+)<\/end> 

some text <start> some inner test </end> 

ので、ここでは、この開始と終了のテキストをキャッチする正規表現があり、これはフレンドリーフレンドへMOREボタン。

（編集中）の人々が

Answer 1

オーケー人は上の私の肩を撫でMOREボタンに表示されなくなりますどの部分を知っているだろうので、私の質問は、その場で開始&終了タグ内のテキストを強調するためにどのような方法がありますされますこれは：Dあなたが以下のコードがわからない場合は、TinyMCEの初期化の基礎を学びます。私はこれをjQueryバージョンで行っています。

は、ここに私のソリューションです

var highlighter = 1; // A global variable, just to create a toggle for show/hide highlight 

は、コードの初期化にsetup:を追加する3つのカスタムボタン

theme_advanced_buttons1: 'startmore, highlight, endmore, ...'; 

を追加しました。

// start highlight, end highlight and show highlight buttons 

setup: function(ed) { 
    ed.addButton('startmore', { 
     title: 'Start More', 
     image: 'images/end_s.png', 
     onclick: function() { 
      ed.selection.setContent('[start]'); 
     } 
    }); 
    ed.addButton('endmore', { 
     title: 'End More', 
     image: 'images/end_m.png', 
     onclick: function() { 
      ed.selection.setContent('[end]'); 
      if (1 == highlighter) { 
       highlight_tags(); 
      } 
     } 
    }); 
    ed.onInit.add(function(ed) { 
     highlight_tags(); 
    }); 
    ed.onSubmit.add(function(ed, e) { 
     var html_output = highlight_remove(tinyMCE.activeEditor.getContent()); 
     tinyMCE.activeEditor.setContent(html_output); 
    }); 

    ed.addButton('highlight', { 
     title: 'Show collapse selection', 
     image: 'images/end_highlight.png', 
     onclick: function() { 
      if (1 == highlighter) { 
       var html_output = highlight_remove(tinyMCE.activeEditor.getContent()); 
       tinyMCE.activeEditor.setContent(html_output); 
       highlighter = 0; 
      } else { 
       highlight_tags(); 
       highlighter = 1; 
      } 
     } 
    }); 
    ed.onContextMenu.add(function(ed, e) { 
     tinymce.dom.Event.cancel(e); 
     if (1 == highlighter) { 
      highlight_tags(); 
     } 
    }); 
} 

onContextMenuは、エディタ内で右クリックしてハイライトを表示/修正するために使用されます。 彼らはすぐに飛ぶように強調表示する問題があります。setSontent()カーソルが最初の行の先頭に移動します。

以下は、[開始] [終了]タグの周囲にハイライトを配置する正規表現関数です。

function highlight_tags() { 
    var html_output = tinyMCE.activeEditor.getContent(); 
    html_output = highlight_remove(html_output); 
    var regex = new RegExp(/\[start\](((?!\[(?:end|start)\]).)+)\[end\]/ig); 

    html_output = html_output.replace(regex,'<span style="background-color:> yellow;">[start]$1[end]</span>'); 
    tinyMCE.activeEditor.setContent(html_output); 
} 

function highlight_remove(html_output) {   
    var regex_fix = new RegExp(/<span\sstyle="background-color:\syellow;">(.+?)<\/span>/ig); 
    return html_output.replace(regex_fix,'$1'); 
} 

これまでのところ私に仕えています。

ちょうどonSubmit私はハイライトを削除しようとしていますので、データベースがなくなり、2番目にハイライトが削除されていることがわかります。しかし、それはデータベースになります...今これを修正します。

皆さんが何かを理解していないかどうか教えてください。

注：このスタックオーバーフローエディタである可能性のあるコードに誤植がある場合:)。 注：私はこのコードが多く改良できることを知っているので、啓発してください。