Integration with CKEditor or WYSIWYG?

I don't have any real interest in having caption filter pull alt text and automatically generating captions (although that is technically possible and relatively easy using this module as a base).

I would really like to integrate this module with Insert and an WYSIWYG editor but I am not certain when I will get to it. Patches always welcome.

I would also find it very useful to have the alt text converted into an image caption, and/or CKeditor integration!

+1 for ckeditor and insert integrations

Has anyone tried http://drupal.org/project/image_Caption module? I believe that it uses alt or title text for the caption, and can be used with wysiwyg editors by applying a .caption class to your image.

I was able to get that module working Scott for the interim, but I think the concept is still a little too complicated for most my users.

Yeah, ultimately it's nice to not have to rely on jQuery to generate captions. In my opinion, that is more of a hack than a solution.

I'd love to get a CKeditor plugin but my plate is pretty full for the next couple of months. Again, patches always welcome!

"Image Caption" comes with another module called "image_caption_filter" that doesn't rely on jQuery, but is an input filter just like this module. Discussion at #264932: Normal filter.

I am going to write an patch for insert module. I will post when it's done.

You know what I just looked at the code and it's already supported with the insert module. Look at the insert-image.tpl.php in the insert module template directory. Just override the template file in your theme and make the adjustments necessary.

@kmonty has added me as a maintainer to this project. I'm going to work on this issue eventually, with targeted support directly against CKEditor and tinyMCE editors (we'll see about WYSIWYG support if it's possible).

Let's move Insert module support (which I'm also interested in) over here: #1282078: Add support for Insert module templates

I've made a start on this functionality to port the filtering capability of Caption Filter to JavaScript for use (right now) in tinyMCE. This approach only works with the WYSIWYG module combined with tinyMCE, as that was the easiest implementation to complete considering all I had to do was adopt the code from WordPress's own source code (which is also tinyMCE):

http://core.svn.wordpress.org/branches/3.2/wp-includes/js/tinymce/plugin...

So this is a start and good enough to commit to the project. It certainly works and it's exciting to see some filtering done on output. I'm leaving this issue as "needs work" until I can get a CKeditor implementation completed.

Unfortunately getting this module to work with CKEditor is proving to be almost impossible. See my description at #1286004-1: Research/Build suitable captioning system for inline images. Essentially CKEditor has this fancy-pants filtering system that unfortunately isn't capable of handling mixed syntaxes of square-brackets like our [caption] tags and HTML at the same time.

There is a WordPress plugin to make it use CKEditor instead of tinyMCE, but it's a complete catastrophe and we can't get anything really useful from it.

So in short, we'll support TinyMCE for now but not CKEditor. The technical challenges of CKEditor are extremely difficult.

I've installed the latest 7.x dev release, which seems to have this patch in already, but I think I'm missing something.

I have the module turned on (along with WYSIWYG, using a tinymce profile), I have its button turned on in my WYSIWYG profile, and I have the caption filter included in my WYSIWYG-enabled input format. I don't see anything in the image dialog to indicate that I can insert a caption, though. I guess I don't understand how this is supposed to work in a WYSIWYG context.

I don't see anything in the image dialog to indicate that I can insert a caption, though.

Yeah, right now it doesn't modify the image dialog box in any way. However if you use the Insert module, you can change the "Title" field into a caption before you insert the image into the post. See #1282078: Add support for Insert module templates.

Maybe CKEditor could have a stand along plugin that doesn't use caption_filter but just adds it's own markup and has a little css to make it look nice.
It could potentially work like this:
1. User clicks an existing image in the editor
2. Caption button becomes selectable (like the unlink button does when you click an existing link)
3. Click the caption button and get a pop-up where you can enter the caption
4. After you enter the caption and click ok it adds the markup around the image.

@rooby: Maybe so, but what you've described is distinctly different than what this module provides and probably won't be handled here.

Absolutely, I should have mentioned that.
It was meant more as a note to people who want CKEditor support.
If I ever have some spare time for it I might do a sandbox project and see how it goes.

Hi everyone, I'd like to propose a patch that would introduce some basic support for CKEditor in this experimental plugin.

What's in the patch:

• An extra tab is added to the Image dialog window - "Caption" tab to make adding the caption easier.
• A new "Remove Caption" item is available in the context menu.
• The conversion is done by external functions defined in caption-filter.js (Drupal.captionFilter.toTag / Drupal.captionFilter.toHTML)
• Some minor changes were needed in the Caption Filter module itself, because it did not allow nicer HTML source formatting (using new line characters).
• The language strings are hardcoded, but it can be improved later.

