0

WordPress ビジュアル エディターでショートコードを特定の色で強調表示したいと考えています。たとえば、次のショートコードがあります

[shortcode1] Some text [/shortcode1]
              ...
[shortcode2] Some text [/shortcode2]

それぞれに固有の色を付けたいので、ユーザーは何を変更する必要があるかを簡単に確認できます。

HTML エディターの構文を強調表示する解決策をいくつか見つけましたが、ビジュアル エディター自体の解決策は見つかりませんでした。これを実現するプラグインを知っていますか？

4

1 に答える 1

0

実用的な解決策を得ることができました。

何が必要：

TinyMCE 高度なプラグイン

あなたがすべきこと：

TinyMCE プラグインに付属する Visual Blocks プラグインをカスタマイズし、強調表示する各要素に css クラスを追加します (すべての p 要素をループして innerHTML を解析し、特定のパターンが含まれているかどうかを確認します)。

最終的には次のようになります。 ここに画像の説明を入力

編集

カスタマイズする必要があるクラス: ... /plugins/tinymce-advanced/mce/visualblocks/ plugin.min.js

window.NodeList && (a.addCommand("mceVisualBlocks", function() {メソッドは、カスタマイズする必要がある場所です。メソッドの先頭にいくつかのコードを挿入するだけです。

var elements = a.getDoc().getElementsByTagName('p');
for (var i = 0; i < elements.length; i++) {
        // here you should do some Regex or simple string contains string check
        // of the innerHTML and set the css class of the element. E.g.:

 if((elements[i].innerHTML.indexOf("foo") >= 0 
     && elements[i].className.indexOf("baz") < 0){
            elements[i].className = "baz";
 }
}

同じディレクトリに css/ visualblocks.css があります。次のように、カスタマイズに応じていくつかの css を追加する必要があります。

.mce-visualblocks .baz {
    background-color: red;
}

上部のメニュー バー ([表示] -> [ブロックの表示]) のビジュアル エディター内で強調表示を切り替えることができます。

時間があれば、より良い解決策に取り組みますが、これは現時点でのすべての要件を満たしています。

于 2015-04-22T18:48:21.917 に答える