Forum
Custom markup for images in the WYSIWYG editor?
Hello,
I need to be able to modify the markup generated for an image element in the WYSIWYG editor. I instead of just outputting the image like this:
<img src="something.jpg" alt="This is the image's caption" />
I would like for the following markup to appear:
<div class="image-with-caption">
<img src="something.jpg" />
<span>This is the image's caption</span>
</div>
This seems quite simple but I have not found a WYSIWYG editor that seems to be able to do this! :(
Any ideas?
We would suggest that you use a Perch template if you want full control of the markup, rather than allowing images to just be added inline.
Sorry, I forgot to mention that this would be for a blog post! Could that be implemented without taking away too much of the "ease of use" of the blogging interface?
You can add fields to the blog's
post.htmltemplate.Hello Drew,
Yes, but the fields would have to be included into the main blog post. Sorry if my wording was not clear enough.
Basically the user should be able to write a few paragraphs and then include an image. Afterwards they might add some more paragraphs after that.
The image has to use a specific set of markup, and not just the default <img /> node that all WYSIWYG editors seem to include.
I don't think we have a solution for that then if you have to use a WYSIWYG. You could see if any of the editors implement anything like that, our plugins are pretty much standard implementations so if they have a plugin you may well be able to incorporate it.
As it turns out this was quite easy to do using the CKEditor. The following tutorial shows how to implement custom "containers" that can contain any markup you want: https://docs.ckeditor.com/#!/guide/widget_sdk_tutorial_1