Ok I'm working a project and need to setup TInyMCE to edit HTML content pulled from MariaDB/MySQL.

 

The flow is as follows :-

 

1> PHP pulls the raw HTML from MariaDB/MySQL (works fine)

 

2> PHP echos the raw HTML into a $scope variable in the AngularJS HTML code (this causes a problem depending on the content of the raw HTML ).

 

3> AngularJS passes the raw HTML via $scope to tinyMCE.

 

 

 

Problem: When the the raw HTML contains quotes or line-breaks it breaks the AngularJS $scope HTML for example:-

 

Source code:

 

$scope.rawhtml = "<?php echo $rawhtml; ?>

 

Example HTML output:

 

$scope.rawhtml = "<p>Test Image <image src=" <-------- (causes broken quote)

 

Or

 

$scope.rawhtml = "Line 1<br>Line 2

<-------- (actual 'r' 'n' breaks the HTML)

Line 3<br>Line 4";

 

Both of these problems can be remedied by using preg_replace to remove 'r' 'n' line-breaks an replacing double quotes with single quotes, but my question is this, is there a better way of handling this?

 

 

 

Sent from my iPhone using Tapatalk

Edited February 2, 20179 yr by OldGuy

Escape the quotes using a backslash. You can either write a function to do this, or convert the characters to HTML entities using htmlspecialchars in PHP.

Escape the quotes using a backslash. You can either write a function to do this, or convert the characters to HTML entities using htmlspecialchars in PHP.

Hi Jack, I tried converting the variable into HTML entities which as expected solved the quote problem, however when the newly converted string containing HTML entities is fed back into TInyMCE it simply displays HTML source rather than fully rendered HTML, obviously this then defeats the purpose of using TInyMCE as a WISIWYG editor.

 

I have got the whole thing working successfully at the moment by doing what I mentioned previously, it just seems a little messy and makes me feel as though there must be a better method. When I'm back at my desk I'm going to try rendering the raw HTML as entities within the $scope variable on the containing page, but then use AngularJS to convert them back to raw HTML before passing it to TInyMCE.

 

Just to recap, the problems I'm experiencing here seem two fold:-

 

The first problem is caused when I transfer my raw HTML string from PHP into an AngularJS variable, my raw HTML string obviously needs to be echoed within the <script> <script> elements on the containing page.

As such certain chars i.e. quotes and new lines simply break the HTML within the containing page which is quite understandable.

 

The second problem arises when attempting to fix the first issue by encoding the raw HTML into HTML entities. Although the encoding works fine TInyMCE does not convert the input HTML entities back into raw HTML instead it just renders the HTML source rather than the fully rendered HTML.

 

Is it possible to get TInyMCE to take HTML entities as an input yet display them as fully rendered HTML rather than source? Can't see anything specific to input format in the docs. So any advice would be great.

 

 

Sent from my iPhone using Tapatalk

Edited February 2, 20179 yr by OldGuy

There's a decode method for TinyMCE that will convert entities back to the UTF-8 character, but I'm really not sure how it works. In any case, you want to be passing sanitised HTML into the editor and back out if you're saving the data anywhere, otherwise, you leave the possibility of XXS attacks. Rendering raw HTML into Angular templates is potentially dangerous, and the framework doesn't have your back in this case.

There's a decode method for TinyMCE that will convert entities back to the UTF-8 character, but I'm really not sure how it works. In any case, you want to be passing sanitised HTML into the editor and back out if you're saving the data anywhere, otherwise, you leave the possibility of XXS attacks. Rendering raw HTML into Angular templates is potentially dangerous, and the framework doesn't have your back in this case.

Hi Jack thanks for your reply, re XSS the HTML is filtered server side so it'll be ok. I've resolved the problem which turns out was amazingly simple, I'm kicking myself for not thinking of it earlier.

 

The fix which was so blatantly obvious now I look at it! Simply encode the HTML into a base64 string server side then decode it into the AngularJS $scope.variable.

It's as simple as :-

 

PHP

 

$enchtml = base64_encode($html);

 

AngularJS

 

$scope.html = atob("<?php echo $enchtml; ?>

 

 

No problems with quotes or line breaks. Job done!

 

Now back to kicking myself :-)

 

 

Sent from my iPhone using Tapatalk

Edited February 3, 20179 yr by OldGuy