| 1 |
/* |
| 2 |
* TinyMCE Ace code editor |
| 3 |
* MIT License Copyright (c) 2017 Akshay Raje |
| 4 |
* @link https://github.com/akshayraje/tinymce-ace-code-editor |
| 5 |
* @author https://github.com/akshayraje/ |
| 6 |
*/ |
| 7 |
(function($) { |
| 8 |
"use strict"; |
| 9 |
tinymce.PluginManager.add('code_toggle', function(editor, url) { |
| 10 |
editor.addButton('code_toggle', { |
| 11 |
icon: 'code', |
| 12 |
text: 'Code', |
| 13 |
tooltip: 'Code', |
| 14 |
onclick: function (e) { |
| 15 |
$(".builder__editor--item-html textarea").val(editor.getContent()); |
| 16 |
toggleCode(this, editor); |
| 17 |
} |
| 18 |
}); |
| 19 |
|
| 20 |
var toggleCode = function(elem, editor){ |
| 21 |
elem.active( !elem.active() ); |
| 22 |
var state = elem.active(); |
| 23 |
var self = elem.$el; |
| 24 |
var tinymce = $(self).closest('.mce-tinymce'); |
| 25 |
var aceID = 'ace-editor-'+editor.id; |
| 26 |
if (state){ |
| 27 |
// Code mode |
| 28 |
tinymce.find('.mce-widget.mce-btn').each(function(){ |
| 29 |
if($(this).attr('id') !== $(elem.$el).attr('id')){ |
| 30 |
$(this).css({ |
| 31 |
'pointer-events': 'none', |
| 32 |
'opacity': '0.4' |
| 33 |
}); |
| 34 |
} |
| 35 |
}); |
| 36 |
tinymce.find('.mce-edit-area').hide(); |
| 37 |
$('#'+editor.id) |
| 38 |
.css('height', $(editor.getDoc()).height()+'px') |
| 39 |
.show(); |
| 40 |
if(typeof ace !== 'undefined'){ |
| 41 |
var textarea = $('#'+editor.id).hide(); |
| 42 |
$('#'+editor.id).after('<div id="'+aceID+'"></div>'); |
| 43 |
var aceEditor = ace.edit(aceID); |
| 44 |
aceEditor.$blockScrolling = 'Infinity'; |
| 45 |
aceEditor.setTheme("ace/theme/chrome"); |
| 46 |
aceEditor.session.setMode("ace/mode/html_ruby"); |
| 47 |
aceEditor.setValue(textarea.val(), 1); |
| 48 |
aceEditor.setOptions({ |
| 49 |
wrap: true, |
| 50 |
displayIndentGuides: true, |
| 51 |
highlightActiveLine: false, |
| 52 |
showPrintMargin: false, |
| 53 |
minLines: Math.round(300 / 17), |
| 54 |
maxLines: Math.round(300 / 17) |
| 55 |
}); |
| 56 |
aceEditor.on('change', function () { |
| 57 |
textarea.val(aceEditor.getValue()).trigger('keyup'); |
| 58 |
editor.setContent(aceEditor.getValue()); |
| 59 |
}); |
| 60 |
} |
| 61 |
} else { |
| 62 |
// Editor mode |
| 63 |
tinymce.find('.mce-widget.mce-btn').each(function(){ |
| 64 |
if($(this).attr('id') !== $(elem.$el).attr('id')) { |
| 65 |
$(this).css({ |
| 66 |
'pointer-events': 'auto', |
| 67 |
'opacity': '1' |
| 68 |
}); |
| 69 |
} |
| 70 |
}); |
| 71 |
tinymce.find('.mce-edit-area').show(); |
| 72 |
$('#'+editor.id) |
| 73 |
.hide(); |
| 74 |
if(typeof ace !== 'undefined'){ |
| 75 |
var aceEditor = ace.edit(aceID); |
| 76 |
aceEditor.destroy(); |
| 77 |
$('#'+aceID).remove(); |
| 78 |
} |
| 79 |
} |
| 80 |
}; |
| 81 |
}); |
| 82 |
})(jQuery); |
