ace editor, markdown editor
This commit is contained in:
life
@ -149,8 +149,8 @@ var Resize = {
|
||||
note: $("#note"),
|
||||
body: $("body"),
|
||||
leftColumn: $("#left-column"),
|
||||
rightColumn: $("#right-column"),
|
||||
mdSplitter: $("#mdSplitter"),
|
||||
rightColumn: $("#right-column"), // $("#preview-panel"), //
|
||||
mdSplitter: $("#mdSplitter2"),
|
||||
|
||||
init: function() {
|
||||
var self = this;
|
||||
@ -173,8 +173,10 @@ var Resize = {
|
||||
// 鼠标点下
|
||||
self.mdSplitter.bind("mousedown", function(event) {
|
||||
event.preventDefault(); // 防止选择文本
|
||||
self.mdLineMove = true;
|
||||
$(this).css("background-color", "#ccc");
|
||||
if($(this).hasClass('open')) {
|
||||
self.mdLineMove = true;
|
||||
}
|
||||
// $(this).css("background-color", "#ccc");
|
||||
});
|
||||
|
||||
// 鼠标移动时
|
||||
@ -194,6 +196,37 @@ var Resize = {
|
||||
// 取消遮罩
|
||||
$("#noteMask").css("z-index", -1);
|
||||
});
|
||||
|
||||
// 瞬间
|
||||
var everLeftWidth;
|
||||
$('.layout-toggler-preview').click(function() {
|
||||
var $t = $(this);
|
||||
var $p = self.leftColumn.parent();
|
||||
// 是开的
|
||||
if($t.hasClass('open')) {
|
||||
var totalWidth = $p.width();
|
||||
var minRightWidth = 22;
|
||||
var leftWidth = totalWidth - minRightWidth;
|
||||
everLeftWidth = self.leftColumn.width();
|
||||
self.leftColumn.width(leftWidth);
|
||||
self.rightColumn.css('left', 'auto').width(minRightWidth);
|
||||
|
||||
// 禁止split
|
||||
$t.removeClass('open');//.addClass('close');
|
||||
self.rightColumn.find('.layout-resizer').removeClass('open');
|
||||
$('.preview-container').hide();
|
||||
} else {
|
||||
$t.addClass('open');
|
||||
self.rightColumn.find('.layout-resizer').addClass('open');
|
||||
self.leftColumn.width(everLeftWidth);
|
||||
$('.preview-container').show();
|
||||
self.rightColumn.css('left', everLeftWidth).width('auto');
|
||||
|
||||
if(MD) {
|
||||
MD.onResize();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 停止, 保存数据
|
||||
stopResize: function() {
|
||||
@ -257,7 +290,7 @@ var Resize = {
|
||||
resizeMdColumns: function(event) {
|
||||
var self = this;
|
||||
if (self.mdLineMove) {
|
||||
var mdEditorWidth = event.clientX - self.leftNotebook.width() - self.noteList.width();
|
||||
var mdEditorWidth = event.clientX - self.leftColumn.offset().left; // self.leftNotebook.width() - self.noteList.width();
|
||||
self.setMdColumnWidth(mdEditorWidth);
|
||||
}
|
||||
},
|
||||
@ -266,9 +299,15 @@ var Resize = {
|
||||
var self = this;
|
||||
if(mdEditorWidth > 100) {
|
||||
UserInfo.MdEditorWidth = mdEditorWidth;
|
||||
log(mdEditorWidth)
|
||||
self.leftColumn.width(mdEditorWidth);
|
||||
self.rightColumn.css("left", mdEditorWidth);
|
||||
self.mdSplitter.css("left", mdEditorWidth);
|
||||
// self.mdSplitter.css("left", mdEditorWidth);
|
||||
}
|
||||
|
||||
// 这样, scrollPreview 才会到正确的位置
|
||||
if(MD) {
|
||||
MD.onResize();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -320,7 +359,8 @@ Mobile = {
|
||||
var u = navigator.userAgent;
|
||||
LEA.isMobile = false;
|
||||
LEA.isMobile = /Mobile|Android|iPhone|iPad/i.test(u);
|
||||
LEA.isIpad = /iPhone|iPad/i.test(u);
|
||||
LEA.isIpad = /iPad/i.test(u);
|
||||
LEA.isIphone = /iPhone/i.test(u);
|
||||
if(!LEA.isMobile && $(document).width() <= 700){
|
||||
LEA.isMobile = true
|
||||
}
|
||||
@ -382,10 +422,12 @@ function initSlimScroll() {
|
||||
$("#noteItemList").slimScroll({
|
||||
height: "100%", // ($("#leftNotebook").height()-42)+"px"
|
||||
});
|
||||
/*
|
||||
$("#wmd-input").slimScroll({
|
||||
height: "100%", // $("#wmd-input").height()+"px"
|
||||
});
|
||||
$("#wmd-input").css("width", "100%");
|
||||
*/
|
||||
|
||||
$("#wmd-panel-preview").slimScroll({
|
||||
height: "100%", // $("#wmd-panel-preview").height()+"px"
|
||||
@ -422,43 +464,24 @@ function initEditor() {
|
||||
|
||||
// 初始化编辑器
|
||||
tinymce.init({
|
||||
// inline: true,
|
||||
inline: true,
|
||||
valid_children: "+pre[div|#text|p|span|textarea|i|b|strong]", // ace
|
||||
/*
|
||||
protect: [
|
||||
/\<\/?(if|endif)\>/g, // Protect <if> & </endif>
|
||||
/\<xsl\:[^>]+\>/g, // Protect <xsl:...>
|
||||
// /<pre.*?>.*?<\/pre>/g, // Protect <pre ></pre>
|
||||
// /<p.*?>.*?<\/p>/g, // Protect <pre ></pre>
|
||||
// /<\?php.*?\?>/g // Protect php code
|
||||
],
|
||||
*/
|
||||
setup: function(ed) {
|
||||
ed.on('keydown', Note.saveNote);
|
||||
// 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('mceInsertRawHTML', false, '\x09'); // inserts tab
|
||||
} else {
|
||||
ed.execCommand('mceInsertRawHTML', false, " "); // inserts 空格
|
||||
}
|
||||
} else {
|
||||
// delete 4 个空格
|
||||
// ed.execCommand('Outdent');
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// 为了把下拉菜单关闭
|
||||
ed.on("click", function(e) {
|
||||
$("body").trigger("click");
|
||||
});
|
||||
|
||||
// 鼠标移上时
|
||||
ed.on("click", function() {
|
||||
log(ed.selection.getNode())
|
||||
});
|
||||
},
|
||||
|
||||
// fix TinyMCE Removes site base url
|
||||
@ -470,17 +493,17 @@ function initEditor() {
|
||||
selector : "#editorContent",
|
||||
// height: 100,//这个应该是文档的高度, 而其上层的高度是$("#content").height(),
|
||||
// parentHeight: $("#content").height(),
|
||||
content_css : ["/css/bootstrap.css", "/css/editor/editor.css"].concat(em.getWritingCss()),
|
||||
// content_css : ["/css/editor/editor.css"].concat(em.getWritingCss()),
|
||||
// content_css : ["/css/bootstrap.css", "/css/editor/editor.css"].concat(em.getWritingCss()),
|
||||
content_css : ["/css/editor/editor.css"].concat(em.getWritingCss()),
|
||||
skin : "custom",
|
||||
language: LEA.locale, // 语言
|
||||
plugins : [
|
||||
"autolink link leaui_image lists charmap hr", "paste",
|
||||
"searchreplace leanote_nav leanote_code tabfocus",
|
||||
"table directionality textcolor codemirror" ], // nonbreaking
|
||||
"table directionality textcolor" ], // nonbreaking
|
||||
|
||||
toolbar1 : "formatselect | forecolor backcolor | bold italic underline strikethrough | leaui_image | leanote_code | bullist numlist | alignleft aligncenter alignright alignjustify",
|
||||
toolbar2 : "outdent indent blockquote | link unlink | table | hr removeformat | subscript superscript |searchreplace | code | pastetext pasteCopyImage | fontselect fontsizeselect",
|
||||
toolbar1 : "formatselect | forecolor backcolor | bold italic underline strikethrough | leaui_image | leanote_code leanote_inline_code | bullist numlist | alignleft aligncenter alignright alignjustify",
|
||||
toolbar2 : "outdent indent blockquote | link unlink | table | hr removeformat | subscript superscript |searchreplace | pastetext pasteCopyImage | leanote_ace_pre | fontselect fontsizeselect",
|
||||
|
||||
// 使用tab键: http://www.tinymce.com/wiki.php/Plugin3x:nonbreaking
|
||||
// http://stackoverflow.com/questions/13543220/tiny-mce-how-to-allow-people-to-indent
|
||||
@ -498,7 +521,8 @@ function initEditor() {
|
||||
+ "Verdana=verdana,geneva;" + "宋体=SimSun;"
|
||||
+ "新宋体=NSimSun;" + "黑体=SimHei;"
|
||||
+ "微软雅黑=Microsoft YaHei",
|
||||
block_formats : "Header 1=h1;Header 2=h2;Header 3=h3; Header 4=h4;Pre=pre;Paragraph=p",
|
||||
block_formats : "Header 1=h1;Header 2=h2;Header 3=h3;Header 4=h4;Paragraph=p",
|
||||
/*
|
||||
codemirror: {
|
||||
indentOnInit: true, // Whether or not to indent code on init.
|
||||
path: 'CodeMirror', // Path to CodeMirror distribution
|
||||
@ -511,6 +535,7 @@ function initEditor() {
|
||||
//'mode/php/php.js'
|
||||
]
|
||||
},
|
||||
*/
|
||||
// This option specifies whether data:url images (inline images) should be removed or not from the pasted contents.
|
||||
// Setting this to "true" will allow the pasted images, and setting this to "false" will disallow pasted images.
|
||||
// For example, Firefox enables you to paste images directly into any contentEditable field. This is normally not something people want, so this option is "false" by default.
|
||||
@ -530,7 +555,7 @@ function initEditor() {
|
||||
// 导航
|
||||
var random = 1;
|
||||
function scrollTo(self, tagName, text) {
|
||||
var iframe = $("#editorContent_ifr").contents();
|
||||
var iframe = $("#editorContent"); // .contents();
|
||||
var target = iframe.find(tagName + ":contains(" + text + ")");
|
||||
random++;
|
||||
|
||||
@ -548,12 +573,15 @@ function scrollTo(self, tagName, text) {
|
||||
if (target.size() >= i+1) {
|
||||
target = target.eq(i);
|
||||
// 之前插入, 防止多行定位不准
|
||||
var top = target.offset().top;
|
||||
var nowTop = iframe.scrollTop();
|
||||
|
||||
// log(target.scrollTop());
|
||||
var top = iframe.scrollTop() - iframe.offset().top + target.offset().top; // 相对于iframe的位置
|
||||
// var nowTop = iframe.scrollTop();
|
||||
// log(nowTop);
|
||||
// log(top);
|
||||
// iframe.scrollTop(top);
|
||||
// $(iframe).animate({scrollTop: top}, 300); // 有问题
|
||||
iframe.animate({scrollTop: top}, 300); // 有问题
|
||||
|
||||
/*
|
||||
var d = 200; // 时间间隔
|
||||
for(var i = 0; i < d; i++) {
|
||||
setTimeout(
|
||||
@ -567,6 +595,7 @@ function scrollTo(self, tagName, text) {
|
||||
setTimeout(function() {
|
||||
iframe.scrollTop(top);
|
||||
}, d+5);
|
||||
*/
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -601,11 +630,12 @@ $(function() {
|
||||
});
|
||||
|
||||
// 导航隐藏与显示
|
||||
$("#leanoteNav h1").on("click", function(e) {
|
||||
if (!$("#leanoteNav").hasClass("unfolder")) {
|
||||
$("#leanoteNav").addClass("unfolder");
|
||||
$(".leanoteNav h1").on("click", function(e) {
|
||||
var $leanoteNav = $(this).closest('.leanoteNav');
|
||||
if (!$leanoteNav.hasClass("unfolder")) {
|
||||
$leanoteNav.addClass("unfolder");
|
||||
} else {
|
||||
$("#leanoteNav").removeClass("unfolder");
|
||||
$leanoteNav.removeClass("unfolder");
|
||||
}
|
||||
});
|
||||
|
||||
@ -703,10 +733,10 @@ $(function() {
|
||||
}
|
||||
}
|
||||
|
||||
$("#leftSwitcher2").click(function() {
|
||||
$("#leftSwitcher2").on('click', function() {
|
||||
maxLeft(true);
|
||||
});
|
||||
$("#leftSwitcher").click(function() {
|
||||
$("#leftSwitcher").click('click', function() {
|
||||
if(Mobile.switchPage()) {
|
||||
minLeft(true);
|
||||
}
|
||||
@ -902,6 +932,380 @@ $(function() {
|
||||
Pjax.init();
|
||||
});
|
||||
|
||||
//----------
|
||||
// aceEditor
|
||||
LeaAce = {
|
||||
// aceEditorID
|
||||
_aceId: 0,
|
||||
// {id=>ace}
|
||||
_aceEditors: {},
|
||||
_isInit: false,
|
||||
_canAce: false,
|
||||
isAce: true, // 切换pre, 默认是true
|
||||
disableAddHistory: function() {
|
||||
tinymce.activeEditor.undoManager.setCanAdd(false);
|
||||
},
|
||||
resetAddHistory: function() {
|
||||
tinymce.activeEditor.undoManager.setCanAdd(true);
|
||||
},
|
||||
canAce: function() {
|
||||
if(this._isInit) {
|
||||
return this._canAce;
|
||||
}
|
||||
if(getVendorPrefix() == "webkit" && !Mobile.isMobile()) {
|
||||
this._canAce = true;
|
||||
} else {
|
||||
this._canAce = false;
|
||||
}
|
||||
this._isInit = true;
|
||||
return this._canAce;
|
||||
},
|
||||
canAndIsAce: function() {
|
||||
return this.canAce() && this.isAce;
|
||||
},
|
||||
getAceId: function () {
|
||||
this.aceId++;
|
||||
return "leanote_ace_" + (new Date()).getTime() + "_" + this._aceId;
|
||||
},
|
||||
initAce: function(id, val, force) {
|
||||
var me = this;
|
||||
if(!force && !me.canAndIsAce()) {
|
||||
return;
|
||||
}
|
||||
me.disableAddHistory();
|
||||
var $pre = $('#' + id);
|
||||
$pre.find('.toggle-raw').remove();
|
||||
var preHtml = $pre.html();
|
||||
|
||||
$pre.removeClass('ace-to-pre');
|
||||
$pre.attr("contenteditable", false); // ? 避免tinymce编辑
|
||||
var aceEditor = ace.edit(id);
|
||||
aceEditor.setTheme("ace/theme/tomorrow");
|
||||
|
||||
var brush = me.getPreBrush($pre);
|
||||
var b = "";
|
||||
if(brush) {
|
||||
try {
|
||||
b = brush.split(':')[1];
|
||||
} catch(e) {}
|
||||
}
|
||||
b = b || "javascript";
|
||||
aceEditor.session.setMode("ace/mode/" + b);
|
||||
aceEditor.getSession().setUseWorker(false); // 不用语法检查
|
||||
aceEditor.setOption("showInvisibles", false); // 不显示空格, 没用
|
||||
aceEditor.setOption("wrap", "free");
|
||||
aceEditor.setShowInvisibles(false);
|
||||
aceEditor.setAutoScrollEditorIntoView(true);
|
||||
aceEditor.setOption("maxLines", 100);
|
||||
aceEditor.commands.addCommand({
|
||||
name: "undo",
|
||||
bindKey: {win: "Ctrl-z", mac: "Command-z"},
|
||||
exec: function(editor) {
|
||||
var undoManager = editor.getSession().getUndoManager();
|
||||
if(undoManager.hasUndo()){
|
||||
undoManager.undo();
|
||||
} else {
|
||||
undoManager.reset();
|
||||
tinymce.activeEditor.undoManager.undo();
|
||||
}
|
||||
}
|
||||
});
|
||||
this._aceEditors[id] = aceEditor;
|
||||
if(val) {
|
||||
aceEditor.setValue(val);
|
||||
// 不要选择代码
|
||||
// TODO
|
||||
} else {
|
||||
// 防止 <pre><div>xx</div></pre> 这里的<div>消失
|
||||
// preHtml = preHtml.replace('/ /g', ' '); // 以前是把' ' 全换成了
|
||||
// aceEditor.setValue(preHtml);
|
||||
// 全不选
|
||||
// aceEditor.selection.clearSelection();
|
||||
}
|
||||
|
||||
// XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
|
||||
me.resetAddHistory();
|
||||
return aceEditor;
|
||||
},
|
||||
clearIntervalForInitAce: null,
|
||||
initAceFromContent: function(editor) {
|
||||
if(!this.canAndIsAce()) {
|
||||
var content = $(editor.getBody());
|
||||
content.find('pre').removeClass('ace_editor');
|
||||
return;
|
||||
}
|
||||
var me = this;
|
||||
// 延迟
|
||||
if(this.clearIntervalForInitAce) {
|
||||
clearInterval(this.clearIntervalForInitAce);
|
||||
}
|
||||
this.clearIntervalForInitAce = setTimeout(function() {
|
||||
var content = $(editor.getBody());
|
||||
var pres = content.find('pre');
|
||||
for(var i = 0 ; i < pres.length; ++i) {
|
||||
var pre = pres.eq(i);
|
||||
// 如果不是ace
|
||||
if(me.isInAce(pre)) {
|
||||
break;
|
||||
}
|
||||
setTimeout((function(pre) {
|
||||
return function() {
|
||||
pre.find('.toggle-raw').remove();
|
||||
var value = pre.html();
|
||||
log(value);
|
||||
value = value.replace(/ /g, " ").replace(/\<br *\/*\>/gi,"\n").replace(/</g, '<').replace(/>/g, '>');
|
||||
pre.html(value);
|
||||
var id = pre.attr('id');
|
||||
if(!id) {
|
||||
id = me.getAceId();
|
||||
pre.attr('id', id);
|
||||
}
|
||||
me.initAce(id);
|
||||
}
|
||||
})(pre));
|
||||
}
|
||||
}, 10);
|
||||
},
|
||||
|
||||
allToPre: function(editor) {
|
||||
if(!this.canAndIsAce()) {
|
||||
return;
|
||||
}
|
||||
var me = this;
|
||||
// 延迟
|
||||
if(me.clearIntervalForInitAce) {
|
||||
clearInterval(me.clearIntervalForInitAce);
|
||||
}
|
||||
me.clearIntervalForInitAce = setTimeout(function() {
|
||||
var content = $(editor.getBody());
|
||||
var pres = content.find('pre');
|
||||
for(var i = 0 ; i < pres.length; ++i) {
|
||||
var pre = pres.eq(i);
|
||||
setTimeout((function(pre) {
|
||||
return function() {
|
||||
me.aceToPre(pre);
|
||||
}
|
||||
})(pre));
|
||||
}
|
||||
}, 10);
|
||||
},
|
||||
|
||||
undo: function(editor) {
|
||||
if(!this.canAndIsAce()) {
|
||||
return;
|
||||
}
|
||||
var me = this;
|
||||
// 延迟
|
||||
if(this.clearIntervalForInitAce) {
|
||||
clearInterval(this.clearIntervalForInitAce);
|
||||
}
|
||||
this.clearIntervalForInitAce = setTimeout(function() {
|
||||
var content = $(editor.getBody());
|
||||
var pres = content.find('pre');
|
||||
for(var i = 0 ; i < pres.length; ++i) {
|
||||
var pre = pres.eq(i);
|
||||
setTimeout((function(pre) {
|
||||
return function() {
|
||||
var value = pre.html();
|
||||
var id = pre.attr('id');
|
||||
var aceEditor = me.getAce(id);
|
||||
if(aceEditor) {
|
||||
var value = aceEditor.getValue();
|
||||
aceEditor.destroy();
|
||||
var aceEditor = me.initAce(id, value);
|
||||
// 全不选
|
||||
aceEditor.selection.clearSelection();
|
||||
} else {
|
||||
value = value.replace(/ /g, " ").replace(/\<br *\/*\>/gi,"\n");
|
||||
pre.html(value);
|
||||
var id = pre.attr('id');
|
||||
if(!id) {
|
||||
id = me.getAceId();
|
||||
pre.attr('id', id);
|
||||
}
|
||||
me.initAce(id);
|
||||
}
|
||||
}
|
||||
})(pre));
|
||||
}
|
||||
}, 10);
|
||||
},
|
||||
destroyAceFromContent: function(everContent) {
|
||||
if(!this.canAce()) {
|
||||
return;
|
||||
}
|
||||
var pres = everContent.find('pre');
|
||||
for(var i = 0 ; i < pres.length; ++i) {
|
||||
var id = pres.eq(i).attr('id');
|
||||
var aceEditorAndPre = this.getAce(id);
|
||||
if(aceEditorAndPre) {
|
||||
aceEditorAndPre.destroy();
|
||||
this._aceEditors[id] = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
getAce: function(id) {
|
||||
if(!this.canAce()) {
|
||||
return;
|
||||
}
|
||||
return this._aceEditors[id];
|
||||
},
|
||||
// 当前焦点是否在aceEditor中
|
||||
nowIsInAce: function () {
|
||||
if(!this.canAce()) {
|
||||
return;
|
||||
}
|
||||
|
||||
var node = tinymce.activeEditor.selection.getNode();
|
||||
// log("now...");
|
||||
// log(node);
|
||||
return this.isInAce(node);
|
||||
|
||||
},
|
||||
nowIsInPre: function(){
|
||||
var node = tinymce.activeEditor.selection.getNode();
|
||||
// log("now...");
|
||||
// log(node);
|
||||
return this.isInPre(node);
|
||||
},
|
||||
isInPre: function(node) {
|
||||
var $node = $(node);
|
||||
var node = $node.get(0);
|
||||
if(node.nodeName == "PRE") {
|
||||
return true;
|
||||
} else {
|
||||
// 找到父是pre
|
||||
$pre = $node.closest("pre");
|
||||
if($pre.length == 0) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
// 是否在node内
|
||||
isInAce: function(node) {
|
||||
if(!this.canAce()) {
|
||||
return;
|
||||
}
|
||||
var $node = $(node);
|
||||
var node = $node.get(0);
|
||||
if(node.nodeName == "PRE") {
|
||||
// $node.data('brush', brush);
|
||||
var id = $node.attr('id');
|
||||
var aceEditor = this.getAce(id);
|
||||
if(aceEditor) {
|
||||
return [aceEditor, $node];
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
// 找到父是pre
|
||||
$pre = $node.closest("pre");
|
||||
if($pre.length == 0) {
|
||||
return false;
|
||||
}
|
||||
return this.isInAce($pre);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getPreBrush: function (node) {
|
||||
var $pre = $(node);
|
||||
var classes = $pre.attr('class');
|
||||
if(!classes) {
|
||||
return '';
|
||||
}
|
||||
var m = classes.match(/brush:[^ ]*/);
|
||||
var everBrush = "";
|
||||
if(m && m.length > 0) {
|
||||
everBrush = m[0];
|
||||
}
|
||||
return everBrush;
|
||||
},
|
||||
// pre转换成ace
|
||||
preToAce: function (pre, force) {
|
||||
if(!force && !this.canAce()) {
|
||||
return;
|
||||
}
|
||||
var $pre = $(pre);
|
||||
var id = this.getAceId();
|
||||
$pre.attr('id', id);
|
||||
var editor = this.initAce(id, "", true);
|
||||
if(editor) {
|
||||
editor.focus();
|
||||
}
|
||||
},
|
||||
aceToPre: function(pre, isFocus) {
|
||||
var me = this;
|
||||
var $pre = $(pre);
|
||||
// 转成pre
|
||||
var aceEditorAndPre = me.isInAce($pre);
|
||||
if(aceEditorAndPre) {
|
||||
var aceEditor = aceEditorAndPre[0];
|
||||
var $pre = aceEditorAndPre[1];
|
||||
var value = aceEditor.getValue();
|
||||
value = value.replace(/</g, '<').replace(/>/g, '>');
|
||||
// var id = getAceId();
|
||||
var replacePre = $('<pre class="' + $pre.attr('class') + ' ace-to-pre">' + value + "</pre>");
|
||||
$pre.replaceWith(replacePre);
|
||||
aceEditor.destroy();
|
||||
me._aceEditors[$pre.attr('id')] = null;
|
||||
// log($replacePre);
|
||||
if(isFocus) {
|
||||
setTimeout(function() {
|
||||
var tinymceEditor = tinymce.activeEditor;
|
||||
var selection = tinymceEditor.selection;
|
||||
var rng = selection.getRng();
|
||||
// rng.setStart(replacePre.get(0), 1);
|
||||
// rng.setEnd(replacePre.get(0), 9);
|
||||
rng.selectNode(replacePre.get(0));
|
||||
// selection.setRng(rng);
|
||||
// replacePre.focus();
|
||||
tinymceEditor.focus();
|
||||
replacePre.trigger("click");
|
||||
replacePre.html(value + " ");
|
||||
// log(">>>>>>>>>>>>>>")
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 转换raw <-> code
|
||||
handleEvent: function () {
|
||||
if(!this.canAce()) {
|
||||
return;
|
||||
}
|
||||
var me = this;
|
||||
$("#editorContent").on('mouseenter', 'pre', function(){
|
||||
// log('in');
|
||||
// log($(this));
|
||||
var $t = $(this);
|
||||
$raw = $t.find('.toggle-raw');
|
||||
if($raw.length == 0) {
|
||||
$t.append('<div class="toggle-raw" title="Toggle code with raw html"><input type="checkbox" /></div>');
|
||||
}
|
||||
$input = $t.find('.toggle-raw input');
|
||||
if(LeaAce.isInAce($t)) {
|
||||
$input.prop('checked', true);
|
||||
} else {
|
||||
$input.prop('checked', false);
|
||||
}
|
||||
});
|
||||
$("#editorContent").on('mouseleave', 'pre', function(){
|
||||
var $raw = $(this).find('.toggle-raw');
|
||||
$raw.remove();
|
||||
});
|
||||
$("#editorContent").on('change', '.toggle-raw input', function(){
|
||||
var checked = $(this).prop('checked');
|
||||
var $pre = $(this).closest('pre');
|
||||
if(checked) {
|
||||
// 转成ace
|
||||
me.preToAce($pre, true);
|
||||
} else {
|
||||
me.aceToPre($pre, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// note.html调用
|
||||
// 实始化页面
|
||||
function initPage() {
|
||||
@ -939,48 +1343,7 @@ function initPage() {
|
||||
Tag.renderTagNav(tagsJson);
|
||||
// init notebook后才调用
|
||||
initSlimScroll();
|
||||
|
||||
LeaAce.handleEvent();
|
||||
});
|
||||
}
|
||||
|
||||
//----------
|
||||
// aceeditor
|
||||
|
||||
var aceEditors = {};
|
||||
function initAce(id, val){
|
||||
var aceEditor = ace.edit(id);
|
||||
aceEditor.setTheme("ace/theme/tomorrow");
|
||||
aceEditor.session.setMode("ace/mode/javascript");
|
||||
aceEditor.setAutoScrollEditorIntoView(true);
|
||||
aceEditor.setOption("maxLines", 100);
|
||||
if(val) {
|
||||
aceEditor.setValue(val);
|
||||
}
|
||||
aceEditors [id] = aceEditor;
|
||||
return aceEditor;
|
||||
}
|
||||
|
||||
function getAce(id) {
|
||||
return aceEditors[id];
|
||||
}
|
||||
// 是否在node内
|
||||
function isInAce(node, brush) {
|
||||
var $node = $(node);
|
||||
var node = $node.get(0);
|
||||
if(node.nodeName == "PRE") {
|
||||
$node.data('brush', brush);
|
||||
var id = $node.attr('id');
|
||||
var aceEditor = getAce(id);
|
||||
if(aceEditor) {
|
||||
return [aceEditor, $node];
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
// 找到父是pre
|
||||
$pre = $node.closest("pre");
|
||||
if($pre.length == 0) {
|
||||
return false;
|
||||
}
|
||||
return isInAce($pre, brush);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user