ace editor, markdown editor

public/tinymce/plugins/leanote_code/plugin.js

@@ -5,40 +5,194 @@
 tinymce.PluginManager.requireLangPack('leanote_code');
 
 tinymce.PluginManager.add('leanote_code', function(editor, url) {
+	var me = this;
 	var ed = editor;
-	
-	// 切换代码
-	function toggleLang(value) {
+
+	// clearUndo没必要, 支持
+	// depreciated
+	function clearUndo() {
+		// 必须要setTimeout
+		ed.undoManager.clear();
+		setTimeout(function() {
+			ed.undoManager.clear();
+		});
+	}
+
+	function html2BreakLine(html) {
+		if(!html) {
+			return html;
+		}
+		if(typeof html == "object") {
+			html = $(html).html();
+		}
+		// 先<br />=>\n, 再<p>=>\n, 再把连续的两个\n => 1个\n
+		return html.replace(/\<br *\/*\>/gi,"\n").replace(/<\/(p|li|div|ul|ol|hr)>/, "\n").replace(/(<([^>]+)>)/gi, "").replace(/\n\n/g, "\n");
+	}
+	function html2BreakLineForPre(html) {
+		if(!html) {
+			return html;
+		}
+		if(typeof html == "object") {
+			html = $(html).html();
+		}
+		return html.replace(/\n/g, "<br />"); // .replace(/\<br *\/*\>/gi,"\n").replace(/<\/(p|li|div|ul|ol|hr)>/, "\n").replace(/(<([^>]+)>)/gi, "");
+	}
+
+	// brush 刷子
+	function toggleCode(brush) {
+		ed = tinymce.activeEditor;
 		var node = ed.selection.getNode();
+
 		var selectedContent = ed.selection.getContent(); // 包含了html标签
-		var everBookmark = ed.selection.getBookmark(); // 光标, 为了处理后重新定位到那个位置
+		// var everBookmark = ed.selection.getBookmark(); // 光标, 为了处理后重新定位到那个位置
 		var text;
+
+		var aceEditorAndPre = LeaAce.isInAce(node);
+		var aceEditor = false;
+		var $pre = false;
+		if(aceEditorAndPre) {
+			aceEditor = aceEditorAndPre[0];
+			$pre = aceEditorAndPre[1];
+		}
+
+		// 去掉
+		// 当pre->text时会有遗留, 这里干脆清除之
+		$('#editorContent .toggle-raw').remove();
+
+		log('curNode:')
+		log(node);
+		// s = ed.selection;
+		// log(s);
+		// log($pre.get(0));
 		
-		// 如果在pre下, 只需要改brush即可
-		if(node.nodeName == 'PRE') {
-			$(node).attr("class", 'brush:' + value);
-		// 不能把BODY转成pre
-		} else if(node.nodeName == "BODY") {
-			return;
-		// 否则, 当所选的, 或者当前行转成code
-		} else {
-			try {
-				text = $(selectedContent).text();
-			} catch(e) {
+		if(brush && brush != "convert") {
+			if(aceEditor) {
+				aceEditor.session.setMode("ace/mode/" + brush);
 			}
-			if(!text) {
-				text = $(node).text();
-				$(node).replaceWith('<pre class="brush:' + value + '">'+ text + "</pre>");
+			// 不支持ace的情况
+			if(!$pre && node.nodeName  == "PRE") {
+				$pre = $(node);
+			}
+			if($pre) {
+				var everBrush = LeaAce.getPreBrush($pre);
+				$pre.removeClass(everBrush).addClass("brush:" + brush);
+				return;
+			}
+		// 不能把BODY转成pre
+		} else if(brush && (node.nodeName == "BODY" || $(node).attr('id') == 'editorContent')) {
+			return;
+		}
+
+		// 对于不支持ace的情况
+		if(!LeaAce.canAce()) {
+			if(node.nodeName != "PRE") {
+				node = $(node).closest("pre").get(0);
+			}
+			if(node && node.nodeName == "PRE") {
+				var $pre = $(node);
+				var val = $pre.html();
+				if(val) {
+					val = val.replace(/\n/g, "<br />");
+				}
+				$pre.replaceWith("<p>" + val + "</p>");
 			} else {
-				ed.insertContent('<pre class="brush:' + value + '">' + text + "</pre>");
+				try {
+					text = $.trim($(selectedContent).text());
+				} catch(e) {
+				}
+				// 可能不是一个完整的html, 可能是一个文本此时.html()无
+				if(!text) {
+					text = $.trim(selectedContent);
+				}
+				var pre = null;
+				var id = LeaAce.getAceId();
+				if(text) {
+					// 不是, 那么替换成<pre>
+					text = html2BreakLineForPre(text);
+					pre = '<pre id="' + id + '">' + text + '</pre>';
+					ed.insertContent(pre);
+				} else {
+					if(node) {
+						text = html2BreakLineForPre(node);
+						pre = '<pre id="' + id + '">' + text + '</pre>';
+						$(node).replaceWith(pre);
+					} else {
+						pre = '<pre id="' + id + '">' + text + '</pre>';
+						ed.insertContent(pre);
+					}
+				}
+				if(pre) {
+					/*
+					var rng = ed.selection.getRng();
+					var $pre = $(pre);
+					rng.setStart($pre.get(0), 0);
+					rng.setEnd($pre.get(0), 0);
+					*/
+				}
+			}
+			// ed.selection.moveToBookmark(everBookmark);
+			return;
+		}
+
+		// 支持ace情况
+
+		// 如果是用户选择了某内容, 其父<pre>不会包含进来, 此时还是要判断node的父是否是PRE, 
+		var id = LeaAce.getAceId(); 
+
+		// 防止ace处理时添加额外的历史
+		// tinymce.activeEditor.undoManager.add();
+		LeaAce.disableAddHistory();
+
+		if(aceEditor) {
+			var val = aceEditor.getValue();
+			// TODO 实体转成&lt;&rg;
+			val = val.replace(/</g, "&lt;");
+			val = val.replace(/>/g, "&gt;");
+			val = val.replace(/\n/g, "<br />");
+			$pre.replaceWith("<p>" + val + "</p>");
+			aceEditor.destroy();
+		} else {
+			if(node.nodeName == "PRE") {
+				// $(node).find('.toggle-raw').remove();
+				// 表示在pre下, 但不是aceEditor, toggle后的
+				var $pre = $(node);
+				var val = $pre.html();
+				if(val) {
+					val = val.replace(/\n/g, "<br />");
+				}
+				$pre.replaceWith("<p>" + val + "</p>");
+				return;
+			}
+			var text = selectedContent;
+			if(!text && (node.nodeName == "BODY" || $(node).attr('id') == 'editorContent')) {
+				return;
+			}
+
+			if(text) {
+				// 不是, 那么替换成<pre>
+				// log(text);
+				text = html2BreakLine(text);
+				// log(text);
+				ed.insertContent('<pre id="' + id + '">' + text + '</pre>');
+			} else {
+				// 不是, 那么替换成<pre>
+				text = html2BreakLine(node);
+				$(node).replaceWith("<pre id='" + id  + "'>" + text + "</pre>");
+			}
+			var editor = LeaAce.initAce(id);
+			if(editor) {
+				editor.focus();
+				if(brush) {
+					editor.session.setMode("ace/mode/" + brush);
+				}
 			}
 		}
-		ed.selection.moveToBookmark(everBookmark);
-	}
-	
+		// ed.selection.moveToBookmark(everBookmark);
+		LeaAce.resetAddHistory();
+	};
+		
 	// 切换代码
 	// 用户选择了/用户光标所在行
