Recent Topics

Suggest upgrade TinyMCE to v4.3 for the code highlight feature in WYSIWYG editor

Started by on Mar 10, 2016 – Contents updated: Mar 17, 2016

Mar 10, 2016 15:10    

The new plugin called Code Sample in TinyMCE v4.3 would add the highlight feature to b2 WYSIWYG editor. It seems like a very good choice and easy to integrate for this plugin is based on prismjs which has been integrated in b2. I have a request : If we upgrade I will appreciate that we can preserve and choose more languages (the default setting of this plugin : HTML/XML, Javascript, CSS, PHP, Ruby, Python, Java, C, C#, C++ would be OK), because these languages are often used and learned by students and teachers.

Mar 13, 2016 21:59

@haharen Since you have investigated this already, can you tell us how the TinyMCE marks (in the post html code) the limits of the code block and the language used?

Mar 13, 2016 21:59

That would be a good addition @haharen, the request is already sent to the developers.

Thank you.

Mar 14, 2016 07:53

@fplanque
By default, it seems that there is no setting for the code limits, height and line-numbers, but only can choose the language.

In the editor, the code block will be shown as a snapshot just like a picture which can not be edited in the editor forum unless clicking the codesample button on the toolbar. And the html tag is like : <pre class="language-php"><code>some php code here</code></pre>.

In the front-office page, the showing style just like the tag : [codeblock lang="php" line="1"]some php code here[/codeblock]. The only difference is that there is no line-numbers. It seems that the code showing is rendered directly by the prism.min.css which has been embedded into the b2 core.

By the way, I found a problem. When I edit an article which already contain the code (inputed by tinymce codesample button), some codes would be disappeared in the WYSIWYG editor form. It seems that there is a regular expression check when the editor is initialized. This may need developers pay attention.

Mar 15, 2016 14:58

@haharen wrote earlier:

By the way, I found a problem. When I edit an article which already contain the code (inputed by tinymce codesample button), some codes would be disappeared in the WYSIWYG editor form. It seems that there is a regular expression check when the editor is initialized. This may need developers pay attention.

Do you identify this as a bug of the TinyMCE Prism plugin?

Mar 15, 2016 15:16

@fplanque wrote earlier:

Do you identify this as a bug of the TinyMCE Prism plugin?

In fact, I am not sure and don't know how to test it without the environment of b2 (if there is a way, I would like to have a try) . There was no code missing through the first submit, it only happened at the time of editing that article once again(the time when TinyMCE initialized).

...

Wait a moment please, I make a simple form temporarily to have a try.

Mar 15, 2016 16:36

I find the clue. It seems that we need to add the the function htmlentities() to the content which is got from database and would be shown on the TinyMCE editor form.

I took a test a moment ago , if add htmlentities() to the code, then no errors.( testing code are packaged in tinymce-test.zip)


Attachments:

Mar 16, 2016 22:53

Note: internal testing has shown that htmlentities() does create other problems.

Mar 17, 2016 04:24

@fplanque

Sorry, I'm not familiar with the use of these functions(maybe htmlspecialchars()?) and it is no doubt that changing all codes is not a good way.
So is that possible if we only change the code under the tag <pre class="language-php"><code>some code here</code></pre>? Would this way also meet other problems?

I am eager to use this feature is that sometimes it's not convenient to edit the content which has the highlight code. For example, when I try to copy an article from other website and paste it to my own b2 blog, using WYSIWYG editor is much convenient for it would keep the article style. But if there are highlight code block in this article, it would also paste the css style and the code block would be shown incorrectly. Then I have to change to the markup editor to modify these codes, it's a little laborious and not visualized. If I can edit this in the WYSIWYG editor(delete the code block then re-add a language code block), I would feel much better.

Mar 17, 2016 22:56

Yes we'll look in to this. It's a bit more complex than other things because improper escaping of code, especially Javascript, can result in security issues.


Form is loading...

free blog software – This forum is powered by b2evolution CMS, a complete engine for your website.