tinyMCE setContent not working with syntax highlighted code

Question

I've been stuck on this for hours and would love some help. I'm using tinyMCE with the syntaxhl plugin using syntaxhighlighter 2.1.382.

Everything works great with non-highlighted code. However, when using setContent with highlighted code, I get no joy. I'm hoping there is something obvious here I'm not seeing.

$(window).load(function() {
     tinyMCE.activeEditor.setContent('<p>here is some code:</p>
    <pre class="brush: jscript;fontsize: 100; first-line: 1; ">var fs = require("fs");

    module.exports = function(app, service){
        fs.readdir(__dirname + "/controllers", function(err, files){
            if (err) throw err;
            files.forEach(function(file){
                var name = file.replace(".js", "");
                require("./controllers/" + name)(app, service);
            });
        });
    };</pre>');
});

However, this doesn't work. I've tried to debug the javascript, but I'm having trouble there to (at least with the chrome dev tools).

There is no error message, just no populated content. I've tried using {format: 'raw'} as suggested in the tinyMCE docs, but no luck there.

I'm hoping somebody else has tried to do this and succeeded.

Answer 1

I do not know the highlight plugin, but i guess it inserts a special stylesheet into the editor iframes head. This leads to the styling (highlighting) of special html tags a.s.o.. In this case the content is not affected/changed.

You won't be able to get your highlighted content as it looks with this plugin.

Answer 2

Unfortunately, I never got the above code to work. I think that the <pre> tag must take over in the browser and mess things up. Also, I'm a bit dubious still of the line breaks causing harm. @Thariama was some help which was great, however, after reading all the documentation on extended_valid_elements, valid_elements, and valid_children, and configuring the tinyMCE init many ways, I couldn't get this to work.

However, I did find a solution for me. It turns out if I set the <textarea> directly with encoded html (so <pre> tag becomes <pre class="brush: bash;fontsize: 100; first-line: 1; ">) then it works properly. Since this is working and it cuts out having to do a setContent after tinyMCE is initialized, this will work for me.

The syntax highlighting is working nicely. I came across this link while searching around if anyone else wants to do the same.