I would like to have a CKEditor button that inserts a <code> tag in the text, but haven't been able to figure out how.

Is this even possible?

Comments

TwoD’s picture

Status: Active » Fixed

Short answer: Yes, if you know how to build CKEditor plugins.

Long answer: It's possible if you first build a native CKEditor plugin the same way it'd be done if Wysiwyg or Drupal wasn't involved, then implement hook_wysiwyg_plugin() in a Drupal module to let Wysiwyg know the plugin exists. Instructions on building plugins does not yet seem available in the official CKEditor Developer's Guide, but there's the existing plugin sources and their forum to find more info in. Information about writing the hook implementation needed for Wysiwyg module - so you won't have to modify the module itself to add the button to "Buttons and plugins" on admin/settings/wysiwyg/profile/#/edit - can be found in wysiwyg.api.php.

There's also the option to build a cross-editor "Drupal plugin" (which you tell Wysiwyg about using a different hook also described in wysiwyg.api.php) but since you probably want control over where the cursor is positioned - something the cross-editor API doesn't offer yet, you're better off building a native CKEditor plugin.

Hope that helps. =)

tsvenson’s picture

Not really since I'm not a coder. But thanks for letting me know.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

scottprive’s picture

Title: Possible to have a code tag button? » Not tested but this looks like a solition

See this blog post for a HOWTO:
http://blog.lystor.org.ua/2010/11/ckeditor-plugin-and-toolbar-button-for...

Apparently you must manually create your own plugin for ckeditor, but the blog ckeditor posting seems pretty simple. I can see the need for custom CODE plugins for certain feature sets, but I can not fathom why a plain-text (PRE style) widget does not ship with the editor...

I'll try TinyMCE and if that has the same issue I will just disable all editors. (I prefer hand coded content anyways, but it's such a pain to upload images into your content without an editor).

Anyways, since folks on IRC were pointing here, I thought I'd add the howto link. Good luck.

tsvenson’s picture

Title: Not tested but this looks like a solition » Adding a custom button to CKEditor

Thanks for the tip tzoscott, but please be careful when you change the issue title. They are special in the sense that it is for the whole ticket and not just for your comment and will therefore be the title when you list issues.

TwoD’s picture

Note that the module and hook implementation mentioned in comment #1 would replace step 4 in the HOWTO mentioned in comment #4. Step 1 is also partially modified since the plugin is not needed to be placed in CKEditor's own plugins folder ('internal' => FALSE, tells Wysiwyg to use the path and filename keys to locate the plugin in some other folder instead, so you don't have to re-add the plugin when upgrading CKEditor.

Using the 'options' key in the hook implementation you can let Wysiwyg know all the details and even set startupOutlineBlocks = true, like this:

function MYMODULE_wysiwyg_plugin($editor, $version) {
  switch ($editor) {
    case 'ckeditor':
        return array(
          'myplugin' => array(
            'url' => 'http://......',
            'path' => drupal_get_path('module', 'MYMODULE') . '/plugin',
            'filename' => 'plugin.js',
            'buttons' => array(
              'button-pre' => t('Button PRE'),
            ),
            // A list of global, native editor configuration settings to
            // override. To be used rarely and only when required.
            'options' => array(
              'startupOutlineBlocks' => TRUE,
            ),
            'load' => TRUE,
            'internal' => FALSE,
          ),
        );
      break;
  }
}

Wysiwyg will automatically add the plugin to 'extraPlugins' and the button to the toolbar when 'Button PRE' is checked under "Buttons and plugins".

David_Rothstein’s picture

Regarding the specific original request here (adding a button to the editor that inserts <code> or <pre> tags), I just posted the WYSIWYG Code Button module for that, if anyone's interested.