Permalink
Browse files

Merge @somartist PR #92 (TinyMCE) + add CodeMagic to default TinyMCE …

…plugins in core.
  • Loading branch information...
1 parent 2a38449 commit a2aae40f313b7fd9a0a2ba0a17c32a52809660c0 @ryancramerdesign committed Mar 24, 2012
Showing with 2,551 additions and 3 deletions.
  1. +11 −0 wire/modules/Inputfield/InputfieldTinyMCE/InputfieldTinyMCE.js
  2. +5 −3 wire/modules/Inputfield/InputfieldTinyMCE/InputfieldTinyMCE.module
  3. +66 −0 wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/codemagic.htm
  4. +98 −0 wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/css/codemirror.css
  5. +28 −0 wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/css/default.css
  6. +59 −0 wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/css/style.css
  7. +1 −0 wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/editor_plugin.js
  8. +54 −0 wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/editor_plugin_src.js
  9. BIN wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/img/_code.png
  10. BIN wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/img/code.png
  11. BIN wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/img/icons/file.png
  12. BIN wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/img/icons/lens.png
  13. BIN wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/img/icons/redo.png
  14. BIN wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/img/icons/undo.png
  15. +436 −0 wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/js/beautify-html.js
  16. +1,147 −0 wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/js/beautify.js
  17. +581 −0 wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/js/codemagic.js
  18. +1 −0 .../modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/js/codemirror-compressed.js
  19. +3 −0 wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/langs/cs.js
  20. +14 −0 wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/langs/cs_dlg.js
  21. +3 −0 wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/langs/en.js
  22. +14 −0 wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/langs/en_dlg.js
  23. +3 −0 wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/langs/sk.js
  24. +14 −0 wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/langs/sk_dlg.js
  25. +13 −0 wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/licence.txt
