In the WYSIWYG core conversation I reviewed how WordPress handles inline image handling through pseudo-tags (what we would call "tokens" maybe and what WordPress calls "quicktags").

This syntax is similar to the following example:

[caption align="right"]<img src="example.png" alt="" width="100" height="100" />The Caption of the Image[/caption]

// OR:

[caption align="right" caption="The Caption of the Image"]<img src="example.png" alt="" width="100" height="100" />[/caption]

These are only examples though, the actual syntax is a bit more complicated. We should investigate if this syntax is what we want to use, and how viable implementation of this syntax is in each of our candidate editors (right now primarily CKeditor and tinyMCE).

Comments

quicksketch’s picture

quicksketch
he/him
CreditAttribution: quicksketch commented

As an experiment I tried out the http://drupal.org/project/caption_filter module, which imitates WordPress-style caption syntax. It didn't include any WYSIWYG integration though, so I took up the issue in #696734: Integration with CKEditor or WYSIWYG? to make it work with tinyMCE and CKeditor.

Unfortunately implementing this as a "native" plugin for CKeditor seems to be extremely difficult to do the "right way". I looked through CKeditor's implementation of BBCode (which is a similar syntax), but in order to support square-bracket syntax, the BBCode plugin (included with CKeditor 2.6.1) had to rewrite a large portion of the filtering system.

The problem is that CKEditor's filtering system is not text and regular-expression based, it's tree-based. While this allows for great flexibility parsing HTML-like syntax (<tag attr="value">), it doesn't work well for anything that's not HTML.

Others seem to have had similar experiences. The Drupal WYSIWYG module also overrides the entire filtering system in its implementation (see this code segment). The CKEditor for WordPress plugin is a complete catastrophe of API hacks (see code). It just side-steps the entire filtering system in CKEditor and executes a replacement on the WYSIWYG .5 seconds after the page has finished loading(!) Not something we can use.

So basically, my finding so far in this department is the WordPress-style syntax is fairly easy to port over to Drupal when using tinyMCE. Because WYSIWYG module implements a hack for us, the basic filtering replacement would be easy enough in CKEditor also. Unfortunately I don't think we could include this hack directly in core, or at least it would feel shady doing so.

quicksketch’s picture

quicksketch
he/him
CreditAttribution: quicksketch commented

Drawing a few conclusions from #1, here's what I think our options are regarding a Drupal core solution:

  1. Don't use the WordPress-style syntax of square brackets and use an HTML-like syntax instead.
  2. Include a hack in core similar to WYSIWYG module's specifying a custom filtering system on top of the existing filtering.
  3. Don't use CKEditor as the editor bundled with Drupal core.
bryancasler’s picture

bryancasler CreditAttribution: bryancasler commented

Thanks for sharing your findings Quicksketch. It's disappointing to learn that ckeditor will likely not work for this, but nothing can be done about that. I see you've posted some work with the caption filter module #696734: Integration with CKEditor or WYSIWYG?. Is this related to the work you're doing here?

quicksketch’s picture

quicksketch
he/him
CreditAttribution: quicksketch commented

I see you've posted some work with the caption filter module #696734: Integration with CKEditor or WYSIWYG?. Is this related to the work you're doing here?

Yes I figured I'd try to write the necessary filtering code against existing solutions (like Caption Filter module) before trying it as part of this WYSIWYG in core effort. After all we're probably still quite a ways from working code in Drupal 8, but the code we write today still provides a good indicator of what's possible and will probably serve as a template for the final code.

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented

Hi Nathan

I couldn't get to your session at DrupalCon but watched the presentation yesterday.

In your research you might like to look at Silverstripe and their image handling and wysiwyg which look pretty good. Doesn't work in Chrome?? but OK in Firefox.

quicksketch’s picture

quicksketch
he/him
CreditAttribution: quicksketch commented

In your research you might like to look at Silverstripe and their image handling and wysiwyg which look pretty good. Doesn't work in Chrome?? but OK in Firefox.

Silverstrip uses tinyMCE for its editor, customized for their CMS. It doesn't look like they have any particularly special handling for captions that I can tell. After uploading an image there is a field for "Caption" but it is greyed out. Captions look as though they're simply handled with <em> tags around both the image and the caption. It doesn't look like they have any support for floating an image and its caption together.