The usage is pretty simple:

• Click "Image" button
• Type some URL
• Click the "Caption" tab and type some text
• Press "Ok"

(see also the attached screencast)

It is possible to create multiline caption (use Shift+Enter), as well as style the text.
If the text contains some formatting, the "Caption" field in the "Caption" tab will be intentionally grayed out (because it is impossible to edit such content in a basic text field).

Any feedback more than welcome! :-)

Thanks wwalc! I'm excited to see this in action!

In my testing though, after applying the patch CKEditor will no longer load. The JS console reports:

Uncaught TypeError: Cannot read property 'onLoad' of null

Which of course isn't particularly helpful. I'm running CKEditor 3.6.2.7275, through WYSIWYG module.

I'm also concerned about this bit of code.

	afterInit : function( editor )
	{
		var proto = CKEDITOR.htmlDataProcessor.prototype;
		proto.toHtml = CKEDITOR.tools.override( proto.toHtml, function( org )
		{
			return function( data )
			{
				data = Drupal.captionFilter.toHTML( data, 'ckeditor' );
				return org.apply( this, arguments );
			};
		});
		proto.toDataFormat = CKEDITOR.tools.override( proto.toDataFormat, function( org )
		{
			return function( data )
			{
				data = org.apply( this, arguments );
				return Drupal.captionFilter.toTag( data );
			};
		});
	}

This looks like the same thing that I mentioned in #1286004-1: Research/Build suitable captioning system for inline images, where CKEditor is not intended to be used with mixed syntaxes, so this approach overrides the entire CKEditor filtering system, does the replacements needed by Caption Filter, then calls the original filtering system to do all the normal replacements. That's the same approach used by WYSIWYG module also, so I'm guessing we now have two plugins overriding the entire filtering system, adding a custom snippet, then calling the original filtering system. Logically I can see that this would probably work, if each system just nested what it thought was the "original" filtering system. Do you think that's typical of filtering systems for CKEditor?

In any case, this looks like a workable start for this module, if I can get it going I'd love to include it in the project.

Thanks quicksketch for checking the patch!
I'm having problems with reproducing the error that you reported.

I did the following, just to make sure that other third party scripts or old settings did not cause this issue:

• Cleared browser cache
• Installed Drupal 7.12
• Installed wysiwyg 7.x-2.x-dev released on February 19, 2012
• Installed patched caption_filter module (attached)
• Configured Filtered HTML text format:
  • added <img> to the list of allowed tags
  • checked "Convert [caption] tags and allow image alignment"
• Downloaded CKEditor 3.6.2 and unpacked in sites\all\libraries\ckeditor
• In WYSIWYG profiles:
  • selected CKEditor 3.6.2.7275 for Filtered HTML
  • In "Buttons and Plugins" enabled the following: Bold, Italic, Underline, Source code, Caption Filter

By going into node/add/article I see CKEditor and can insert an image with a caption.
Checked on FF10.0.2, Chrome 18, IE8, Opera 11.61 @ Windows 7.
(WFM also with Wysiwyg module version 7.x-2.1)

Could I ask you to do the same and check whether you are having this problem on a fresh installation of Drupal?

.. and here goes the patched module

...seems this is being tested against 7.x ;)

Thanks @wwalc, I'll give this another shot. My sandbox does have everything under the sun installed on it, so I'll try fresh and see if I have better luck.

Really like this module, but it is difficult for my users to add caption! Any way can anybody suggest it done for drupal 6.x?

@quicksketch - any updates? Did you have a chance to recheck the patch?
I'd love to see the support for CKEditor :)

I tried this with WYSIWYG 7.x-2.1; I get no image, just a box with

[[{"type":"media","view_mode":"media_large","fid":"96","attributes":{"alt":"","class":"media-image","style":"width: 480px; height: 351px; float: left;","typeof":"foaf:Image"}}]]This is a caption.

Any suggestions?

I was looking for an easy way to have image captions and stumbled upon this module. As pointed out above, Image caption relies on jQuery, which is why I am going for Caption filter.

I am using CKEditor through Wysiwyg module and also do need a button or anything to work with inside the editor. I followed instructions given in #20 as close as possible on my current project using the patched version from #21.

