-1

Struggling with encoding and formatting in TinyMCE.

Here's my setup:

enter image description here

When I use any of the formatting tools (bold, ital, etc.) to add HTML tagging, the wysiwyg editor initially shows correctly:

enter image description here

But when saving to my MongoDB and viewing the post, I get:

enter image description here

And when returning to edit the post, I get:

enter image description here

And if I save again from here, the carets are getting encoded even further:

enter image description here

So I think I've got two issues. One is getting the editor to set the content as source code so that the wysiwyg editor will reapply the formatted style. The second is figuring out why the page isn't rendering the HTML once it's been saved to the DB.

Anybody see anything obvious that solves one or both of these issues? If it matters, I've got a Node/Express site using Pug for front-end.

Additional Info -- Content set in MongoDB:

enter image description here

Additional Info -- HTML in Chrome dev tools inspect:

enter image description here

Michael Fromin
  • 13,131
  • 2
  • 20
  • 31
jeremytripp
  • 1,038
  • 1
  • 11
  • 25

1 Answers1

1

You guys aren't going to believe this. The solution to both issues is a single character change.

When inserting Pug variables that contain HTML content that you want rendered, simply change #{yourVariable} to !{yourVariable}.

jeremytripp
  • 1,038
  • 1
  • 11
  • 25
  • 1
    That makes perfect sense as Pug documentation says " but the code in between #{ and } is evaluated, escaped, and the result buffered into the output of the template being rendered." So what it was doing was escaping your HTML. Using the exclamation (as opposed to the hash) is how you tell Pug to take the unescaped value and render that to the browser. Most frameworks will not default to rendering unescaped content due to the inherent dangers so you have to do something to explicitly tell it you want the unescaped content. – Michael Fromin Jun 12 '18 at 17:44