可视化编辑器中的短代码样式设计

Question

是否有人知道如何为可视化编辑器设置样式，以便在使用特定的短代码时，将其替换为可视化编辑器中的图像？

我发现许多用户在使用可视化编辑器时错误地删除了短代码文本，所以我希望在可视化编辑器中用paceholder图像替换短代码。HTML编辑器仍然会显示代码。

Answer 1

我手头没有一个可行的解决方案，但我要做的是分析如何为更多的分离器做到这一点。在HTML中，有<!-- more -->，而在可视编辑器中，则显示一个图像。

这是通过使用插件扩展tinyMCE编辑器(这是wordpress中可视化编辑器的基础)来实现的。要了解有关tinymce插件的更多信息，您可以在为TinyMCE创建插件(3.x)中找到更多的示例和文档。

您可以在以下文件中找到示例代码：

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

它的基本工作方式是用包含图像的预定义HTML替换内容(例如，短代码[mycode])。在内容发布之前，它将再次替换为原始的HTML。您可以在处理过程中使用正则表达式。更多的链接显示了这一点。