search

Ledzz / angular2-tinymce

Angular 2 component for TinyMCE MCE WYSIWYG editor
https://angular2-tinymce.surge.sh
66 stars 37 forks source link

codesample plugin, the prism highlight is only work in editor area #22

Open caiizilaz opened 7 years ago

caiizilaz commented 7 years ago

when i innerHTML on the div with trusthtml pipe and i see in the chrome inspect, it look like span element with token class was disappear.

OKrawi commented 7 years ago

Hi I know I am a little late, but I had a similar problem and it took me quite some time to solve, so I decided to share if anyone experiences the same problem in the future.
The solution turned out quit simple for me.

First, I installed prismjs using: npm install prismjs

Then I used the following Typescript syntax that is equivalent to "require" import * as Prism from "prismjs";

Then I simply called: Prism.highlightAll(); Please note that you need to call this function inside AfterViewInit, instead of OnInit.

Moreover, I was getting my text from a rxjs subscription and calling Prism.highlightAll(); simply didn't work, so I had to replace it with: setTimeout(Prism.highlightAll, 10); so that it is executed only after the DOM has been updated.

Note: it works with 1 millisecond but I am using 10 just to be safe.

And It worked like a charm!