WYSIWYG Support

Thanks for the positive feedback.

My first priority is to get a Drupal 7 port published. This is almost complete.

Then I (selfishly) plan to integrate with my current edit toolbar - BUEditor and perhaps the similar markItUP. I'd then like to somehow integrate others like FCKeditor. As I have never used these the first step is to try the module out myself to see how it works and how it could be integrated. As an experienced users do you have any thoughts?

I see that footnotes module has integrated wysiwg's CKeditor and tinyMCE, perhaps someone can adapt their solution for this module?

+1 for wysiwyg's CKeditor

What do you guys think about adding simpler tokens into the module (maybe via the tokens module? or implement it ourselves)? What I mean is, for example, instead of doing the <span class="pullquote"> thing, all they would have to do is something like, [pullquote]some text[/pullquote]

This would make adding pullquotes much simpler for the inexperienced user. I think WYSIWYG support is a great idea, I'm just wondering if this may be an easier and/or more generic approach - thoughts?

Separate issue created for token-based markup feature - see http://drupal.org/node/1082944.

I've put a patch together to add a pull quote button for Drupal 7 wysiwyg. I created a gif button too which is obviously not in the patch which I can provide if needed.

This one should be better.

Any test/comment on the patch on #8?

The comment was wrong on one of the hook implementations. This new patch is just a comment change. I've only tested this in TinyMCE so some users of other WYSIWYG editors.

Added some CSS to show what is selected as pullquote in the editor.

I'll check it out and test this weekend.

This is a nice start and is mostly functioning. In TinyMCE which is my preffered editor it works almost perfectly. There are two small issues. The first is that when you double click on a single word and press the pullquote button, the leading space disappears. This isn't so much of a problem because there's not much use for a pullquote of just one word, but still it'd be nice to fix this. The second and more pressing issue is that highlighting a series of words that have are already a pullquote and then pressing the pullquote button, removes the text. The issue seems to be here:

...
else {
  // unwrap the selected text
  Drupal.wysiwyg.instances[instanceId].insert(
    $(data.content).remove().html()
  );
}

In CKEditor, which I'm probably is the most popular editor but can't back that up, the functionality is a little worse. While I am able to highlight text and enable it as a pullquote, I can't disable it. I don't think it needs too much more before we can add it. Any chance you'll take another crack at it.

I was struggling with the javascript to do the wrapping and unwrapping of the selected text so I am happy to accept it's not perfect. I don't have the time to revisit this patch at the moment so if anyone else wants to have a play with it in CKEditor, please do.

Hai. I am using WYSIWYG with Ck editor in drupal 6 and i created a module to create button in WYSIWYG toolbar for pullquotes.ie User can select the sentence for pullquotes and click the button in toolbar,it will automatically apply pullquotes class for the selected sentence.I am not good at javascript and so i referred some for WYSIWYG additional modules to create it.

That sounds promising. Can you post a patch?

My module name is "pullquotes_button".

Required modules

pullquotes
CKeditor
WYISWYG

pullquotes_button.module

/**
 * Implements hook_wysiwyg_plugin().
 */

 function pullquotes_button_wysiwyg_plugin($editor, $version) {
  switch ($editor) {
    case 'ckeditor':
      // Add CSS for the button.
      drupal_add_css(drupal_get_path('module', 'pullquotes_button') .'/ckeditor/pullquotes_ckeditor.css');
      return array(
        'pullquotes-button' => array(
          'url' => 'http://drupal.org/project/pullquotes',
          'path' => drupal_get_path('module', 'pullquotes_button') . '/ckeditor',
          'buttons' => array(
            'pullquotes-button' => t('Pullquotes'),
           // 'code-button-code' => t('Inline code'),
          ),
          'load' => TRUE,
        ),
      );
      break;
  }
}


