nach dem ich mich über einen nicht vorhandenen Syntax Highlighter in TinyMCE Code Editor geärgert habe, ist mir die Idee gekommen, vorhandenen Plugin an das Redaxo TinyMCS Plugin anzupassen.
Dazu sind nur wenige Schritte erforderlich. Wer sich selbst die Konfiguration basteln will, hier die Anleitung:
Installation Codemagic Plugin für Redaxo 4.5.1 / TinyMCE 3.5.10 (Addon 2.5)
1. Plugin Herunterladen:
https://github.com/tinymce-plugins/codemagic
2. Inhalt der Zip-Datei nach "/redaxo/files/addons/tinymce/tiny_mce/plugins/codemagic" kopieren
3. Unter "/redaxo/files/addons/tinymce/tiny_mce/plugins/codemagic/css/style.css"
Folgende Parameter ändern:
Button Positionierung:
Code: Alles auswählen
.editor-buttons {
margin-left: -46px;
position: absolute; <<<<<< LÖSCHEN
left: 50%;
width: 95px;
top: 3px;
}Code: Alles auswählen
.search-window {
background-color: #F0F0EE;
border: 1px solid #ABC6DD;
padding: 10px;
position: absolute; <<<<<< in RELATIV ändern
right: -1px;
top: -1px;
z-index: 1000;
}5. Neue Datei mit dem namen "source_editor.htm" erstellen und mit folgendem Inhalt befüllen:
Code: Alles auswählen
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{#advanced_dlg.code_title}</title>
<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
<script type="text/javascript" src="../../plugins/codemagic/js/codemirror-compressed.js"></script>
<script type="text/javascript" src="../../plugins/codemagic/js/codemagic.js"></script>
<script type="text/javascript" src="../../plugins/codemagic/js/beautify.js"></script>
<script type="text/javascript" src="../../plugins/codemagic/js/beautify-html.js"></script>
<link rel="stylesheet" media="all" type="text/css" href="../../plugins/codemagic/css/style.css" />
<link rel="stylesheet" media="all" type="text/css" href="../../plugins/codemagic/css/codemirror.css" />
<link rel="stylesheet" media="all" type="text/css" href="../../plugins/codemagic/css/default.css" />
</head>
<body onresize="resizeInputs();" style="display: none; overflow: hidden;">
<form name="source" onsubmit="saveContent(); return false;" action="#">
<div style="float: left" class="title"><label for="htmlSource">{#advanced_dlg.code_title} </label></div>
<div class="editor-buttons" style="float: right">
<a id="undo" class="disabled" href="javascript: void(0)" title="{#advanced_dlg.undo}" onclick="undo();"><img src="../../plugins/codemagic/img/icons/undo.png" alt="{#advanced_dlg.undo}" /></a>
<a id="redo" class="disabled" href="javascript: void(0)" title="{#advanced_dlg.redo}" onclick="redo();"><img src="../../plugins/codemagic/img/icons/redo.png" alt="{#advanced_dlg.redo}" /></a>
<a id="search_replace" href="javascript: void(0)" title="{#advanced_dlg.search_replace}" onclick="toggleSearch(this, 'searchWindow');"><img src="../../plugins/codemagic/img/icons/lens.png" alt="{#advanced_dlg.search_replace}" /></a>
<a id="reintendt" href="javascript: void(0)" title="{#advanced_dlg.reintendt}" onclick="reIntendt('htmlSource');"><img src="../../plugins/codemagic/img/icons/file.png" alt="{#advanced_dlg.reintendt}" /></a>
<div style="clear: both;"></div>
</div><br><br>
<div id="wrapline" style="float: left">
<input type="checkbox" name="wraptext" id="wraptext" onclick="toggleWrapText(this);" class="wordWrapCode" checked="checked" /><label for="wraptext">{#advanced_dlg.toggle_wraptext} </label> <br>
<input type="checkbox" name="autocompletion" id="autocompletion" onclick="toggleAutocompletion(this);" class="wordWrapCode" checked="checked" /><label for="autocompletion">{#advanced_dlg.toggle_autocompletion}</label> <br>
<input type="checkbox" name="highlighting" id="highlighting" onclick="toggleHighlighting(this, 'htmlSource');" class="wordWrapCode" checked="checked" /><label for="highlighting">{#advanced_dlg.toggle_highlighting}</label>
</div>
<div style="clear: both;"></div>
<div id="searchWindow" class="search-window" style="display: none;">
<h2>{#advanced_dlg.search_replace}</h2>
<table>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td><label for="query">{#advanced_dlg.search}</label>:</td>
<td><input id="query" type="text" style="width: 150px" /></td>
</tr>
<tr>
<td><label for="replace">{#advanced_dlg.replace}</label>:</td>
<td><input id="replace" type="text" style="width: 150px" /></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td align="left"><input onclick="searchCode(); return false;" type="submit" value="{#advanced_dlg.search}" class="button" style="float: none" /></td>
<td align="right"><input onclick="replaceCode(); return false;" type="submit" value="{#advanced_dlg.replace}" class="button" style="float: none" /></td>
</tr>
</table>
</div>
<textarea name="htmlSource" id="htmlSource" rows="15" cols="100" dir="ltr" class="htmlSource"></textarea>
<div class="mceActionPanel">
<input type="submit" role="button" name="insert" value="{#update}" id="insert" />
<input type="button" role="button" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" id="cancel" />
</div>
</form>
</body>
</html>Bitte beachten, die Variablen in " " zu setzen...
7. Fertig..
Jetzt habt ihre einen Syntax Highlighter (+ paar andere nette Sachen) in dem Redaxo / TinyMCE Code Editor.
P.S. Wer verbesserungsvorschläge hat, bitte her damin...
