Home/ Questions/Q 4546588
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T15:58:29+00:00

I’m trying to add a custom style in the style menu. style_formats : [

  • 0

I’m trying to add a custom style in 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 selected text to turn in:

<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 to all selection to be inserted in same <code></code> ??

tried also: {title : 'Codigo fuente', block : 'code', classes : 'prettyprint', exact: true}
And i get same result but just with no blank spaces or \n

If you want to see why i’m asking this

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve been working on this on and off for a few days and still cannot get a fully working solution. I think it’s close but I just don’t have any more time to spend on it. It also seems to be rather hacky, so I have to ask if there is not just a more simple way to do this, that is, does it really need TinyMCE? Might be easier to just use a <textarea> and prettify.

    I also used a bit of advice from this other question: Remove styles when pasting from Word or other source

    The idea I was experimenting with was to manipulate the TinyMCE content if the code was “prettified” so that editing occurs on the raw text rather than the prettified version. So I have hooked into the TinyMCE onchange and onKeyDown callbacks to switch the content back to an unpretty version. The only problem is that the first keypress will not register as it is swallowed by the act of replacing the content. There is a way to Programmatically sending keys to input field? but it is not supported in Webkit!

    Also, there seems to be some bugs, as it still adds multiples <code> elements if code is typed directly into the TinyMCE. However, pasting code and then editing seems to work OK.
    So if you type code and then apply the “Source Code” style. all the carriage returns are removed (probably same issue as @András identified).

    So here is my partial 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 prettify and make sure the paths to the .js and .css resources are correct for this to work.

    Hope it helps!

    • 0