web-dev-qa-db-ja.com

ビジュアルエディタでのショートコードのスタイリング

特定のショートコードが使用されたときにそれらがビジュアルエディタ内の画像に置き換えられるようにビジュアルエディタをスタイルする方法を誰もが知っていますか?

私は、ビジュアルエディタを使用しているときに、ショートコードのテキストを誤って削除したり、誤って削除したりすることがわかったので、ビジュアルエディタ内でショートコードをペースホルダ画像に置き換えたいと思います。 HTMLエディタはまだコードを表示します。

5

私は今のところ実用的な解決策を持っていませんが、私がしたいのは、これがより分離主義者のためにどのように行われているかを分析することです。 HTMLエディタには<!-- more -->があり、ビジュアルエディタには代わりに画像が表示されます。

これは、ワードプレスのビジュアルエディタのベースとなるtinyMCEエディタをプラグインで拡張することによって行われます。 Tinymceプラグインについてもっと学ぶために、あなたはより多くの例とドキュメンテーションをmoxiecode wikiで見つけます: TinyMCE(3.x)のためのプラグインを作成する

次のファイル内にコード例があります。

wp-includes/js/tinymce/plugins/wordpress/editor_plugin.dev.js

基本的には、コンテンツ(ショートコード[mycode]など)を、その画像を含む定義済みのHTMLに置き換えることで機能します。コンテンツが投稿される前に、元のHTMLに置き換えられます。その過程で正規表現を利用することができます。より多くのリンクはこれをかなりよく示しています。

3
hakre