/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function pullquotes_button_wysiwyg_editor_settings_alter(&$settings, $context) {
  $profile = $context['profile'];
  switch ($profile->editor) {
    case 'ckeditor':
      if ($profile->settings['css_setting'] == 'none') {
        if (!isset($settings['contentsCss'])) {
          $settings['contentsCss'] = array(base_path() . $context['editor']['editor path'] . '/contents.css');
        }
        $settings['contentsCss'][] = base_path() . drupal_get_path('module', 'pullquotes_button') . '/ckeditor/pullquotes_ckeditor_contents.css';
             }
      $settings['pullquotes-button']['label'] = isset($profile->settings['pullquotes_button_label']) ? $profile->settings['pullquotes_button_label'] : t('Pullquotes');
           break;
  }
}

2) Create a folder called "ckeditor" inside our module folder and create a javascript file inside the "ckeditor" folder and name the js file as plugin.js

plugin.js

  (function($) {

 CKEDITOR.plugins.add('pullquotes-button', {
    init: function (editor) {
      var buttons = {
        'pullquotes-button': ['span', editor.config['pullquotes-button'].label],
            };
      for (var buttonName in buttons) {
        var format = {'element': buttons[buttonName][0],'attributes':{class:"pullquote"}};
        var style = new CKEDITOR.style(format);

        // Allow the button's state to be toggled.
        // @see http://drupal.org/node/1025626 for a standardized solution to
        //   the closure context late binding problem.
        (function(buttonName, style) {
          editor.attachStyleStateChange(style, function (state) {
            editor.getCommand(buttonName).setState(state);
          });
        })(buttonName, style);

        // Add the command and button to the editor.
        editor.addCommand(buttonName, new CKEDITOR.styleCommand(style));
        editor.ui.addButton(buttonName, {command: buttonName, label: buttons[buttonName][1]});
      }
    }
  });

})(jQuery);

3) create a css file in "ckeditor" folder

pullquotes_ckeditor.css

   .cke_skin_kama .cke_button_pullquotes-button span.cke_icon,
.cke_skin_kama .cke_button_code-button-code span.cke_icon {
  display: none !important;
  color:red;
}
.cke_skin_kama .cke_button_pullquotes-button span.cke_label,
.cke_skin_kama .cke_button_code-button-code span.cke_label {
  display: inline;
  font-size: 90%;
  color:red;
}

I am looking forward to enhance this feature.If any one interested to add features to the above code means,you are always welcome .

@dhakshinait re: #18,

I created the module (along with a .info file for it). When I enable the pullquote button, the ckeditor breaks and you can't type anything into the text area. See attached screen shot. Upgrading wysiwyg to most recent version solved the issues for me.

My .info file looks like this, which gets placed into the pullquotes_button directory, looks like this:

name = Pullquotes Button
description = Adds a button to the toolbar for creating pullquotes
core = 6.x 

You had the editor button called "Pullquotes" and I changed this to a singular "Pullquote," which makes more sense to me in the context it is being used in.

Finally, this module can be used with or without the pullquotes module. I'm actually using it just to place text into a call out box. Where the pullquote module actually duplicates the pullquoted text and leave it in the original document, I needed something to create a simple callout (without all the hassle of having to create a block) and move the text over to the right hand side. This module was just what I was looking for. If you go this route, you will need to add css to the ckeditor's css file and to the css used for the website.

@dhakshinait & Steve: thanks. This works for me.

I need codes on #18 for D7. Please post if anyone has it. Thanks

Here's a ported patch for Drupal 7.

I was just using a 20x20 gif from placehold.it, so that will probably want to be updated.

Thanks sclm. #22 works for me.

I'm using #22 with latest Wysiwyg dev (Ckeditor).

I've updated with an image that our design group decided they liked and some tweaks for bugs we saw around selecting and de-selecting them.

I've had considerably better luck working with TinyMCE for this one. CKEditor appears to be a bit leaky in the abstraction, and makes the setting of the span tags a bit painful.

If someone has better luck than I did with CKEditor, I'm sure there's a better patch. Though I think that there is some possibility that it's the abstraction coming from the WYSIWYG module that is the pain point. At least that's what I recall when I was working on this last month.

I am looking for the same - seems like http://drupal.org/project/ckeditor_styles is the exact match for most of you, exept if some of you also (like me) would like this made for CKEditor without WYSIWYG module wrapper.
Made feature request for that:
http://drupal.org/node/1809858

Added to 7.x-2.x!