Adding bootstrap img-responsive class to wagtail WYSIWYG editor

问题

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?

回答1:

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

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

来源：https://stackoverflow.com/questions/28745373/adding-bootstrap-img-responsive-class-to-wagtail-wysiwyg-editor