All geek questions in one place

Inline Problem adding custom style style_format to tinymce

I am trying to add a custom style to the style menu.

style_formats : [ {title:'Estilos'}, {title : 'Bold text', inline : 'b'}, {title : 'Blue text', inline : 'span', styles : {color : '#006'}}, {title : 'Blue header', block : 'h1', styles : {color : '#006'}}, /*this one*/ {title : 'Codigo fuente', inline : 'code', classes : 'prettyprint', exact: true} ],

Basically I want the selected text to be included:

 <code class="prettyprint"> codeline1 codeline2 codeline3 </code>

But I get:

 <code class="prettyprint"> codeline1</code> <code class="prettyprint"> codeline2</code> <code class="prettyprint"> codeline3 </code>

How can I make all the choices that need to be inserted into the same <code></code> ?

also tried: {title : 'Codigo fuente', block : 'code', classes : 'prettyprint', exact: true} And I get the same result, but just without spaces or \n

If you want to see why , I ask about it

Thanks!

+4
source share
2 answers

I have been working on this for several days and still cannot get a fully functional solution. I think it's close, but I just don't have time to spend on it. It also seems pretty hacky, so I have to ask if there is not just an easier way to do this, that is, does TinyMCE really need it? It may be easier to just use <textarea> and prettify .

I also used some tips from this other question: Remove styles when pasting from Word or another source

The idea I experimented with was to manipulate the contents of TinyMCE if the code was "muffled", so that editing takes place on raw text, and not on a predefined version. So I connected to the TinyMCE onchange and onKeyDown to switch the content back to the version containing nothing. The only problem is that the first click will not be logged, as it is absorbed by the act of replacing the contents. Is there a way to programmatically send keys to an input field? but it is not supported in Webkit!

In addition, it seems that there are some errors as it still adds some <code> elements if the code is entered directly in TinyMCE. However, pasting the code and then editing seems to work fine. Therefore, if you type in the code, then apply the Source Code style. all carriage returns are deleted (probably the same problem as @ András).

So here is my private solution:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> pre { width:500px; } code { white-space:pre; line-height:1; margin:0; padding:0; } #pretty { display:block; } </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="tiny_mce/tiny_mce.js"></script> <link type="text/css" rel="stylesheet" href="prettify/prettify.css" /> <script type="text/javascript" src="prettify/prettify.js"></script> <!-- from http://code.google.com/p/google-code-prettify/ --> <script type="text/javascript"> var plainContent = null; function applyPrettyPrint(inst) { if (tinyMCE.activeEditor.isDirty()) { var content = tinyMCE.activeEditor.getContent({format : 'raw'}); if (content.indexOf('prettyprint') > 0) { $('#pretty').html(content); prettyPrint(); tinyMCE.activeEditor.setContent($('#pretty').html(), {format : 'raw'}); } else { plainContent = content; } } } tinyMCE.init({ // General options mode:'textareas', theme:'advanced', forced_root_block:false, force_br_newlines:true, force_p_newlines:false, content_css:'prettify/prettify.css', // http://tinymce.moxiecode.com/wiki.php/Plugin:paste plugins:'paste', onchange_callback:'applyPrettyPrint', setup:function(ed) { ed.onKeyDown.add(function(ed, e) { if (ed.getContent().indexOf('prettyprint') > 0) { ed.setContent(plainContent, {format : 'raw'}); } }); }, style_formats:[ {title : 'Source Code', block : 'code', classes : 'prettyprint', exact: true} ] }); </script> </head> <body> <form method="post" action="somepage"> <div><textarea name="content" cols="50" rows="15"></textarea></div> </form> <p id="pretty" ></p> <p>Plain code to copy inside textarea</p> <pre> class Foo { private int bar = 0; public doSomething() { return bar; } } class Foo { private int bar = 0; public doSomething() { return bar; } } </pre> </body> </html>

Note. . You will need to download TinyMCE and the prefix and make sure that the paths to the .js and .css resources are correct for this.

Hope this helps!

+2
source

Well, I only have a partial answer, but it can still help you a little. From what I'm going to, you would like to enter or paste some code into the tinyMCE text area (and not into the HTML source code of the editor field), and then apply some styles to this block afterwards, so that it will be prettified.

(As a side element, I think that anyone who qualifies adding a code block to a richt text editor field should be able to click the "raw html" button, paste its code and wrap it in <pre> or <code> especially if you add a little instructions on what to do, just above or below the editor area. And then you will be free at home. And everyone does it like that.)

However, returning to the original problem. If you enter lines of code in the tinyMCE text area, each time you click on it, you will get your own string wrapped in a <p> .

So, if you type:

 if (this_is_the_best_line_ever == true) { ... }

and press enter, you will get

 <p>if (this_is_the_best_line_ever == true) { ... }</p>

So, using your example, you would never see this

 <code class="prettyprint"> codeline1 codeline2 codeline3 </code>

but rather it

 <code class="prettyprint"> <p>codeline1</p> <p>codeline2</p> <p>codeline3</p> </code>

The problem with the latter is that it is invalid HTML, never was, never will be, and tinyMCE will rightfully not create this code. The reason <pre> and <code> are inline elements, and <p> is a block level element, so <pre> and <code> cannot contain any <p> s.

We get an answer (even if it's only half the answer), so don't give up.

A better approach is to use <div> wrappers around your code block. This is legal, tinyMCE will happily do it for you, see below (note the wrapper attribute!):

 style_formats : [ {title : 'Codigo fuente', block : 'div', classes : 'prettyprint', wrapper: 1} ]

We could start celebrating right now, but your chosen plugin, the code prefix, only processes the <pre> and <code> tags from your html, so unfortunately these blocked <div> blocks of code would not be good, oh so beautiful...

You can a) hack the prettify plugin and make it learn div tags that have specific classes, or b) make tinyMCE forget about these <p> wrappers.

Now, moving on to the second parameter, you can initialize tinyMCE with the following parameters:

 forced_root_block : false, force_br_newlines : true, force_p_newlines : false

and your lines will be separated by <br> tags instead of wrapped <p> tags. This greatly discourages tinyMCE authors for various reasons (see the FAQ ), but it is still a valid option.

Now you can trick tinyMCE to wrap all the content in a <code> block with the following configuration (which hacks a bit on its own, but works, basically ahem):

 style_formats : [ {title : 'Codigo fuente', block : 'code', classes : 'prettyprint', wrapper: 1} ]

Your only problem with applying this style will remove existing <br> tags from your text. That's right, you will have all the code you have selected in one line. And I tried many ways to keep these tiny little pathetic tags <br> , but couldn't chase tinyMCE to do this. It was here that I gave up, hence the “half answer”. Good luck

+2
source

Source: https://habr.com/ru/post/1346232/

More articles:


All Articles