-//	ed.addCommand('toggleCode', );
 	
 	//----------------
 	function createListBoxChangeHandler() {
@@ -49,31 +203,56 @@ tinymce.PluginManager.add('leanote_code', function(editor, url) {
 				var value = null;
 				try {
 					var node = editor.selection.getNode();
-					if(node.nodeName == "PRE") {
-						value = $.trim($(node).attr("class").split(":")[1]);
+					if(node.nodeName != "PRE") {
+						node = $(node).closest("pre").get(0);
+					}
+					if(node) {
+						var aceEditorAndPre = LeaAce.isInAce(node);
+						var aceEditor = false;
+						var $pre = false;
+						if(aceEditorAndPre || node.nodeName == "PRE") {
+							if(aceEditorAndPre) {
+								aceEditor = aceEditorAndPre[0];
+								$pre = aceEditorAndPre[1];
+							} else {
+								$pre = $(node);
+							}
+							var brush = LeaAce.getPreBrush($pre);
+							value = $.trim(brush.split(":")[1]);
+
+							self.diableValue("convert", false);
+						} else {
+							self.diableValue("convert", true);
+						}
 					}
 				} catch(e) {
+					log(e);
+				}
+				if(value != "convert") {
+					self.value(value);
 				}
-				self.value(value);
 			});
 		};
 	}
 	    
     editor.addButton('leanote_code', function() {
-    	var langs = ["CSS:css", 
-    	             "C/C++:cpp", 
-    	             "C#:c#",
-    	             "Javascript:javascript", 
-    	             "Java:java", 
-    	             "PHP:php",
-    	             "Python:python",
-    	             "Shell:shell", 
-    	             "Delphi:delphi",
-    	             "Golang:golang",
-    	             "Erlang:erlang",
-    	             "Groovy:groovy",
-    	             "ActionScript:actionScript"
-    	             ];
+    	var langs = [
+    		"Convert Code:convert",
+			"CSS:css", 
+            "C/C++:c_cpp", 
+            "C#:csharp",
+            "HTML:html",
+            "Javascript:javascript", 
+            "Java:java", 
+            "PHP:php",
+            "Python:python",
+            "Shell:shell", 
+            "Delphi:delphi",
+            "Golang:golang",
+            "Erlang:erlang",
+            "Groovy:groovy",
+            "ActionScript:actionScript"
+         ];
 		var items = [];
     	for(var i in langs) {
     		var each = langs[i].split(":");
@@ -88,51 +267,105 @@ tinymce.PluginManager.add('leanote_code', function(editor, url) {
 			onselect: function(e) {
 				// 这里, change或不转成code
 				if (e.control.settings.value) {
-					toggleLang(e.control.settings.value);
+					toggleCode(e.control.settings.value);
 				}
 			},
 			onPostRender: createListBoxChangeHandler(items)
 		};
 	});
-    
+
+	editor.addButton('leanote_inline_code', {
+		icon: 'code',
+		tooltip: 'Inline Code',
+		stateSelector: 'code',
+		onclick: function() {
+			editor.execCommand('mceToggleFormat', false, 'code');
+		}
+	});
+
+	if(LeaAce.canAce()) {
+		editor.addButton('leanote_ace_pre', {
+			icon: 'code',
+			image: url + '/img/ace-pre2.png',
+			tooltip: 'Toggle ace with raw html',
+			active: LeaAce.isAce === false,
+			onclick: function() {
+				// 表示之前是ace->pre状态
+				// 现在转成ace
+				if(LeaAce.isAce === false) {
+					this.active(false);
+					LeaAce.isAce = true;
+					LeaAce.initAceFromContent(editor);
+				// 转成pre
+				} else {
+					this.active(true);
+					LeaAce.allToPre(editor);
+					LeaAce.isAce = false;
+				}
+			}
+		});
+	}
+
     //----------------
 	// 切换代码
 	// 用户选择了/用户光标所在行
-	ed.addCommand('toggleCode', function() {
-		var node = ed.selection.getNode();
-		var selectedContent = ed.selection.getContent(); // 包含了html标签
-		var everBookmark = ed.selection.getBookmark(); // 光标, 为了处理后重新定位到那个位置
-		var text;
-		try {
-			text = $.trim($(selectedContent).text());
-		} catch(e) {
-		}
-		// 可能不是一个完整的html, 可能是一个文本此时.html()无
-		if(!text) {
-			text = $.trim(selectedContent);
-		}
-		// 如果是用户选择了某内容, 其父<pre>不会包含进来, 此时还是要判断node的父是否是PRE, 
-		if(text) {
-			// 是pre, 那么 去掉pre之
-			if(node.nodeName == "PRE") {
-				$(node).replaceWith("<p>" + $(node).html() + "</p>");
-			} else {
-				// 不是, 那么替换成<pre>
-				ed.insertContent("<pre>" + text + "</pre>");
-			}
-		} else {
-			// 没有选择内容, 那么是鼠标的所处行, 同样检测该行是否是
-			if(node.nodeName == "PRE") {
-				$(node).replaceWith("<p>" + $(node).html().replace(/\n/g, "<br />") + "</p>");
-				
-			} else {
-				// 不是, 那么替换成<pre>
-				$(node).replaceWith("<pre>" + $(node).html() + "</pre>");
-			}
-		}
-		ed.selection.moveToBookmark(everBookmark);
-	});
+	ed.addCommand('toggleCode', toggleCode);
     
     ed.addShortcut('ctrl+shift+c', '', 'toggleCode');
 	ed.addShortcut('command+shift+c', '', 'toggleCode');
+
+	// life
+	if(LeaAce.canAce()) {
+		editor.on('keydown', function(e) {
+			// paste时
+			var ace = LeaAce.nowIsInAce();
+			if(ace) {
+				setTimeout(function() {
+					ace[0].focus();
+				});
+				return true;
+			}
+
+			// todo
+			/*
+			var keyCode = e.keyCode;
+			if(keyCode == 8 || keyCode == 46) {
+				// alert(keyCode);
+				// 如果之前是Ace
+				// var node = editor.selection.getNode();
+				// log(node);
+				log(e);
+				return false;
+			}
+			*/
+		});
+	}
+
+	// indent outdent
+	ed.on('keydown', function(e) {
+		var num = e.which ? e.which : e.keyCode;
+    	if (num == 9) { // tab pressed
+    		if(!e.shiftKey) {
+ 				// ed.execCommand('Indent');
+    			// TODO 如果当前在li, ul, ol下不执行!!
+    			// 如果在pre下就加tab
+	    		// var node = ed.selection.getNode();
+	    		/*
+				if(node.nodeName == "PRE") {
+                    ed.execCommand('mceInsertHTML', false, '\x09'); // inserts tab
+				} else {
+				*/
+				ed.insertContent("&nbsp;&nbsp;&nbsp;&nbsp;");
+                // ed.execCommand('mceInsertHTML', false, "&nbsp;&nbsp;&nbsp;&nbsp;"); // inserts 空格
+				// }
+    		} else {
+    			// delete 4 个空格
+				// ed.execCommand('Outdent');
+    		}
+    		
+            e.preventDefault();
+            e.stopPropagation();   			
+            return false;
+       }
+	});
 });