Although, I am right now NOT seeing any new button in the CKEditor toolbar (is this even needed?), I may choose the new tab "Caption" when opening the image dialog. It worked like a charm on the first try.

One thing I noticed: when configuring the text format (e.g. Filtered HTML), make sure the caption filter runs before the line break filter. Otherwise, you end up with weird <br> tags and orphan paragraphs.

While everything is working as expected, I get an error message after saving any content with captions. However, this might be related to my localhost configuration. I'm just writing it down here, in case someone else gets the same error in which case review of caption filter might be needed.

Warning: getimagesize(/example/sites/default/files/users/paul/Clipboard01.jpg): failed to open stream: No such file or directory in _caption_filter_get_width() (line 103 of /var/www/example/sites/all/modules/caption_filter/caption_filter.module).

I am setting no style on caption tab of an image (since image layout and position is defined through theme) and I noticed the HTML output to be <div class="caption-inner" style="width: ;">. While it doesn't break anything, width: ; is still invalid CSS and should be removed.

@Katrina B, do u use patched module from #21?

@Paul B, i've try to reproduce your bug from #27, but for me everything work and i don't see any error... If u paste this source with caption in original module (not patched) do u get this error too? It's look like Caprion Filter module error or webserver configuration problem.
In #28 u write about invalid CSS, could u write step by step how to reproduce this? I've try to do a lot of things and i never get sth like this...

Greetings

I made some modifications to make this work with Image Resize Filter (basically don't use regex to parse HTML, get the width using jQuery instead).

A few thoughts:
- Lots of code style issues including general formatting issues (bracket style, spaces vs. tabs, etc.), but also more important issues like lack of code comments, obfuscating variable names, 12 levels of indentation, etc.
- Functionally it works pretty good. It would be good to see some synchronization between the caption floating and the image floating so that when you add/remove a caption it doesn't change the position of the image on the page. That may be worthy of a separate follow-up issue.

Comments #27-29: those issues are unrelated. See #1402056: Warning getimagesize failed to open stream: No such file or directory in _caption_filter_get_width

Additionally the regex that replaces the tokens is pretty buggy. Most of the time it results in something like this

<p>some text</p>
<div class="caption">My caption</div>
Some more text that used to be in a paragraph, but is now free-floating.
<p>another paragraph</p>

I think the solution is to abandon regex and traverse the DOM instead. I've got some ideas for how to do this.

@dalin - Traverse the DOM using jQuery?

Unfortunately, the entire point of this module is to not use jQuery. jQuery is clearly fine for WYSIWYG integration, but not okay for front-end rendering of the filter.

Also, this sounds like we're getting off the topic of the original issue. While that code snippet you posted seems fairly impossible to generate, if you can post reproduction steps, we'll happily pursue fixing it in a separate issue.

Let's keep this issue isolated to CKeditor integration. Thanks!

Also, this sounds like we're getting off the topic of the original issue.

Ah, since my only experience with this module is with CKEditor, my guess was that these were related. Now that I'm a bit deeper with the code I see that it's not. I'll open new tickets for those, including my additions with the patch in #30.

But I stand behind my other comments in #30 - the formatting/syntax/style of this patch is going to make this code incredibly difficult to maintain, extend, and just generally grok.

Okay, cool, let's get those other bugs/improvements in a separate queue. Happy to have you looking at the code and helping out :-)

I agree that the patch could be improved. Your comments on #30 re: obfuscating and formatting are completely valid. I think your cleanup is a good starting point on that. We should clean up all those tabs and go from there.

(I should note that I'm not super familiar with WYSIWYG editor plugin writing, so I'm not certain how helpful I can be on this.)

This issue needs to be morphed into this issue #1967242: WYSIWIG integration results in broken paragraphs

Note: Make sure we track #1438078: Caption styles are lost in translation and the solution implemented for TinyMCE in #1432092: Add a caption button for TinyMCE

Shouldn't this have a link to the project page, like the TinyMCE version does?

Does this work? First off, it's rerolled against the latest -dev. I renamed the ckeditor plugin file, to make the file handling & patch a little simpler, and removed some of the regex changes that didn't seem to be completely relevant to this? The one tangible fix it does have is that it now links to the project page ;-) Untested =)

Testing the patch.. there are some problems, it inserts the following code when an image is added:

