<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
/**
* source.html
*
* Copyright 2013-2014 Web Power, www.webpower.nl
* @author Arjan Haverkamp
*/
// Global vars:
var tinymce, // Reference to TinyMCE
editor, // Reference to TinyMCE editor
codemirror, // CodeMirror instance
chr = 0, // Unused utf-8 character, placeholder for cursor
isMac = /macintosh|mac os/i.test(navigator.userAgent),
CMsettings; // CodeMirror settings
function inArray(key, arr)
{
"use strict";
arr = '|' + arr.join('|') + '|';
return arr.indexOf('|'+key+'|') != -1;
}
(function()
{// Initialise (before load)
"use strict";
tinymce = parent.tinymce;
editor = tinymce.activeEditor;
var i, userSettings = editor.settings.codemirror ? editor.settings.codemirror : {};
CMsettings = {
path: userSettings.path || 'codemirror',
indentOnInit: userSettings.indentOnInit || false,
disableFilesMerge: userSettings.disableFilesMerge || false,
config: {// Default config
mode: 'htmlmixed',
lineNumbers: true,
lineWrapping: true,
indentUnit: 2,
tabSize: 2,
indentWithTabs: true,
matchBrackets: true,
saveCursorPosition: true
},
jsFiles: [// Default JS files
'codemirror.js'
],
cssFiles: [// Default CSS files
'codemirror.css'
]
};
if (CMsettings.disableFilesMerge) {
if (
Array.isArray(userSettings.jsFiles) &&
Array.isArray(userSettings.cssFiles) &&
(userSettings.jsFiles.length > 0) &&
(userSettings.cssFiles.length > 0)
) {
CMsettings.jsFiles = []
CMsettings.cssFiles = []
} else {
if (console) {
console.error('Codemirror plugin: jsFiles and cssFiles must be specified if disableFilesMerge is set to true')
console.warn('Codemirror plugin: ignoring disableFilesMerge')
}
}
}
// Merge config
for (i in userSettings.config) {
CMsettings.config[i] = userSettings.config[i];
}
// Merge jsFiles
for (i in userSettings.jsFiles) {
if (!inArray(userSettings.jsFiles[i], CMsettings.jsFiles)) {
CMsettings.jsFiles.push(userSettings.jsFiles[i]);
}
}
// Merge cssFiles
for (i in userSettings.cssFiles) {
if (!inArray(userSettings.cssFiles[i], CMsettings.cssFiles)) {
CMsettings.cssFiles.push(userSettings.cssFiles[i]);
}
}
// Add trailing slash to path
if (!/\/$/.test(CMsettings.path)) {
CMsettings.path += '/';
}
// Write stylesheets
for (i = 0; i < CMsettings.cssFiles.length; i++) {
document.write('<li'+'nk rel="stylesheet" type="text/css" href="' + CMsettings.path + CMsettings.cssFiles[i] + '" />');
}
// Write JS source files
for (i = 0; i < CMsettings.jsFiles.length; i++) {
document.write('<scr'+'ipt type="text/javascript" src="' + CMsettings.path + CMsettings.jsFiles[i] + '"></scr'+'ipt>');
}
// Borrowed from codemirror.js themeChanged function. Sets the theme's class names to the html element.
// Without this, the background color outside of the codemirror wrapper element remains white.
// [TMP] commented temporary, cause JS error: Uncaught TypeError: Cannot read property 'replace' of undefined
if(CMsettings.config.theme) {
document.documentElement.className += CMsettings.config.theme.replace(/(^|\s)\s*/g, " cm-s-");
}
window.onload = start;
}());
function start()
{// Initialise (on load)
"use strict";
if (typeof(window.CodeMirror) !== 'function') {
alert('CodeMirror not found in "' + CMsettings.path + '", aborting...');
return;
}
// Create legend for keyboard shortcuts for find & replace:
var head = parent.document.querySelectorAll((tinymce.majorVersion < 5) ? '.mce-foot': '.tox-dialog__footer')[0],
div = parent.document.createElement('div'),
td1 = '<td style="font-size:11px;background:#777;color:#fff;padding:0 4px">',
td2 = '<td style="font-size:11px;padding-left:5px;padding-right:5px">';
div.innerHTML = '<table cellspacing="0" cellpadding="0" class="table-footer"><tr>' + td1 + (isMac ? '⌘-F' : 'Ctrl-F</td>') + td2 + tinymce.translate('Start search') + '</td>' + td1 + (isMac ? '⌘-G' : 'Ctrl-G') + '</td>' + td2 + tinymce.translate('Find next') + '</td>' + td1 + (isMac ? '⌘-Alt-F' : 'Shift-Ctrl-F') + '</td>' + td2 + tinymce.translate('Find previous') + '</td></tr>' + '<tr>' + td1 + (isMac ? '⌘-Alt-F' : 'Shift-Ctrl-F') + '</td>' + td2 + tinymce.translate('Replace') + '</td>' + td1 + (isMac ? 'Shift-⌘-Alt-F' : 'Shift-Ctrl-R') +'</td>' + td2 + tinymce.translate('Replace all') + '</td></tr></table>';
div.style.position = 'absolute';
div.style.left = div.style.bottom = '10px';
head.appendChild(div);
// Set CodeMirror cursor and bookmark to same position as cursor was in TinyMCE:
var html = editor.getContent({source_view: true});
html = html.replace(/<br>/g, "\n<br>");
// [FIX] #6 z-index issue with table panel and source code dialog
// editor.selection.getBookmark();
html = html.replace(/<span\s+style="display: none;"\s+class="CmCaReT"([^>]*)>([^<]*)<\/span>/gm, String.fromCharCode(chr));
editor.dom.remove(editor.dom.select('.CmCaReT'));
// Hide TinyMCE toolbar panels, [FIX] #6 z-index issue with table panel and source code dialog
// https://github.com/christiaan/tinymce-codemirror/issues/6
tinymce.each(editor.contextToolbars, function(toolbar) { if (toolbar.panel) { toolbar.panel.hide(); } });
CodeMirror.defineInitHook(function(inst)
{
// Move cursor to correct position:
inst.focus();
var cursor = inst.getSearchCursor(String.fromCharCode(chr), false);
if (cursor.findNext()) {
inst.setCursor(cursor.to());
cursor.replace('');
}
var last = inst.lineCount();
inst.operation(function() {
for (var i = 0; i < last; ++i) {
inst.indentLine(i);
}
});
});
CMsettings.config.value = html;
// Instantiante CodeMirror:
codemirror = CodeMirror(document.body, CMsettings.config);
codemirror.isDirty = false;
codemirror.on('change', function(inst) {
inst.isDirty = true;
});
var p = parent;
if(p.$('body').hasClass('dle_theme_dark')){
var body = document.body;
body.classList.add("dle_theme_dark");
}
}
function findDepth(haystack, needle)
{
"use strict";
var idx = haystack.indexOf(needle), depth = 0, x;
for (x = idx -1; x >= 0; x--) {
switch(haystack.charAt(x)) {
case '<': depth--; break;
case '>': depth++; break;
case '&': depth++; break;
}
}
return depth;
}
// This function is called by plugin.js, when user clicks 'Ok' button
function submit()
{
"use strict";
var cc = '�', isDirty = codemirror.isDirty, doc = codemirror.doc;
if (doc.somethingSelected()) {
// Clear selection:
doc.setCursor(doc.getCursor());
}
// Insert cursor placeholder (�)
doc.replaceSelection(cc);
var pos = codemirror.getCursor(),
curLineHTML = doc.getLine(pos.line);
if (findDepth(curLineHTML, cc) !== 0) {
// Cursor is inside a <tag>, don't set cursor:
curLineHTML = curLineHTML.replace(cc, '');
doc.replaceRange(curLineHTML, CodeMirror.Pos(pos.line, 0), CodeMirror.Pos(pos.line));
}
// Submit HTML to TinyMCE:
// [FIX] Cursor position inside JS, style or &nbps;
// Workaround to fix cursor position if inside script tag
var code = codemirror.getValue();
if(code.search(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi) !== -1 || code.search(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi) !== -1)
{
editor.setContent(codemirror.getValue().replace(cc, ''));
}
else
{
editor.setContent(codemirror.getValue().replace(cc, '<span id="CmCaReT"></span>'));
}
editor.isNotDirty = !isDirty;
if (isDirty) {
editor.nodeChanged();
}
// Set cursor:
var el = editor.dom.select('span#CmCaReT')[0];
if (el) {
editor.selection.scrollIntoView(el);
editor.selection.setCursorLocation(el,0);
editor.dom.remove(el);
}
}
</script>
<style type="text/css">
html,body { height:100%; }
body {
margin: 0;
}
.CodeMirror {
height: 100%;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
font-size: 13px;
line-height: 1.4285715;
word-spacing: 0.1em;
}
.dle_theme_dark .CodeMirror {
color: rgba(255,255,255,.9);
background-color: #282c39;
}
.dle_theme_dark .CodeMirror-gutters {
background: #263238;
color: #546E7A;
border: none;
}
.dle_theme_dark .CodeMirror-guttermarker,
.dle_theme_dark .CodeMirror-guttermarker-subtle,
.dle_theme_dark .CodeMirror-linenumber {
color: #546E7A;
}
.dle_theme_dark .CodeMirror-cursor {
border-left: 1px solid #FFCC00;
}
.dle_theme_dark div.CodeMirror-selected {
background: rgba(128, 203, 196, 0.2);
}
.dle_theme_dark .CodeMirror-line::selection,
.dle_theme_dark .CodeMirror-line>span::selection,
.dle_theme_dark .CodeMirror-line>span>span::selection {
background: rgba(128, 203, 196, 0.2);
}
.dle_theme_dark .CodeMirror-line::-moz-selection,
.dle_theme_dark .CodeMirror-line>span::-moz-selection,
.dle_theme_dark .CodeMirror-line>span>span::-moz-selection {
background: rgba(128, 203, 196, 0.2);
}
.dle_theme_dark .CodeMirror-activeline-background {
background: rgba(0, 0, 0, 0.5);
}
.dle_theme_dark .cm-keyword {
color: #C792EA;
}
.dle_theme_dark .cm-operator {
color: #89DDFF;
}
.dle_theme_dark .cm-variable-2 {
color: #EEFFFF;
}
.dle_theme_dark .cm-variable-3,
.dle_theme_dark .cm-type {
color: #f07178;
}
.dle_theme_dark .cm-builtin {
color: #FFCB6B;
}
.dle_theme_dark .cm-atom {
color: #F78C6C;
}
.dle_theme_dark .cm-number {
color: #FF5370;
}
.dle_theme_dark .cm-def {
color: #82AAFF;
}
.dle_theme_dark .cm-string {
color: #C3E88D;
}
.dle_theme_dark .cm-string-2 {
color: #f07178;
}
.dle_theme_dark .cm-comment {
color: #546E7A;
}
.dle_theme_dark .cm-variable {
color: #f07178;
}
.dle_theme_dark .cm-tag {
color: #FF5370;
}
.dle_theme_dark .cm-meta {
color: #FFCB6B;
}
.dle_theme_dark .cm-attribute {
color: #C792EA;
}
.dle_theme_dark .cm-property {
color: #C792EA;
}
.dle_theme_dark .cm-qualifier {
color: #DECB6B;
}
.dle_theme_dark .cm-variable-3,
.dle_theme_dark .cm-type {
color: #DECB6B;
}
.dle_theme_dark .cm-error {
color: rgba(255, 255, 255, 1.0);
background-color: #FF5370;
}
.dle_theme_dark .CodeMirror-matchingbracket {
text-decoration: underline;
color: white !important;
}
.cm-trailingspace {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==);
background-position: bottom left;
background-repeat: repeat-x;
}
</style>
</head>
<body>
</body>
</html>