Hi there,

I've been thinking about a feature I'd love to see on TinyMCE. I manage a blog that has a bunch of totally non-web-saavy contributors, and as such it is impossible for me to get them to do anything, style-wise, that can't be done through tinymce. So though we have some tags built into the stylesheet (pull quotes to either side, intro text looks different from regular, etc) I can't get them to use that stuff, because it currently requires a user to disable rich-text and none of them can handle an html tag.

Would it be possible to have a rich text editor that was customizable? So that you could set things up so that you could highlight the text you wanted to be a pull quote, for instance, and apply a style the same way you would bold it, for instance?

Hope that made sense. I think this would be a great way to make drupal a more useable option for non-technically inclined users. Currently I have to go into all their posts to make them look decent.

Cheers,
Sarah

Comments

quicksketch’s picture

Hi there. What you need to do is go beyond the basic setup of tinyMCE and create your own theme_tinymce_theme function and setup all the buttons you wish to include in the toolbar manually. Read the install file that comes with tinymce.module for instructions on how to do this.

Then, in your tinymce_theme function you can configure the buttons however you like. If you want to make it so users can use certain stylesheet classes, include the 'styleselect' option in your toolbar. Here's how I have my theme file setup, it might help you put together your own:

function phptemplate_tinymce_theme($init, $textarea_name, $theme_name, $is_running) {
  switch ($textarea_name) {
    // Disable tinymce for these textareas
    case 'log': // book and page log
    case 'img_assist_pages':
    case 'caption': // signature
    case 'pages':
    case 'access_pages': //TinyMCE profile settings.
    case 'user_mail_welcome_body': // user config settings
    case 'user_mail_approval_body': // user config settings
    case 'user_mail_pass_body': // user config settings
    case 'synonyms': // taxonomy terms
    case 'description': // taxonomy terms
      unset($init);
			return;

    // Force the 'simple' theme for some of the smaller textareas.
    case 'signature':
    case 'site_mission':
    case 'site_footer':
    case 'site_offline_message':
    case 'page_help':
    case 'user_registration_help':
    case 'user_picture_guidelines':
      $init['theme'] = 'simple';
      foreach ($init as $k => $v) {
        if (strstr($k, 'theme_advanced_')) unset($init[$k]);
      }
      break;
  }

  // Add some extra features when using the advanced theme.
  switch ($theme_name) {
    case 'advanced':
		// Editor Configuration
		$init['lang'] = 'en';
		$init['plugins'] = 'contextmenu,drupalbreak,advlink,advimage';
  	$init['browsers']  = "msie,gecko,opera";
		$init['content_css'] = "/themes/*/editor.css";
		
		// Cleanup
		$init['extended_valid_elements'] = 'a[href|target|name|title|onclick],embed[*],object[*]';
		$init['cleanup_on_startup'] = "true";
		$init['remove_linebreaks'] = "false";
		$init['convert_fonts_to_spans'] = "true";
		$init['inline_styles'] = "true";
		$init['remove_linebreaks'] = "false";
		$init['entity_encoding'] = "numeric";
		$init['apply_source_formatting'] = "true";
		$init['fix_list_elements'] = "true";
		$init['fix_table_elements'] = "true";
		
		// Toolbar Config
		$init['theme_advanced_toolbar_location'] = "top";
		$init['theme_advanced_toolbar_align'] = "center";
		$init['theme_advanced_path_location'] = "top";
		$init['theme_advanced_buttons1'] = "bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,formatselect,styleselect";
		$init['theme_advanced_buttons2'] = "bullist,numlist,separator,outdent,indent,separator,link,unlink,separator,hr,image,drupalbreak,separator,removeformat,code";
		$init['theme_advanced_buttons3'] = "";
		$init['theme_advanced_styles'] = "Indent=indent;Item Title=item-title;Sub Category=item-sub-category;Item Description=item-description;Item Date=item-description-date;Item Modes=item-description-modes;Left Column=left-column;Right Column=right-column";

     break;
  }

  // Always return $init; !!
  return $init;
}

tinyMCE is a very customizeable editor. You might want to check out all the available options at their site: http://tinymce.moxiecode.com/tinymce/docs/reference_configuration.html

sarahfelicity’s picture

Wow, thank you for that. It'll be very helpful to have somewhere to start.

Cheers!

kreynen’s picture

Status: Active » Closed (fixed)

closing all 4.6 issues

kenorb’s picture

Thanks for the code #1