将引导img响应类添加到Wagtail WYSIWYG编辑器 [英] Adding bootstrap img-responsive class to wagtail WYSIWYG editor

问题描述

我正在尝试这样做，以便在将身体图像插入页面时，将引导类 img响应添加到图像标签中？

I am trying to make it so that when a body image is inserted into a page, that the bootstap class "img-responsive" is added to the image tag?

有人可以告诉我如何实现吗？

Can anyone tell me how to achieve this?

推荐答案

您可以通过图像格式来实现：

You can do this through image formats:

http://docs.wagtail.io/en/v0.8.5/core_components/pages/editing_api.html#image-formats-in-the-rich-text-editor

将图像插入到RTF区域时，通常会获得全角 /左对齐 /右对齐选项，这些选项来自Format对象。确定如何将图像参考转换为最终标签。因此，您需要用插入类名的对象替换内置的Format对象。在您的应用程序中创建文件'image_formats.py'，其中包含以下内容：

The "Full width" / "Left-aligned" / "Right-aligned" options you usually get when inserting an image into the rich text area come from Format objects, which determine how to translate the image reference into the final tag. So, you need to replace the built-in Format objects with ones that insert your classname. Create a file 'image_formats.py' within your app, containing the following:

from wagtail.wagtailimages.formats import Format, register_image_format, unregister_image_format

unregister_image_format('fullwidth')
register_image_format(Format('fullwidth', 'Full width', 'richtext-image full-width img-responsive', 'width-800'))

unregister_image_format('left')
register_image_format(Format('left', 'Left-aligned', 'richtext-image left img-responsive', 'width-500'))

unregister_image_format('right')
register_image_format(Format('right', 'Right-aligned', 'richtext-image right img-responsive', 'width-500'))

这篇关于将引导img响应类添加到Wagtail WYSIWYG编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！