编辑器更新，此版本还有bug，暂不要更新使用
内核更新
This commit is contained in:
32
public/plugs/umeditor/dialogs/formula/formula.css
Normal file
32
public/plugs/umeditor/dialogs/formula/formula.css
Normal file
@@ -0,0 +1,32 @@
|
||||
.edui-popup-formula .edui-formula-wrapper {
|
||||
padding: 15px;
|
||||
}
|
||||
.edui-popup-formula .edui-formula-wrapper .edui-tab-nav{
|
||||
height: auto;
|
||||
*height: 31px;
|
||||
}
|
||||
.edui-popup-formula .edui-formula-wrapper .edui-tab-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
.edui-popup-formula .edui-formula-wrapper .edui-formula-clearboth {
|
||||
clear: both;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.edui-popup-formula .edui-formula-wrapper .edui-tab-pane ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.edui-popup-formula .edui-formula-wrapper .edui-tab-content {
|
||||
padding: 5px 0px 0px 0px;
|
||||
}
|
||||
.edui-popup-formula .edui-formula-wrapper .edui-tab-pane .edui-formula-latex-item {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0px 3px 3px 0px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border:1px solid #cccccc;
|
||||
background-image: url("images/formula.png");
|
||||
cursor: pointer;
|
||||
}
|
||||
212
public/plugs/umeditor/dialogs/formula/formula.html
Normal file
212
public/plugs/umeditor/dialogs/formula/formula.html
Normal file
@@ -0,0 +1,212 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../third-party/mathquill/mathquill.css"/>
|
||||
<style>
|
||||
html, body, .main{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.main{
|
||||
width:1024px;
|
||||
height:1024px;
|
||||
}
|
||||
.mathquill-editable,
|
||||
.mathquill-rendered-math{
|
||||
border: 0px;
|
||||
padding: 0px;
|
||||
margin:4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="main">
|
||||
<div class="mathquill-editable"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input id="blurHelper" />
|
||||
</div>
|
||||
|
||||
<script src="../../third-party/jquery.min.js"></script>
|
||||
<script src="../../third-party/mathquill/mathquill.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
var UM = parent.UM,
|
||||
$iframe = $(getSelfIframe()),
|
||||
editorId = $iframe.parents('.edui-body-container').attr('id'),
|
||||
editor = UM.getEditor(editorId),
|
||||
timer;
|
||||
|
||||
/* 获得当前公式所在的iframe节点 */
|
||||
function getSelfIframe(){
|
||||
var iframes = parent.document.getElementsByTagName('iframe');
|
||||
for (var key in iframes) {
|
||||
if (iframes[key].contentWindow == window) {
|
||||
return iframes[key];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
/* 获得当前url上的hash存储的参数值 */
|
||||
function getLatex() {
|
||||
return $iframe.attr('data-latex') || '';
|
||||
}
|
||||
/* 保存场景 */
|
||||
function saveScene(){
|
||||
timer && clearTimeout(timer);
|
||||
timer = setTimeout(function(){
|
||||
editor.fireEvent('savescene');
|
||||
editor.fireEvent('contentchange');
|
||||
editor.fireEvent('selectionchange');
|
||||
timer = null;
|
||||
}, 300);
|
||||
}
|
||||
/* 设置编辑器可编辑 */
|
||||
function enableEditor(){
|
||||
if(editor.body.contentEditable == 'false') {
|
||||
editor.setEnabled();
|
||||
}
|
||||
}
|
||||
/* 设置编辑器不可编辑 */
|
||||
function disableEditor(){
|
||||
if(editor.body.contentEditable == 'true') {
|
||||
editor.setDisabled(['undo', 'redo', 'preview', 'formula'], true);
|
||||
}
|
||||
}
|
||||
|
||||
/* 公式 */
|
||||
var Formula = function(){
|
||||
var _this = this,
|
||||
latex = getLatex();
|
||||
|
||||
this.isFocus = false;
|
||||
this.isDisabled = false;
|
||||
|
||||
/* 加载公式内容 */
|
||||
this.$mathquill = $('.mathquill-editable').mathquill('latex', latex);
|
||||
|
||||
/* 设置活动状态的公式iframe */
|
||||
this.$mathquill.on('mousedown', function(){
|
||||
/* 编辑器不可用时,公式也不可用 */
|
||||
if(_this.disabled) return false;
|
||||
|
||||
/* 第一次点击当前公式,设置公式活动 */
|
||||
if(!$iframe.hasClass('edui-formula-active')) {
|
||||
disableEditor();
|
||||
editor.blur();
|
||||
editor.$body.find('iframe').not($iframe).each(function(k, v){
|
||||
v.contentWindow.formula.blur();
|
||||
});
|
||||
if(_this.$mathquill.find('.cursor').css('display') == 'none') {
|
||||
_this.refresh();
|
||||
_this.$mathquill.addClass('hasCursor');
|
||||
}
|
||||
}
|
||||
_this.focus();
|
||||
});
|
||||
editor.addListener('click', function(){
|
||||
_this.blur();
|
||||
enableEditor();
|
||||
});
|
||||
|
||||
/* 里面focus,编辑器也判断为focus */
|
||||
editor.addListener('isFocus', function(){
|
||||
return _this.isFocus;
|
||||
});
|
||||
/* um不可用,公式也不可编辑 */
|
||||
editor.addListener('setDisabled', function(type, except){
|
||||
if (!(except && except.join(' ').indexOf('formula') != -1) && _this.isDisabled != true ) {
|
||||
_this.setDisabled();
|
||||
}
|
||||
});
|
||||
editor.addListener('setEnabled', function(){
|
||||
if (_this.isDisabled != false) {
|
||||
_this.setEnabled();
|
||||
}
|
||||
});
|
||||
|
||||
/* 设置更新外层iframe的大小和属性 */
|
||||
$(document.body).on('keydown', function(){
|
||||
_this.updateIframe();
|
||||
}).on('keyup', function(){
|
||||
_this.updateIframe();
|
||||
});
|
||||
|
||||
/* 清除初始化的高亮状态 */
|
||||
this.$mathquill.removeClass('hasCursor');
|
||||
|
||||
/* 初始化后延迟刷新外层iframe大小 */
|
||||
setTimeout(function(){
|
||||
_this.updateIframe();
|
||||
}, 300);
|
||||
};
|
||||
|
||||
Formula.prototype = {
|
||||
focus:function(){
|
||||
$iframe.addClass('edui-formula-active');
|
||||
this.isFocus = true;
|
||||
},
|
||||
blur:function(){
|
||||
$iframe.removeClass('edui-formula-active');
|
||||
this.removeCursor();
|
||||
this.isFocus = false;
|
||||
},
|
||||
removeCursor: function(){
|
||||
this.$mathquill.find('span.cursor').hide();
|
||||
this.$mathquill.parent().find('.hasCursor').removeClass('hasCursor');
|
||||
},
|
||||
updateIframe: function(){
|
||||
$iframe.width(this.$mathquill.width()+8).height(this.$mathquill.height()+8);
|
||||
var latex = $iframe.attr('data-latex'),
|
||||
newLatex = this.getLatex();
|
||||
if(latex != newLatex) {
|
||||
$iframe.attr('data-latex', this.getLatex());
|
||||
saveScene();
|
||||
}
|
||||
},
|
||||
insertLatex: function(latex){
|
||||
this.$mathquill.mathquill('write', latex);
|
||||
this.updateIframe();
|
||||
this.removeCursor();
|
||||
},
|
||||
setLatex: function(latex){
|
||||
this.$mathquill.mathquill('latex', latex);
|
||||
this.updateIframe();
|
||||
},
|
||||
getLatex: function(){
|
||||
return this.$mathquill.mathquill('latex');
|
||||
},
|
||||
redraw: function(){
|
||||
this.$mathquill.mathquill('redraw');
|
||||
},
|
||||
setDisabled: function(){
|
||||
this.blur();
|
||||
var latex = this.getLatex();
|
||||
this.$mathquill.mathquill('revert').text(latex).mathquill();
|
||||
this.updateIframe();
|
||||
this.isDisabled = true;
|
||||
},
|
||||
setEnabled: function(){
|
||||
this.$mathquill.removeClass('mathquill-rendered-math');
|
||||
this.refresh();
|
||||
this.isDisabled = false;
|
||||
},
|
||||
refresh: function(){
|
||||
var latex = this.getLatex();
|
||||
this.$mathquill.mathquill('revert').text(latex).mathquill('editable');
|
||||
this.updateIframe();
|
||||
}
|
||||
};
|
||||
|
||||
/* 绑定到window上，给上级window调用 */
|
||||
window.formula = new Formula();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
124
public/plugs/umeditor/dialogs/formula/formula.js
Normal file
124
public/plugs/umeditor/dialogs/formula/formula.js
Normal file
@@ -0,0 +1,124 @@
|
||||
(function () {
|
||||
|
||||
var editor = null;
|
||||
|
||||
UM.registerWidget('formula', {
|
||||
|
||||
tpl: "<link type=\"text/css\" rel=\"stylesheet\" href=\"<%=formula_url%>formula.css\">" +
|
||||
"<div class=\"edui-formula-wrapper\">" +
|
||||
"<ul class=\"edui-tab-nav\"></ul>" +
|
||||
"<div class=\"edui-tab-content\"></div>" +
|
||||
"</div>",
|
||||
|
||||
sourceData: {
|
||||
formula: {
|
||||
'common': [
|
||||
"{/}frac{ }{ }", "^{ }/_{ }", "x^{ }", "x_{ }", "x^{ }_{ }", "{/}bar{ }", "{/}sqrt{ }", "{/}nthroot{ }{ }",
|
||||
"{/}sum^{ }_{n=}", "{/}sum", "{/}log_{ }", "{/}ln", "{/}int_{ }^{ }", "{/}oint_{ }^{ }"
|
||||
],
|
||||
'symbol': [
|
||||
"+", "-", "{/}pm", "{/}times", "{/}ast", "{/}div", "/", "{/}bigtriangleup",
|
||||
"=", "{/}ne", "{/}approx", ">", "<", "{/}ge", "{/}le", "{/}infty",
|
||||
"{/}cap", "{/}cup", "{/}because", "{/}therefore", "{/}subset", "{/}supset", "{/}subseteq", "{/}supseteq",
|
||||
"{/}nsubseteq", "{/}nsupseteq", "{/}in", "{/}ni", "{/}notin", "{/}mapsto", "{/}leftarrow", "{/}rightarrow",
|
||||
"{/}Leftarrow", "{/}Rightarrow", "{/}leftrightarrow", "{/}Leftrightarrow"
|
||||
],
|
||||
'letter': [
|
||||
"{/}alpha", "{/}beta", "{/}gamma", "{/}delta", "{/}varepsilon", "{/}varphi", "{/}lambda", "{/}mu",
|
||||
"{/}rho", "{/}sigma", "{/}omega", "{/}Gamma", "{/}Delta", "{/}Theta", "{/}Lambda", "{/}Xi",
|
||||
"{/}Pi", "{/}Sigma", "{/}Upsilon", "{/}Phi", "{/}Psi", "{/}Omega"
|
||||
]
|
||||
}
|
||||
},
|
||||
initContent: function (_editor, $widget) {
|
||||
|
||||
var me = this,
|
||||
formula = me.sourceData.formula,
|
||||
lang = _editor.getLang('formula').static,
|
||||
formulaUrl = UMEDITOR_CONFIG.UMEDITOR_HOME_URL + 'dialogs/formula/',
|
||||
options = $.extend({}, lang, { 'formula_url': formulaUrl }),
|
||||
$root = me.root();
|
||||
|
||||
if (me.inited) {
|
||||
me.preventDefault();
|
||||
return;
|
||||
}
|
||||
me.inited = true;
|
||||
|
||||
editor = _editor;
|
||||
me.$widget = $widget;
|
||||
|
||||
$root.html($.parseTmpl(me.tpl, options));
|
||||
me.tabs = $.eduitab({selector: "#edui-formula-tab-Jpanel"});
|
||||
|
||||
/* 初始化popup的内容 */
|
||||
var headHtml = [], xMax = 0, yMax = 0,
|
||||
$tabContent = me.root().find('.edui-tab-content');
|
||||
$.each(formula, function (k, v) {
|
||||
var contentHtml = [];
|
||||
$.each(v, function (i, f) {
|
||||
contentHtml.push('<li class="edui-formula-latex-item" data-latex="' + f + '" style="background-position:-' + (xMax * 30) + 'px -' + (yMax * 30) + 'px"></li>');
|
||||
if (++xMax >=8) {
|
||||
++yMax; xMax = 0;
|
||||
}
|
||||
});
|
||||
yMax++; xMax = 0;
|
||||
$tabContent.append('<div class="edui-tab-pane"><ul>' + contentHtml.join('') + '</ul>');
|
||||
headHtml.push('<li class="edui-tab-item"><a href="javascript:void(0);" class="edui-tab-text">' + lang['lang_tab_' + k] + '</a></li>');
|
||||
});
|
||||
headHtml.push('<li class="edui-formula-clearboth"></li>');
|
||||
$root.find('.edui-tab-nav').html(headHtml.join(''));
|
||||
$root.find('.edui-tab-content').append('<div class="edui-formula-clearboth"></div>');
|
||||
|
||||
/* 选中第一个tab */
|
||||
me.switchTab(0);
|
||||
},
|
||||
initEvent: function () {
|
||||
var me = this;
|
||||
|
||||
//防止点击过后关闭popup
|
||||
me.root().on('click', function (e) {
|
||||
return false;
|
||||
});
|
||||
|
||||
//点击tab切换菜单
|
||||
me.root().find('.edui-tab-nav').delegate('.edui-tab-item', 'click', function (evt) {
|
||||
me.switchTab(this);
|
||||
return false;
|
||||
});
|
||||
|
||||
//点击选中公式
|
||||
me.root().find('.edui-tab-pane').delegate('.edui-formula-latex-item', 'click', function (evt) {
|
||||
var $item = $(this),
|
||||
latex = $item.attr('data-latex') || '';
|
||||
|
||||
if (latex) {
|
||||
me.insertLatex(latex.replace("{/}", "\\"));
|
||||
}
|
||||
me.$widget.edui().hide();
|
||||
return false;
|
||||
});
|
||||
},
|
||||
switchTab:function(index){
|
||||
var me = this,
|
||||
$root = me.root(),
|
||||
index = $.isNumeric(index) ? index:$.inArray(index, $root.find('.edui-tab-nav .edui-tab-item'));
|
||||
|
||||
$root.find('.edui-tab-nav .edui-tab-item').removeClass('edui-active').eq(index).addClass('edui-active');
|
||||
$root.find('.edui-tab-content .edui-tab-pane').removeClass('edui-active').eq(index).addClass('edui-active');
|
||||
|
||||
/* 自动长高 */
|
||||
me.autoHeight(0);
|
||||
},
|
||||
autoHeight: function () {
|
||||
this.$widget.height(this.root() + 2);
|
||||
},
|
||||
insertLatex: function (latex) {
|
||||
editor.execCommand('formula', latex );
|
||||
},
|
||||
width: 350,
|
||||
height: 400
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
BIN
public/plugs/umeditor/dialogs/formula/images/formula.png
Normal file
BIN
public/plugs/umeditor/dialogs/formula/images/formula.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Reference in New Issue
Block a user