@@ -93,13 +93,24 @@ var InputfieldTinyMCEConfigDefaults = {
$(document).ready(function() {
+ // Soma: convert config string that start with a [ to a js object
+ // this ensures it works with object type of configurations like template_templates:[{title:'mytemplate'},...]
+ function convertObjects(config) {
+ $.each(config, function(key, value) {
+ if(value.substr(0, 1) == "[" ) config[key] = eval(value);
+ });
+ return config;
+ };
+
var InputfieldTinyMCEPlugins = ['pwimage', 'pwlink', 'advimagescale', 'preelementfix'];
$.each(InputfieldTinyMCEPlugins, function(key, value) {
tinymce.PluginManager.load(value, config.InputfieldTinyMCE.url + 'plugins/' + value + '/editor_plugin.js');
});
$.each(config.InputfieldTinyMCE.elements, function(key, value) {
+ // Soma: convert config object values to objects if necessary
+ config[value] = convertObjects(config[value]);
tinyMCE.settings = $.extend(InputfieldTinyMCEConfigDefaults, config[value]);
if(config.InputfieldTinyMCE.language.length > 0) tinyMCE.settings.language = config.InputfieldTinyMCE.language;
@@ -3,17 +3,19 @@
/**
* An Inputfield for handling XHTML "textarea" form inputs
*
+ * Note that the codemagic plugin must live in TinyMCE's plugin dir, and thus must be replaced when upgrading TinyMCE versions
+ *
*/
class InputfieldTinyMCE extends InputfieldTextarea {
//const TinyMCEVersion = '3.3.9.2';
const TinyMCEVersion = '3.4.7';
protected $defaults = array(
- 'theme_advanced_buttons1' => 'formatselect,|,bold,italic,|,bullist,numlist,|,link,unlink,|,image,|,code,|,fullscreen',
+ 'theme_advanced_buttons1' => 'formatselect,|,bold,italic,|,bullist,numlist,|,link,unlink,|,image,|,codemagic,|,fullscreen',
'theme_advanced_buttons2' => '',
'theme_advanced_blockformats' => 'p,h2,h3,h4,blockquote,pre,code',
- 'plugins' => 'inlinepopups,safari,table,media,paste,fullscreen,preelementfix',
+ 'plugins' => 'inlinepopups,safari,table,media,paste,fullscreen,preelementfix,codemagic',
'valid_elements' => '@[id|class],a[href|target|name],strong/b,em/i,br,img[src|id|class|width|height|alt],ul,ol,li,p[class],h2,h3,h4,blockquote,-p,-table[border=0|cellspacing|cellpadding|width|frame|rules|height|align|summary|bgcolor|background|bordercolor],-tr[rowspan|width|height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope],#th[colspan|rowspan|width|height|align|valign|scope],pre,code',
'content_css' => '',
'custom' => '',
@@ -22,7 +24,7 @@ class InputfieldTinyMCE extends InputfieldTextarea {
public static function getModuleInfo() {
return array(
'title' => 'TinyMCE',
- 'version' => 100,
+ 'version' => 347,
'summary' => 'WYSIWYG rich text editor',
'permanent' => true,
);
@@ -0,0 +1,66 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>{#codemagic_dlg.code_title}</title>
+ <script type="text/javascript" src="../../tiny_mce_popup.js"></script>
+ <script type="text/javascript" src="js/codemirror-compressed.js"></script>
+ <script type="text/javascript" src="js/codemagic.js"></script>
+ <script type="text/javascript" src="js/beautify.js"></script>
+ <script type="text/javascript" src="js/beautify-html.js"></script>
+
+ <link rel="stylesheet" media="all" type="text/css" href="css/style.css" />
+ <link rel="stylesheet" media="all" type="text/css" href="css/codemirror.css" />
+ <link rel="stylesheet" media="all" type="text/css" href="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">{#codemagic_dlg.code_label}</label></div>
+
+ <div class="editor-buttons">
+ <a id="undo" class="disabled" href="javascript: void(0)" title="{#codemagic_dlg.undo}" onclick="undo();"><img src="img/icons/undo.png" alt="{#codemagic_dlg.undo}" /></a>
+ <a id="redo" class="disabled" href="javascript: void(0)" title="{#codemagic_dlg.redo}" onclick="redo();"><img src="img/icons/redo.png" alt="{#codemagic_dlg.redo}" /></a>
+ <a id="search_replace" href="javascript: void(0)" title="{#codemagic_dlg.search_replace}" onclick="toggleSearch(this, 'searchWindow');"><img src="img/icons/lens.png" alt="{#codemagic_dlg.search_replace}" /></a>
+ <a id="reintendt" href="javascript: void(0)" title="{#codemagic_dlg.reintendt}" onclick="reIntendt('htmlSource');"><img src="img/icons/file.png" alt="{#codemagic_dlg.reintendt}" /></a>
+ <div style="clear: both;"></div>
+ </div>
+
+ <div id="wrapline" style="float: right">
+ <input type="checkbox" name="autocompletion" id="autocompletion" onclick="toggleAutocompletion(this);" class="wordWrapCode" checked="checked" /><label for="autocompletion">{#codemagic_dlg.toggle_autocompletion}</label> &nbsp;&nbsp;&nbsp;&nbsp;
+ <input type="checkbox" name="highlighting" id="highlighting" onclick="toggleHighlighting(this, 'htmlSource');" class="wordWrapCode" checked="checked" /><label for="highlighting">{#codemagic_dlg.toggle_highlighting}</label>
+ </div>
+ <div style="clear: both;"></div>
+
+
+ <div id="searchWindow" class="search-window" style="display: none;">
+ <h2>{#codemagic_dlg.search_replace}</h2>
+ <table>
+ <tr>
+ <td colspan="2">&nbsp;</td>
+ </tr>
+ <tr>
+ <td><label for="query">{#codemagic_dlg.search}</label>:</td>
+ <td><input id="query" type="text" style="width: 150px" /></td>
+ </tr>
+ <tr>
+ <td><label for="replace">{#codemagic_dlg.replace}</label>:</td>
+ <td><input id="replace" type="text" style="width: 150px" /></td>
+ </tr>
+ <tr>
+ <td colspan="2">&nbsp;</td>
+ </tr>
+ <tr>
+ <td align="left"><input onclick="searchCode(); return false;" type="submit" value="{#codemagic_dlg.search}" class="button" style="float: none" /></td>
+ <td align="right"><input onclick="replaceCode(); return false;" type="submit" value="{#codemagic_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>
@@ -0,0 +1,98 @@
+.CodeMirror {
+ overflow: auto;
+ height: 90%;
+ line-height: 14px;
+ font-size: 13px;
+ font-family: monospace;
+background-color: #fff;
+border:1px solid #abc6dd;
+ _position: relative; /* IE6 hack */
+}
+
+.CodeMirror-gutter {
+ position: absolute; left: 0; top: 0;
+ background-color: #f7f7f7;
+ border-right: 1px solid #eee;
+ min-width: 2em;
+ height: 100%;
+}
+.CodeMirror-gutter-text {
+ color: #aaa;
+ text-align: right;
+ padding: .4em .2em .4em .4em;
+}
+.CodeMirror-lines {
+ padding: .4em;
+}
+
+.CodeMirror pre {
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+ -o-border-radius: 0;
+ border-radius: 0;
+ border-width: 0; margin: 0; padding: 0; background: transparent;
+ font-family: inherit;
+}
+
+.CodeMirror pre.activeline {
+ background: none repeat scroll 0 0 #efefef !important;
+}
+
+.CodeMirror-cursor {
+ z-index: 10;
+ position: absolute;
+ visibility: hidden;
+ border-left: 1px solid black !important;
+}
+.CodeMirror-focused .CodeMirror-cursor {
+ visibility: visible;
+}
+
+span.CodeMirror-selected {
+ background: #ccc !important;
+ color: HighlightText !important;
+}
+.CodeMirror-focused span.CodeMirror-selected {
+ background: Highlight !important;
+}
+
+.CodeMirror-matchingbracket {color: #000 !important; background-color: #a0e0fc !important;}
+.CodeMirror-nonmatchingbracket {color: #f22 !important;}
+
+.CodeMirrorToolBar
+{
+ border:1px solid #abc6dd;
+ border-bottom: 0;
+ background:#e5effd;
+ margin:0px;
+ padding:0;
+}
+.CMBtn
+{
+ border:1px solid #b0c8e8;
+ background:#cadcf0;
+ font :700 10px verdana;
+ margin:5px;
+ border-radius: 2px;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ color: #6497d9;
+}
+
+.searched {
+ background-color: yellow;
+}
+
+.completions {
+ position: absolute;
+ border: 1px solid #000000;
+ background-color: #F0F0EE;
+ padding: 3px;
+}
+
+.completions select {
+ background-color: #FFFFFF;
+ border: 1px solid #B5A69C;
+ width: 200px;
+ height: 144px;
+}
@@ -0,0 +1,28 @@
+span.css-at {color: #0000ff;}
+span.css-unit {color: #0000ff;}
+span.css-value {color: #0000ff;}
+span.css-identifier {color: #800000; font-weight: bold;}
+span.css-selector {color: #ff00ff;}
+span.css-important {color: #00F;}
+span.css-colorcode {color: #0000ff;}
+span.css-comment {color: gray;}
+span.css-string {color: #008000;}
+
+
+span.js-keyword {color: #000000; font-weight: bold;}
+span.js-variable {color: #0000FF;}
+span.js-property {color: #0000FF; font-weight: bold;}
+span.js-atom {color: #ff0000;}
+span.js-variabledef {color: #0000FF;}
+span.js-localvariable {color: #0000FF;}
+span.js-comment {color: #008000;}
+span.js-string {color: #b70000;}
+
+
+span.xml-tag {color: #800080; font-weight: bold;}
+span.xml-attribute {color: #8080ff;}
+span.xml-attname {color: #008080;}
+span.xml-comment {color: #008000;}
+span.xml-cdata {color: #48a;}
+span.xml-processing {color: #999;}
+span.xml-entity {color: #008000; font-weight: bold;}
@@ -0,0 +1,59 @@
+a, img,
+a img {
+ border: none;
+}
+
+.editor-buttons {
+ margin-left: -46px;
+ position: absolute;
+ left: 50%;
+ width: 95px;
+ top: 3px;
+}
+
+.editor-buttons a {
+ float: left;
+ display: block;
+ text-align: center;
+ width: 16px;
+ padding: 2px;
+ border: 1px solid #F0F0EE;
+ margin-right: 1px;
+}
+
+.editor-buttons a:hover,
+.editor-buttons a.selected {
+ background-color: #C2CBE0;
+ border: 1px solid #0A246A;
+}
+
+.editor-buttons a.disabled,
+.editor-buttons a.disabled:hover {
+ background-color: transparent;
+ border: 1px solid #F0F0EE;
+ cursor: default;
+}
+
+.editor-buttons a.disabled img {
+ opacity: .35;
+ filter: alpha(opacity=35);
+ -ms-filter: "alpha(opacity=35)";
+}
+
+.search-window {
+ background-color: #F0F0EE;
+ border: 1px solid #ABC6DD;
+ padding: 10px;
+ position: absolute;
+ right: -1px;
+ top: -1px;
+ z-index: 1000;
+}
+
+.htmlSource {
+ display: block;
+ width: 100%;
+ height: 100%;
+ font-family: 'Courier New', Courier, monospace;
+ font-size: 12px;
+}
@@ -0,0 +1 @@
+(function(){tinymce.PluginManager.requireLangPack('codemagic');tinymce.create('tinymce.plugins.CodeMagic',{init:function(ed,url){ed.addCommand('mceCodeMagic',function(){ed.windowManager.open({file:url+'/codemagic.htm',width:900,height:600,inline:1,maximizable:true},{plugin_url:url})});ed.addButton('codemagic',{title:'codemagic.editor_button',cmd:'mceCodeMagic',image:url+'/img/code.png'});ed.onNodeChange.add(function(ed,cm,n,co){cm.setDisabled('link',co&&n.nodeName!='A');cm.setActive('link',n.nodeName=='A'&&!n.name)})},getInfo:function(){return{longname:'CodeMagic',author:'Sutulustus',authorurl:'http://www.triad.sk/#/en',version:'0.9.5'}}});tinymce.PluginManager.add('codemagic',tinymce.plugins.CodeMagic)})();
@@ -0,0 +1,54 @@
+/**
+ * editor_plugin_src.js
+ *
+ * Copyright 2011, Sutulustus - Triad Advertising
+ * Released under MIT License.
+ *
+ * License: http://www.opensource.org/licenses/mit-license.php
+ */
+
+(function () {
+ tinymce.PluginManager.requireLangPack('codemagic');
+ tinymce.create('tinymce.plugins.CodeMagic', {
+
+ init: function (ed, url) {
+
+ // Register commands
+ ed.addCommand('mceCodeMagic', function() {
+ ed.windowManager.open({
+ file : url + '/codemagic.htm',
+ width : 900,
+ height : 600,
+ inline : 1,
+ maximizable: true
+ }, {
+ plugin_url : url
+ });
+ });
+
+ // Register buttons
+ ed.addButton('codemagic', {
+ title: 'codemagic.editor_button',
+ cmd: 'mceCodeMagic',
+ image: url + '/img/code.png'
+ });
+
+ ed.onNodeChange.add(function(ed, cm, n, co) {
+ cm.setDisabled('link', co && n.nodeName != 'A');
+ cm.setActive('link', n.nodeName == 'A' && !n.name);
+ });
+ },
+
+ getInfo: function () {
+ return {
+ longname: 'CodeMagic',
+ author: 'Sutulustus',
+ authorurl: 'http://www.triad.sk/#/en',
+ version: '0.9.5'
+ };
+ }
+ });
+
+ // Register plugin
+ tinymce.PluginManager.add('codemagic', tinymce.plugins.CodeMagic);
+})();
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong. Retry.

2 comments on commit a2aae40

@apeisa
apeisa commented on a2aae40 Mar 26, 2012

Built in codemagic doesn't work, when I am using translated TinyMCE:

Failed to load: /wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins/codemagic/langs/fi.js

This causes whole TinyMCE fail to load.

@ryancramerdesign

Thanks for letting me know. I'm not sure what to do about this one because it looks like codemagic only comes with translations in English, Czech and Slovak. I'm not too happy about TinyMCE's language implementation which apparently has no fallback/default if a language isn't present. Perhaps I should have codemagic disabled by default. But it is such a major benefit over the regular 'code' button, that I hate to remove it.

In your case, you'll want to edit the field that isn't working and modify the 'advanced tinymce settings' in that field to replace 'codemagic' with 'code' in the buttons line 1, and remove 'codemagic' from the plugins line. I will think more here about how we might find a way to keep codemagic without breaking other languages.

Please sign in to comment.