Customize TinyMCE using Drupal's WYSIWYG module

Question

I am looking to create a custom button on the TinyMCE toolbar that wraps the currently selected content in a div with a class. I am using drupal 6.19 with wysiwyg-dev and TinyMCE 3.3.9.2.

Sample text:

<h3>Heading</h3>
<p>Sample text</p>
<ul>
   <li>item 1</li>
   <li>item 2</li>
</ul>
<p>more text</p>

Sample text that has been highlighted and had the 'button' pressed:

<div class="note">
   <h3>Heading</h3>
   <p>Sample text</p>
   <ul>
      <li>item 1</li>
      <li>item 2</li>
   </ul>
   <p>more text</p>
</div>

I have read through a few forums on the internet, and have found people that have come close to solving this. Some use a custom TinyMCE plugin as in this guy http://forum.cmsmadesimple.org/index.php?topic=44093.0

Some say that the new TinyMCE version 3.3 now has the ability to do this through the 'formats' variable on when you initialise TinyMCE - http://tinymce.moxiecode.com/punbb/viewtopic.php?pid=73468

My question is - what is the best way to accomplish this using drupal? I am yet to get any of the above working

UPDATE

Have solved the issue now, Jeremy was right below, and I knew his answer was technically the correct answer, I was mainly asking if anyone else had done similiar work to this and had already created a module etc.

Anyway, in case anyone else comes across this problem, here are the files:

• drupal_module_wysiwyg_wrapped_div_1.0.zip
• tinymce_plugin_wrapped_div_1.0.zip

Let me know if you find these files useful ;)

Thanks Sean

Answer 1

I'm assuming here that you have the button working and are trying to get it to work through Drupal.

If not, that is your first step. Split the problem into an implementation problem and an integration problem.

Once you have that working in a stand alone situation you can then create a module to implement it with Drupal.

You will need to create a module which implements hook_wysiwyg_plugin() to create the button as an option in the wysiwyg settings page.

Have a look at the IMCE wysiwyg bridge module, it implements a button on tinymce through Drupal.