Problem
I was trying to hook in TinyMCE 4 as a editor that allows me to specify code blocks. However, in visual editing mode, <code> blocks ended up having embedded <br /> tags that displayed when rendered.
There is an old plugin, Pre Element Fix, that may have done what I wanted it to do, but it didn’t appear to be developed beyond TinyMCE 2.
Solution
It took a bit of work to handle spanning multiline with a match (/[^]*/
) and hook into the editor setup (setup: function(editor) {...}
).
Complete with initialization code, the following is what I came up with:
fixNewLines = function(content)
{
var codeBlocks=content.match(/<code.*?>[^]*?<\/code>/m)
if(codeBlocks == null) return content;
for(var index=0; index < codeBlocks.length; index++) {
content = content.replace(codeBlocks[index], codeBlocks[index].replace(/<br\s*\/?>/mgi, "\n"));
}
return content;
}
tinymce.init({
selector: "textarea",
theme: "modern",
entity_encoding : "raw",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor" ],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
],
setup: function(editor) {
editor.on('BeforeSetContent', function(e) {
e.content = fixNewLines(e.content);
});
editor.on('SaveContent', function(e) {
e.content = fixNewLines(e.content);
});
}
});
The key parts are the fixNewLines
function, the setup
hooks, the code
plugin, and (possibly) the entity_encoding:"raw"
.
When you view the source code, you will still see break tags with the code sections. However, these will be cleared out on save.
Useful References That I Found
Syntax Highlighting Javascript
http://craig.is/making/rainbows
TinyMCE event research
Hook into onExecCommand event with tinymce 4
api:class.tinymce.Editor events
BeforeSetContent event.
SaveContent event.
tinymce.init({
...
setup:function(editor){
editor.on('BeforeSetContent',function(e){
console.log('BeforeSetContent event', e);
});
}
});