如何在TinyMCE编辑器中预览短码的结果?

时间:2012-08-27 作者:Beto Frega

我通过shortcode API创建了一个shortcode,其功能如下:

[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>
我希望用户能够在编辑器中预览该结果,就像其他一些短代码一样,如[图库]。

有什么想法吗?

2 个回复
最合适的回答,由SO网友:nocommit 整理而成

我刚刚花了24个小时尝试相同的实现,但有一个更精细的结果预览。基本上类似于使用短代码的布局生成器。

但愿我能找到this post 早期原因它为第一个目标奠定了基础(使用TinyMCE进行快捷码属性的点击选择):

问题的第二部分你必须自己完成,因为我发现零帮助是以教程/指导的形式提供的,而且是有充分理由的;发现了许多将此作为卖点的优质主题。您可以从名为“”的woothemes插件中删除预览功能shortcode-ninja,“但它会试图迫使你使用一个woo主题。

我不擅长tinymce、thickbox或任何真正的代码混淆(我假设插件正在尝试)尽管这对任何真正的程序员来说都是轻而易举的事。

tinymce shortcodes plugin
shortcode previews plugin

Ok I will attempt to improve my answer as per s_ha_dum\'s suggestion.

<我已经花了很多时间来胡闹了,所以这个答案是一种猎枪式的方法。如果不符合格式指南等,请随意编辑

要停止插件检查wootheme,您需要找到以下条目:

$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的主题,请安装并激活它;(2)如果你还没有一个很棒的WooThemes,请前往“nowdeadwebsiteaffiliatelink”获取一个。

不管怎样,只是绕过主题检查并没有让我想起什么。你需要重写代码还是进行反向工程?代码。在我看来,它似乎传递给了许多随机变量,但老实说,也许这就是TinyMCE的运作方式。在这方面我不太确定。

我应该提到的另一件事是,在hardcore研究像这样的答案时,我发现不久前整个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对它的修改,他将其包含在他的高级wordpress主题中。我还发现有人在codecanyon上销售类似的插件功能。“视觉短代码”或类似代码。

在谷歌上搜索这可能会对您很有帮助:“VisualShortcodes.com(由Kriesi修改)”

如果你觉得他的修改很有用,请尝试购买一个主题。

Edit 2: 找到了一个非常酷/独特的thickbox实现,具有出色的样式,点击选择fontawesome图标快捷码。唯一的预览是图标,但我认为它绝对应该包括:

http://themenectar.com/demo/salient/features/elements/ (可在最前面购买)

SO网友:user42579
结束

相关推荐

How to load shortcode sooner

我正在尝试向菜单添加一个快捷码,菜单项会显示,但不会显示快捷码输出。我认为问题是,快捷码在菜单运行之后运行,因此快捷码输出不存在。有没有办法更快地加载短代码?谢谢编辑:抱歉,这里是://--Nav Menu function add_profile_link_to_nav(){ if ( is_user_logged_in() ) { ?> <ul> <li class=\"menu-item\"id=\"one\"> &