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

我大约一年前曾问过这个问题，我希望有某种简单的解决方案可以使我实现自己的目标。因此，它去了：

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

我正在寻找的是一种解决方案，该解决方案可以在所见即所得管理编辑器中简单地自动呈现短码的关联输出。

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

实际上，按照您的要求做事还不错。第一个要花一个小时，随后的要花10分钟。

最终，您要做的就是创建一个TinyMCE插件。这是您应该开始准备的：

1. 创建tinymce插件的一般指南
2. WordPress Core的示例代码
3. 将TinyMCE插件添加到WordPress的一般指南。我发现这似乎足够。

您现在拥有完成任务所需的所有工具！在所有这些中，您最感兴趣的代码是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，它得到由风格在这里找到了CSS。

编辑2016-04-06：更新了TinyMCE 4和WordPress 4.4的内容和​​链接

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

在管理员编辑中

从已保存的帖子中抓取所有简码，并将其呈现在除了编辑器之外的metabox中。确保它们与短代码在微型编辑器中的出现顺序相同。

在tinyMCE javascript API中

创建一个jQuery函数，当用户单击一个简码时，它将HTML从metabox交换到编辑器中。反之亦然。顺序本身也可以作为关联，但是我不希望封闭短代码。但是，有很多方法可以设计良好的ID连接。简码的更新可以使用ajax即时完成。

从不保存渲染的简码状态

在切换编辑器之前，保存草稿，自动草稿和发布，进行API调用以触发还原，因此呈现的简码状态永远不会保存...

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

在同一编辑页面加载中可以有多个tinyMCE编辑器。

在恢复部分可通过查看调查[gallery]简码beaviour。但是点击[MY_SHORTCODE]必须通过一些jQuery技巧来完成。

在admin_footer脚本中，使用以下命令访问光标处于活动状态的内容：

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

是如何开始的提示。

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

我添加了描述，以便搜索引擎选择它：

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