web-dev-qa-db-ja.com

TinyMCEエディタでショートコードの結果をプレビューするにはどうすればよいですか？

私はこのようなことをするShortcode APIを介してショートコードを作成しました：

[accordion_item numero="01" primeiro="true"]Item 01[/accordion_item]
[accordion_conteudo]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed quis nisi eget eros ultrices vestibulum in sit amet nunc.
Cras varius pellentesque tellus nec vulputate. Nam viverra congue diam ut vehicula.
[/accordion_conteudo]

になります：

<div class="DV_item BordaTop ">
                        <ul>
                            <li class="LI_numero neoSans">01</li>
                            <li class="LI_Pergunta">
                                <h2>Item 01</h2>
                            </li>
                        </ul>
                    </div><br />
<div class="DV_Conteudo"><p><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Sed quis nisi eget eros ultrices vestibulum in sit amet nunc.<br />
Cras varius pellentesque tellus nec vulputate. Nam viverra congue diam ut vehicula.<br />
</p></div>

[ギャラリー]のように、他のショートコードと同様に、ユーザーにその結果をエディタでプレビューできるようにしたいと思います。

何か案は？

shortcodetinymce
2
Beto Frega

私は24時間かけて同じ実装を試みましたが、より精巧なスタイルの結果のプレビューを行いました。基本的にはショートコードを使ったレイアウトビルダーのようなものです。

この記事 が最初の目的のための基礎を築く原因となることを望みます（ポイント＆クリックによるショートコード属性の選択にTinyMCEを使用）。

あなたの質問の第2部は、チュートリアル/ガイダンスの形式でゼロのヘルプを見つけたので、あなた自身で成し遂げなければならないでしょう。それには正当な理由があります。セールスポイントとしてこれを使用して多くのプレミアムテーマを見つけました。あなたは " shortcode-ninja "と呼ばれるwoothemesプラグインからプレビュー機能を取り除くことができますが、それはあなたにwooテーマを使わせることを試みます。

私はTinymce、thickbox、または実際のコードの難読化には流暢ではありません（これはプラグインが試みていると想定しています）。実際のコーダーにとっては簡単なことかもしれません。

tinymceショートコードプラグイン
ショートコードプレビュープラグイン

[OK]をs_ha_dumの提案に従って私の答えを改善しようとします。

私はすでにこれに悩まされて多くの時間を費やしたので、この答えは散弾銃のアプローチです。フォーマットのガイドラインなどに準拠していない場合は、編集してください。

プラグインが問題をチェックしないようにするには、次のようなエントリを見つける必要があります。

$woo_framework_version = get_option('woo_framework_version');

$MIN_VERSION = '2.9';

$meetsMinVersion = version_compare($woo_framework_version, $MIN_VERSION) >= 0;

$woo_shortcode_css = dirname(__FILE__) .  '/../../../themes/' 
                                   . basename(get_template_directory())
                                   . '/functions/css/shortcodes.css';
                                   $isWooTheme = file_exists($woo_shortcode_css);

<?php if ( $meetsMinVersion && $isWooTheme ) { ?>

<?php  }  else { ?>

<div id="scn-options-error">

<?php } else { ?>

あなたのアクティブなテーマはWooThemesからのものではないようです。ショートコード忍者のみ で動作します WooThemesのテーマのために戦います。

今何をする？

戦いを選ぶ：（1）WooThemesのテーマをすでに持っている場合は、それをインストールしてアクティブにします。

とにかくテーマチェックを回避するだけでは、私が思い出すことはあまりありませんでした。あなたはコードを書き直すかリバースエンジニアをする必要がありますか？コード。それは多くの確率変数への道を回っていたように私には思えました、しかし正直なところそれはちょうどTinyMCEが作動する方法です。私はこの点に関してあまり確信がありません。

私が言及すべきもう一つのことは、このような答えをハードコアで調査している間に、あまりにも前のwoothemeエクスプロイト全体がこのプラグインのコードによるものであることがわかった。これが、以前のようにショートコードジェネレータを使用したときにプレビューが表示されなくなった理由です。そのため、本番に投入する前に、コードが実際に安全であることを確認してください。ショートコードのプレビューはちょっと贅沢ですが、セキュリティの脆弱性がある場合はそうではありません。

WooThemes WooFrameworkエクスプロイト：認証されていない訪問者として任意のショートコードを実行：Gist.github.com/jasongill/2523147

この原因はfunctions/js/shortcode-generator/preview-shortcode-external.phpの次のコードです。

$shortcode = isset($_REQUEST['shortcode']) ? $_REQUEST['shortcode'] : '';

$shortcode = strip_tags( stripslashes($shortcode) );

echo do_shortcode($shortcode);

実際にアップデートされたプラグイン自体以外に私があなたに与えることができる最も良い答えは彼が彼のプレミアムワードプレステーマに含めるそれのkreisiの修正を探すことです。 codecanyonで同様のプラグイン機能を販売している人もいました。 "ビジョンショートコード"または似ています。

これをグーグルするとおそらくあなたに役立つでしょう：
"VisualShortcodes.com（Kriesiによる修正）"

あなたが彼の修正が役に立つと思うならば、テーマを購入しようとしてください。

編集2：素晴らしいスタイルを持つthickboxの本当にクールでユニークな実装を見つけ、そしてfontawesome icon shortcodeを選択してクリックします。プレビューのみがアイコンのものですが、私はそれが間違いなく包含を保証すると思いました：

http://themenectar.com/demo/salient/features/elements/ （テーマフォレストで購入可能）

3
nocommit

TinyMCEのショートコードをグラフィックに置き換える：

TinyMCEで挿入されたショートコードをグラフィックで置き換える - WPSites.co.uk

0
user42579