CKEditor Shortcode/HannaCode instead of <img>

[Andreas Augustin]

Hi!

How can I modify CkEditor in Processwire?

I want to change the output for the uploaded images. Instead of an html <img> tag, I want to insert an Shortcode/Hanna-Code.

E.g. [[image caption="Some Caption Text" src="http://url-to-image.com/image.jpg"]]

Can someone help me?

 

[Macrura]

one way is to use a custom dropdown (richcombo) and let the editor put the caption and src.
alternately you could use the Hanna Code Helper module which works on a right click in the editor;

not sure how you would get the src, might be better to add tags to the images field and then have the editors put the tag in.
[[image caption="Some Caption Text" tag="some-tag"]]
that's how the Soundmanager textformatter works;

there is also already a module for image references

 

[Robin S]

For manipulating images embedded in a CKEditor field I use a textformatter, following the same general principles as this module: http://modules.processwire.com/modules/textformatter-image-interceptor/

[Andreas Augustin]

11 hours ago, Robin S said:

For manipulating images embedded in a CKEditor field I use a textformatter, following the same general principles as this module: http://modules.processwire.com/modules/textformatter-image-interceptor/

I thought this module is only for adding classes etc to <img> tags? And does this module  put the tag into the field or does the module this formatting while rendering?

[Robin S]

2 hours ago, Andreas Augustin said:

And does this module  put the tag into the field or does the module this formatting while rendering?

The idea is not to need a Hanna tag - just let your editors insert images into the CKEditor field and then do any manipulation of the images (whatever it is you are currently doing in your Hanna tag) in your textformatter module. Not sure exactly what you are doing in your tag but the Image Interceptor module is pretty comprehensive so there's a good chance it already covers what you need. Or you can build your own simple textformatter to parse images from the HTML and manipulate the markup as needed.