我希望用户能够使用可视化编辑器（即“经典编辑器” / tinyMCE）将自定义类应用于Wordpress帖子中的图像-我无法使用Gutenberg，因为它们是使用PODS创建的自定义帖子类型，块编辑器不可用）。这些类在我创建的样式表中定义。它们的主要特征是width对于媒体查询中的较小屏幕具有百分比值和固定的100％值-我不喜欢固定图像大小的Wordpress系统，该系统在某些点/屏幕宽度浮动时看起来很可笑。我正在使用“ TinyMCE自定义样式”插件将这些类放入编辑器的“格式”菜单。用户可以通过选择图像并从菜单中选择类别将它们应用于图像。
如果将这些类应用于没有没有标题的图像，此方法将非常有效：这些图像以常规img标签的形式呈现，可以选择使用{如果选择了任何链接选项，则在它们周围使用{1}}标签：该类具有预期的效果，所有样式均适用。
但是，如果用户决定使用标题，则图像的处理方式将完全不同：Wordpress在其周围自动创建一个a标签，其中包含figure和一个{ {1}}元素。尽管现在将内部img和figcaption和align-left属性之类的Wordpress类应用于width标记而不是height标记，但自定义类不会*移至figure标记，但仍然是img标记的属性，因此会完全失去其作用：figure元素（以及与之相关的元素）包含的图像）将没有在自定义类中定义的百分比宽度，而是由img和figure属性定义的固定宽度。
由于在tinyMCE编辑器中根本没有出现width元素，整个事情变得更加复杂：在“文本模式”（= HTML代码）中该图由height短代码表示，该短代码如上所述在实际页面上呈现为figure元素，对于WYSIWYG模式的编辑器，其呈现为类为{{1 }}包含一个[caption]标记，其中包含figure标记中的图像和.mceTemp标记中的标题文本。 dl短代码也是保存到数据库的内容。
现在，尽管可以在“文本模式”（即HTML代码）中将类属性写入短代码，但在可视模式下无法选择图形/标题/ shortcode /无论如何-只能选择图像本身（并对其应用类），在这种情况下是没有用的（见上文）。
由于我不能期望客户端在文本模式下工作（并且不希望它们-过多的混乱代码的危险），因此我需要一种可以完全在可视模式下执行的解决方案。
由于在可视模式下无法将类应用于dt标记，因此我需要一种方法来从这些dl标记中删除应用于[caption]标记的自定义类并将其应用于它们父figure标签。对于最终的页面输出，我创建了一个jQuery脚本，该脚本完全做到了：在页面加载时，它搜索我的自定义类实例，这些实例应用于应用于img标记中的img标记，将其删除figure标签中的自定义类，并将该类添加到祖先img标签中：
figure这恰好产生了我想要的输出-很好，但是还不够……
我正在使用img样式表为用户提供尽可能多的WYSIWIG表示形式。现在，在编辑器中，字幕的处理方式有所不同：仅在文本模式下可用的简码被呈现为figure标签，而不是jQuery(document).ready(function() {
var allMyClasses = [
"img_left_30percent",
"img_right_30percent",
"img_left_40percent",
"img_right_40percent",
"img_left_50percent",
"img_right_50percent",
];
jQuery.each(allMyClasses, function(i, val) {
jQuery("figure img." + val)
.removeClass(val)
.parents("figure")
.addClass(val);
});
});
等。所见即所得的输出-见上文。
因此，适合于此处为所见即所得显示呈现的代码的上述脚本为：
editor-styles.css（在这里，我尝试将自定义类添加到dl容器中，并使包装的figure成为内联元素，以使jQuery(document).ready(function() {
var allMyClasses = [
"img_left_30percent",
"img_right_30percent",
"img_left_40percent",
"img_right_40percent",
"img_left_50percent",
"img_right_50percent",
];
jQuery.each(allMyClasses, function(i, val) {
jQuery("div.mceTemp dl.wp-caption img." + val)
.removeClass(val)
.addClass("wrapped_img_reset")
.parents("dl.wp-caption")
.addClass(val)
.parents("div.mceTemp")
.css({display: 'inline'});
});
});
标签的样式生效。）< / p>
但是：它根本不起作用，即输出代码没有任何改变。可能是因为编辑器将输出呈现在iframe中，我无法使用这些方法访问（可以吗？）。
所以这是我的问题：我如何才能完成此脚本应用于tinyMCE作为其所见即所得输出呈现的代码？
答案 0 :(得分：0)
好的，所以我自己找到了答案：要更改编辑器DOM，有必要在编辑器代码（= tinyMCE）中进行操作。因此，我学习了如何为tinyMCE编辑器编写和注册插件（第一次...）。
该插件的代码如下所示。完全符合我在问题中描述的内容：
tinymce.PluginManager.add('my_first_mceplugin', function(editor, url) {
tinymce.activeEditor.on('GetContent', function() {
imagecaptionclasstweak();
});
function imagecaptionclasstweak() {
var allMyClasses = [
"img_left_30percent",
"img_right_30percent",
"img_left_40percent",
"img_right_40percent",
"img_left_50percent",
"img_right_50percent"
];
jQuery.each(allMyClasses, function(i, val) {
tinymce.activeEditor.dom.$('dl.wp-caption img.' + val)
.removeClass(val)
.addClass('wrapped_img_reset')
.parents('dl.wp-caption')
.removeAttr('class')
.addClass('wp-caption')
.addClass(val)
.parents('div.mceTemp')
.css({display: 'inline'});
});
}
});
这实际上比我预期的还要好：它不仅将自定义类写入到编辑器的WYSIWIG输出中的临时dl父级中，而且还作为class属性写入了{{1} } shortcode，它是保存到数据库中的代码，并且在实际页面上会转换为包含类的相应[caption]标记。因此，我不再需要我作为“解决方案的第1部分”发布的jQuery函数。
为父级添加的figure还可以确保在更改定制类时删除了所有以前的定制类。唯一不可能的是在.removeAttr('class')短代码中具有其他类（除了额外添加的“ wp-caption”之外），但是我还是不需要。