public/tinymce/plugins/leanote_code/plugin.min.js

@@ -1 +1 @@
-tinymce.PluginManager.requireLangPack("leanote_code"),tinymce.PluginManager.add("leanote_code",function(e){function t(e){var t,o=n.selection.getNode(),a=n.selection.getContent(),r=n.selection.getBookmark();if("PRE"==o.nodeName)$(o).attr("class","brush:"+e);else{if("BODY"==o.nodeName)return;try{t=$(a).text()}catch(c){}t?n.insertContent('<pre class="brush:'+e+'">'+t+"</pre>"):(t=$(o).text(),$(o).replaceWith('<pre class="brush:'+e+'">'+t+"</pre>"))}n.selection.moveToBookmark(r)}function o(){return function(){var t=this;e.on("nodeChange",function(){var o=null;try{var n=e.selection.getNode();"PRE"==n.nodeName&&(o=$.trim($(n).attr("class").split(":")[1]))}catch(a){}t.value(o)})}}var n=e;e.addButton("leanote_code",function(){var e=["CSS:css","C/C++:cpp","C#:c#","Javascript:javascript","Java:java","PHP:php","Python:python","Shell:shell","Delphi:delphi","Golang:golang","Erlang:erlang","Groovy:groovy","ActionScript:actionScript"],n=[];for(var a in e){var r=e[a].split(":");n.push({text:r[0],value:r[1]})}return{type:"listbox",text:"codeLang",tooltip:"toggleCode",values:n,fixedWidth:!0,onselect:function(e){e.control.settings.value&&t(e.control.settings.value)},onPostRender:o(n)}}),n.addCommand("toggleCode",function(){var e,t=n.selection.getNode(),o=n.selection.getContent(),a=n.selection.getBookmark();try{e=$.trim($(o).text())}catch(r){}e||(e=$.trim(o)),e?"PRE"==t.nodeName?$(t).replaceWith("<p>"+$(t).html()+"</p>"):n.insertContent("<pre>"+e+"</pre>"):$(t).replaceWith("PRE"==t.nodeName?"<p>"+$(t).html().replace(/\n/g,"<br />")+"</p>":"<pre>"+$(t).html()+"</pre>"),n.selection.moveToBookmark(a)}),n.addShortcut("ctrl+shift+c","","toggleCode"),n.addShortcut("command+shift+c","","toggleCode")});
+tinymce.PluginManager.requireLangPack("leanote_code"),tinymce.PluginManager.add("leanote_code",function(e,t){function n(e){return e?("object"==typeof e&&(e=$(e).html()),e.replace(/\<br *\/*\>/gi,"\n").replace(/<\/(p|li|div|ul|ol|hr)>/,"\n").replace(/(<([^>]+)>)/gi,"").replace(/\n\n/g,"\n")):e}function o(e){return e?("object"==typeof e&&(e=$(e).html()),e.replace(/\n/g,"<br />")):e}function a(e){r=tinymce.activeEditor;var t,a=r.selection.getNode(),c=r.selection.getContent(),i=LeaAce.isInAce(a),l=!1,d=!1;if(i&&(l=i[0],d=i[1]),$("#editorContent .toggle-raw").remove(),log("curNode:"),log(a),e&&"convert"!=e){if(l&&l.session.setMode("ace/mode/"+e),d||"PRE"!=a.nodeName||(d=$(a)),d){var s=LeaAce.getPreBrush(d);return void d.removeClass(s).addClass("brush:"+e)}}else if(e&&("BODY"==a.nodeName||"editorContent"==$(a).attr("id")))return;if(LeaAce.canAce()){var p=LeaAce.getAceId();if(LeaAce.disableAddHistory(),l){var g=l.getValue();g=g.replace(/</g,"&lt;"),g=g.replace(/>/g,"&gt;"),g=g.replace(/\n/g,"<br />"),d.replaceWith("<p>"+g+"</p>"),l.destroy()}else{if("PRE"==a.nodeName){var d=$(a),g=d.html();return g&&(g=g.replace(/\n/g,"<br />")),void d.replaceWith("<p>"+g+"</p>")}var t=c;if(!t&&("BODY"==a.nodeName||"editorContent"==$(a).attr("id")))return;t?(t=n(t),r.insertContent('<pre id="'+p+'">'+t+"</pre>")):(t=n(a),$(a).replaceWith("<pre id='"+p+"'>"+t+"</pre>"));var u=LeaAce.initAce(p);u&&(u.focus(),e&&u.session.setMode("ace/mode/"+e))}LeaAce.resetAddHistory()}else if("PRE"!=a.nodeName&&(a=$(a).closest("pre").get(0)),a&&"PRE"==a.nodeName){var d=$(a),g=d.html();g&&(g=g.replace(/\n/g,"<br />")),d.replaceWith("<p>"+g+"</p>")}else{try{t=$.trim($(c).text())}catch(v){}t||(t=$.trim(c));var h=null,p=LeaAce.getAceId();t?(t=o(t),h='<pre id="'+p+'">'+t+"</pre>",r.insertContent(h)):a?(t=o(a),h='<pre id="'+p+'">'+t+"</pre>",$(a).replaceWith(h)):(h='<pre id="'+p+'">'+t+"</pre>",r.insertContent(h))}}function c(){return function(){var t=this;e.on("nodeChange",function(){var n=null;try{var o=e.selection.getNode();if("PRE"!=o.nodeName&&(o=$(o).closest("pre").get(0)),o){var a=LeaAce.isInAce(o),c=!1,r=!1;if(a||"PRE"==o.nodeName){a?(c=a[0],r=a[1]):r=$(o);var i=LeaAce.getPreBrush(r);n=$.trim(i.split(":")[1]),t.diableValue("convert",!1)}else t.diableValue("convert",!0)}}catch(l){log(l)}"convert"!=n&&t.value(n)})}}var r=e;e.addButton("leanote_code",function(){var e=["Convert Code:convert","CSS:css","C/C++:c_cpp","C#:csharp","HTML:html","Javascript:javascript","Java:java","PHP:php","Python:python","Shell:shell","Delphi:delphi","Golang:golang","Erlang:erlang","Groovy:groovy","ActionScript:actionScript"],t=[];for(var n in e){var o=e[n].split(":");t.push({text:o[0],value:o[1]})}return{type:"listbox",text:"codeLang",tooltip:"toggleCode",values:t,fixedWidth:!0,onselect:function(e){e.control.settings.value&&a(e.control.settings.value)},onPostRender:c(t)}}),e.addButton("leanote_inline_code",{icon:"code",tooltip:"Inline Code",stateSelector:"code",onclick:function(){e.execCommand("mceToggleFormat",!1,"code")}}),LeaAce.canAce()&&e.addButton("leanote_ace_pre",{icon:"code",image:t+"/img/ace-pre2.png",tooltip:"Toggle ace with raw html",active:LeaAce.isAce===!1,onclick:function(){LeaAce.isAce===!1?(this.active(!1),LeaAce.isAce=!0,LeaAce.initAceFromContent(e)):(this.active(!0),LeaAce.allToPre(e),LeaAce.isAce=!1)}}),r.addCommand("toggleCode",a),r.addShortcut("ctrl+shift+c","","toggleCode"),r.addShortcut("command+shift+c","","toggleCode"),LeaAce.canAce()&&e.on("keydown",function(){var e=LeaAce.nowIsInAce();return e?(setTimeout(function(){e[0].focus()}),!0):void 0}),r.on("keydown",function(e){var t=e.which?e.which:e.keyCode;return 9==t?(e.shiftKey||r.insertContent("&nbsp;&nbsp;&nbsp;&nbsp;"),e.preventDefault(),e.stopPropagation(),!1):void 0})});