添加 bootstrap img-responsive class 到 wagtail 所见即所得编辑器

Question

我正在努力做到这一点，以便在将正文图像插入页面时，将引导程序 class "img-responsive" 添加到图像标签中？

谁能告诉我如何实现这个？

Answer 1

您可以通过图像格式做到这一点：

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

将图像插入富文本区域时通常得到的 "Full width" / "Left-aligned" / "Right-aligned" 选项来自 Format 对象，它决定了如何将图像引用转换为最后的标签。因此，您需要将内置的 Format 对象替换为插入您的类名的对象。在您的应用中创建文件 'image_formats.py'，其中包含以下内容：

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'))

添加 bootstrap img-responsive class 到 wagtail 所见即所得编辑器

Adding bootstrap img-responsive class to wagtail WYSIWYG editor

twitter-bootstrap

content-management-system

wagtail