<div class="caption   draggable">
	<div class="caption-width-container" style="width: 250px">
		<div class="caption-inner"><img alt="" class="image-medium" height="357" src="/sites/default/files/styles/medium/public/images/inline/page/keep_calm_and_call_batman.jpg" title="His number is.." width="250" />
			<p class="caption-text">His number is..</p>
		</div>
	</div>
</div>

whereas the old code inserted e.g.:

[caption align="right"]<img alt="this is the image alt text" class="image-medium inline" src="/sites/default/files/styles/medium/public/images/inline/page/something.jpg" title="the image title" /><strong>this is the caption</strong>[/caption]

Will keep plugging away at it.

Not trying to derail the conversation, but another possible option is to use the https://drupal.org/project/shortcode module for adding the caption shortcode?

That would give integration with the WYSIWYG module which adds TinyMCE, CKeditor, and others. Just a thought.

If anyone is interested I'm attaching a simple module that integrates the caption_filter module with the shortcode module. This gives the benefit of using the shortcode wysiwyg button integration that works in TinyMCE and CKeditor but lets the caption_filter module handle the processing of the shortcode tags.

If there is enough interest, I can make this a submodule that gets included with the caption_filter module.

It works differently than the TinyMCE button that is provided with the caption_filter module. The TinyMCE button that is included in the caption_filter module will render the caption around the media visually in the wysiwyg editor. I find this hard to use.

Using the module I attached will simply insert the [caption][/caption] tags around the media.

So the way it works is:
1. Download and enable the shortcode module
2. Download and enable the module attached here
3. Go to your text formats and enable the correct shortcode(Caption)
4. Make sure your caption_filter is weighted below the shortcode filter
5. Enable the shortcode button in your preferred WYSIWYG editor
6. Edit a node and insert an image
7. Highlight the image and click the Shortcode WYSIWYG button
8. Choose the Caption shortcode
9. Select your float direction and enter the caption
10. Click Insert Shortcode button
11. Save node

The one caveat is that I couldn't yet figure out why I can't use a textarea for the caption. Currently it uses a textfield that is limited to 128 characters. Here is the issue #2107775: Questions about building a shortcode

Note: the module is for D7 only.

Enjoy

Shortcodes are the fundamental flaw that this aims to fix. That's also why Drupal 8 doesn't use shortcodes. See #2014895: Image captions & alignment (for inline images).

Thanks @Wim Leers, but maybe I just don't understand the problem with shortcodes. I also read your response at https://drupal.org/node/2014895#comment-7605081. I understand they add more processing, but the advantage is that you can change the html markup later on if needed and they ***aren't tied to a specific WYSIWYG editor***. I also understand your content isn't as portable because it's not pure html.

Just thinking out loud, here are my thoughts:
- Both core Wordpress and Processwire http://modules.processwire.com/modules/process-hanna-code/ use shortcodes.

- Using the shortcode module opens the door to many more types of shortcodes like the ones bundled with https://drupal.org/project/sc_basic

- It improves the user experience of inserting complex html in a cross editor way.

- I also don't want the caption rendered or floated in the wysiwyg, I only want the shortcode tags inserted in the wysiwyg editor.

- It uses the existing caption code that caption_filter uses.

- We don't have the D8 filter caption stuff in D7.

- I need something that will work with the media module.

- I don't use CKeditor and I had strange results with the TinyMCE caption filter button

I respect your opinion, but I just don't see the full benefits in this situation.

It's worth noting that caption_filter is moving away from shortcodes. @see #2071293: Create an initial backport of D8's Caption Filter code

just the js from # 41 a little more pretty.

i guess one of the things in #30 might still be missing if that is meant by "the old code" (#42)

Using TinyMCE, if I try to add a caption containing an apostrophe/single quote then it is truncated at that character.

I'll mention that what I was messing around with at the time was trying to include a link in my caption which I thought I might be able to do by enclosing the href attribute in single quotes. I can do this if I edit the [caption] in plain text

I added an event to the justify buttons (align left, center, and right) in CKEditor so that, if you select an image inside a caption and click an alignment button, the entire caption is aligned, not just the image.

This helps bring the CKEditor functionality closer to matching TinyMCE functionality for this module.

Patch totally solves the problem for me. Caption filter + CKEditor! yay :)

By now, CKEditor ships with the image2 plugin. That supports captioning natively. You may want to look into using that instead, because that means this module won't have to maintain the CKEditor plugin introduced in #51.