CODEWITHSUNDEEP
drupaldrupal-6tinymcewysiwyg
wiifm
wiifm

Reputation: 3798

Customize TinyMCE using Drupal's WYSIWYG module

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:

Let me know if you find these files useful ;)

Thanks Sean

Upvotes: 7

Views: 3191

Answers (2)

Alec Hill
Alec Hill

Reputation: 1

Not sure about previous versions but with D7 (and up-to-date) wysiwyg + tinymce (imce wysiwyg bridge might also be necessary ...this is quite easy...

Once tinymce wysiwyg is working and all...

  • Select the text format you want to add the button to from admin/config/content/wysiwyg and then under the "Buttons" area check the box for "Styles"
  • scroll down to the "CSS" area and enter the classes you want to be able to use from the wysiwyg editor
  • then go put the styles for the classes you want to use in your style sheet

That's it. No custom modules necessary.

Upvotes: 0

Jeremy French
Jeremy French

Reputation: 12157

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.

Upvotes: 1

Related Questions