A rather broken tinymce and nl2br

dave_stewart

Hi folks,

My first post here, and hopefully it will be fruitful.

OK, so first of all, I was really surprised with the VanillaTinymce plugin. To be honest, it's broken so I don't understand why it was released in that state.

Anyway, I've tidied it up, renamed the files so they can be actually be found, moved all config JS out of the PHP classes and into external files where they belong (this is MVC after all), and am happy to repost once I have solved the next issue:

So, with the TinyMC plugin enabled, HTML output is being stored correctly, but Vanilla is still adding [br] tags to newlines, resulting in very broken-looking output.

Is there an option to disable nl2br which I presume is being called somewhere, or is there a controller post-process / hook where I can remove extra [br] tags before outputting the HTML?

Thanks very much,
Dave

dave_stewart

I see there's a configuration option that I could set:

$Configuration['Garden']['Format']['ReplaceNewlines'] = TRUE;

Can someone help me set this? I figure I need to do it in the extension constructor, extension setup, or discussion controller pre render or something (I don't know the vanilla API yet).

$some_object->Set('Garden.Format.ReplaceNewlines', FALSE)

If I could be pointed in the right direction, that would be great

yu_tang

Try this.

https://github.com/TiGR/TinyMCE

It is stable enough for me.

dave_stewart

Sweet, I found what and where to put the code. In the extension's constructor:

Gdn::Factory(Gdn::AliasConfig)->Set('Garden.Format.ReplaceNewlines', FALSE);

dave_stewart

Ah, thanks yu_tang, I'll check that out as well.

dave_stewart

Great solution!

Your (I presume it's yours?) Vanilla-Fu is impressive. I think you could probably make use of the config code I pasted above, rather than the _cleanPostedData() method you have. I tested with both, and unless I'm missing something, the config way is cleaner / safer.

Also, if I may suggest an improvement to your code (which I had in my fledgling extension) it would be to externalise the code where you declare the toolbar in the plugin body.

Instead, do something like the following:

$file = "default"; // alternative config files here
$Sender->AddJSFile("plugins/TinyMCE/config/$file.js");

Then in a config folder, you can have alternative JavaScript configs that can be edited by the user:

// config/default.js
$(document).ready(function() {

	$('#Form_Body').tinymce({
		// General options
		theme : "advanced",
		plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",

		theme_advanced_buttons1 : 'formatselect,removeformat,forecolor,|,bold,italic,underline,|,link,unlink,|,bullist,numlist,|,outdent,indent,blockquote,|,image,media,|,cleanup,code,|,search,replace',
		theme_advanced_buttons2 : null,
		theme_advanced_buttons3 : null,

		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_statusbar_location : "bottom",
		theme_advanced_resizing : true,
	});
});

Thanks loads for the extension - it seems to work really well so far.

Dave

crmarks

That would be a nice update, it would make it easier to customize. Maybe you can submit your changes on github @dave_stewart?

dave_stewart

Yeah, actually I've made it even easier than that now. The config js just contains an object:

var tinymceConfig =
{
	theme:                              "advanced",

	theme_advanced_buttons1:			'formatselect,removeformat,forecolor,|,bold,italic,underline,|,link,unlink,|,bullist,numlist,|,outdent,indent,blockquote,|,image,media,|,cleanup,code,|,search,replace',
	theme_advanced_buttons2:			null,
	theme_advanced_buttons3:			null,

	theme_advanced_toolbar_location:    "top",
	theme_advanced_toolbar_align:       "left",
	theme_advanced_statusbar_location:  "none",
	theme_advanced_resizing:            true,
}

Inside injectTinyMCE.js there is now a config object that is extended by the user config object:

editor = jQuery(this).tinymce(jQuery.extend(config, tinymceConfig));

This has several advantages:

- runs the core code, but allows the user to override it
- removes the $enabledPlugins code from the main plugin PHP
- doesn't break encapsulation

The only downside at the moment is that the tinymceConfig object is global. It could also be attached via jQuery.data() to an element as well, but I'm not too worried - I'll let Igor worry about that should he choose to.

I've forked the repo on GitHub, so will tidy up at my end and will submit a pull request.

I don't know Vanilla well enough to know if I'm doing things the "Vanilla way", but it's a good improvement on an already excellent extension.