Getting HTML from the tinyMCE WYSIWYG editor

Skip to first unread message

Jared Collier

Nov 4, 2015, 10:09:42 AM11/4/15
to Keystone JS
I'm having an issue using the tinyMCE editor, and I'm sure I'm missing some setting which will magically make my life easier.  The editor itself it very expressive and allows me to add/style everything I need.

The Problem:

TinyMCE stores the rich text using it's own formatting code which looks something like this:

The same is true for formatting like adding bold or a specific font, in that it uses square brackets with descriptors inside.  Obviously, when I access what the editor stores, I'd love to have HTML which I can just insert into the page, but these special tags need to be handled.  I'm hoping I don't have to write regular expressions to parse out the tinyMCE code, but I'm not sure what to do.  Is there a setting to have the tinyMCE editor spit out clean HTML, or is there another editor people have had success using which doesn't require so much work to convert to valid HTML for inserting into pages?

Thanks in advance,

Robert Easley

Jul 13, 2016, 4:58:44 PM7/13/16
to Keystone JS
I'm having the same problem. I've been struggling with this all day. Did this ever get resolved?


Jared Collier

Jul 13, 2016, 11:02:33 PM7/13/16
to Keystone JS
I had to go way back in my commits, but I think I found the cause of the problem.  in your 'wysiwyg additional plugins', remove 'bbcode'. I believe that's all you need to do. If that doesn't solve it, post another message and I'll do what I can to help.

Robert Easley

Jul 14, 2016, 12:25:08 PM7/14/16
to Keystone JS
I really can't thank you enough. While I may have skimmed the plugins I was using 20 times it just never registered that I had copy and pasted in a bulletin board plugin into my keystone.init. Wow, thanks again!

waqas aslam

Jul 14, 2016, 12:25:58 PM7/14/16
to Keystone JS
in the keystone.js, in keystone.init(), remove the 'bbcode' and include 'code'. This will resolve the issue. I am using the following configurations for a client, you can use it if you like, I have added all the essential settings to TinyMCE:

	'name': '',
	'brand': '',

	'sass': 'public',
	'static': 'public',
	'favicon': 'public/favicon.ico',
	'views': 'templates/views',
	'view engine': 'hbs',

	'custom engine': handlebars.create({
		layoutsDir: 'templates/views/layouts',
		partialsDir: 'templates/views/partials',
		defaultLayout: 'default',
		helpers: new require('./templates/views/helpers')(),
		extname: '.hbs',

	'emails': 'templates/emails',

	'auto update': true,
	'session': true,
	'auth': true,
	'user model': 'User',
	'wysiwyg override toolbar': false,
	'wysiwyg menubar': true,
	'wysiwyg skin': 'lightgray',
	'wysiwyg additional buttons': 'searchreplace visualchars, code'
	+ ' charmap ltr rtl pagebreak paste, forecolor backcolor,'
	+' emoticons media, preview, image',
	'wysiwyg additional plugins': 'table, advlist, anchor,'
	+ ' autolink, autosave, code, charmap, contextmenu, '
	+ ' directionality, emoticons, fullpage, hr, media, pagebreak,'
	+ ' paste, preview, searchreplace, textcolor,'
	+ ' visualblocks, visualchars, wordcount, image',

Robert Easley

Jul 14, 2016, 12:29:54 PM7/14/16
to Keystone JS
Thank you! This also answers my question.
Reply all
Reply to author
0 new messages