在管理编辑器中呈现快捷码的解决方案

时间：2011-12-15 作者：NetConstructor.com

我大约在一年前问过这个问题，我希望有某种简单的解决方案，可以让我实现我的目标。下面是：

我经常在管理编辑器中使用短代码，但当我将其交给客户端时，他们往往不了解它们是如何工作的。

我要寻找的是一种解决方案，它可以在admin WYSIWYG编辑器中自动呈现短代码的关联输出。

从视觉角度来看，我希望它的显示方式与显示“更多”行或在编辑器中显示图像时类似。我的意思是，用户将看到输出，但只能删除它，而不能编辑呈现的短代码的内容。

3 个回复

最合适的回答,由SO网友:Matthew Boynes 整理而成

按你的要求去做其实并不太糟糕。这将花费您大约一个小时来完成第一个任务，10分钟来完成后续任务。

最终，您要做的是创建一个TinyMCE插件。以下是你应该武装自己的开始：

General guide to creating a tinymce plugin
Example code from WordPress Corethis one, 这似乎足够了

您现在拥有完成任务的所有工具！其中，您最感兴趣的代码是WP示例代码中的以下代码块：

4   function replaceGalleryShortcodes( content ) {
5       return content.replace( /\\[gallery([^\\]]*)\\]/g, function( match ) {
6           return html( \'wp-gallery\', match );
7       });
8   }
9
10  function html( cls, data ) {
11      data = window.encodeURIComponent( data );
12      return \'<img src="\' + tinymce.Env.transparentSrc + \'" class="wp-media mceItem \' + cls + \'" \' +
13          \'data-wp-media="\' + data + \'" data-mce-resize="false" data-mce-placeholder="1" alt="" />\';
14  }

在这里，库的短代码被替换为img 标签这个img 标记具有类wp-gallery, 其样式为the CSS found here.

Edit 2016-04-06: TinyMCE 4和WordPress 4.4的更新内容和链接

SO网友:Jonas Lundman

这不是一个完整的答案，只是一个设计方向。我认为最好的方法是这样的：

In the admin edit post

从保存的帖子中删除所有短代码，并将其渲染到元框中，除了编辑器之外。让舒尔以与微型编辑器中出现的短代码相同的顺序显示它们。

In tinyMCE javascript API

制作一个jQuery函数，当用户单击一个短代码时，它将HTML从元框交换到编辑器中。反之亦然。顺序本身应该可以作为关联，但我不反对封闭短代码。然而，有很多方法可以设计一个好的ID连接。可以使用ajax动态更新短代码。

Never save the rendered shortcode state

在切换编辑器、保存草稿、自动草稿和发布之前，请进行API调用以触发还原，以便永远不会保存呈现的短代码状态。。。

这是可以做到的，但您需要熟悉tinyMCE API，以了解何时何地访问编辑器的内容，并在“保存”等之前连接到javascript操作。

在同一个edit post pageload上可以有多个tinyMCE编辑器。

可以通过查看[gallery] 短代码beaviour。但是点击[MY_SHORTCODE] 必须通过一些jQuery技巧来完成。

在admin\\u页脚脚本中，访问光标处于活动状态的内容，方法是：

var $editor_content = $(tinymce.activeEditor.getBody());

是如何开始的提示。

SO网友:Marc Chéhab

我也在寻找一种以图形方式显示和调整短代码的方法。现在，我终于找到了一个教程，可以做到这一点：https://generatewp.com/take-shortcodes-ultimate-level/

我添加了描述，以便搜索引擎能够找到它：

我们将创建一个带有短代码的简单插件，然后我们将添加一个TinyMCE编辑器按钮，通过一个弹出窗口插入该短代码，该弹出窗口将收集所有用户输入的短代码属性。然后，我们将用占位符图像替换TinyMCE编辑器中的短代码，很像WordPress的原生图库（如果您不知道，它实际上是一个短代码），最后，我们将允许通过双击占位符图像来编辑短代码及其属性。

结束

小码农CODE

在管理编辑器中呈现快捷码的解决方案

相关推荐

Button Shortcode