test: 1
This commit is contained in:
98
public/UEditorPlus/dialogs/formula/formula.html
Normal file
98
public/UEditorPlus/dialogs/formula/formula.html
Normal file
@ -0,0 +1,98 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
||||
<script type="text/javascript" src="../internal.js?aea0c61c"></script>
|
||||
<style type="text/css">
|
||||
.wrapper {
|
||||
box-sizing: border-box;
|
||||
width: 800px;
|
||||
height: 390px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #d7d7d7
|
||||
}
|
||||
|
||||
.editor-wrap {
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.editor-wrap #editor {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
height: 100px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.input-tip {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.input-tip a {
|
||||
color: #0f0d0d;
|
||||
}
|
||||
|
||||
.editor-preview {
|
||||
background: #FFF;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #EEE;
|
||||
display: none;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.editor-preview .title {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.editor-preview .body {
|
||||
padding: 5px 5px 15px 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.editor-preview .body .image {
|
||||
max-width: 100%;
|
||||
max-height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
|
||||
<div id="modeLive" style="display:none;">
|
||||
<iframe id="liveEditor"
|
||||
frameborder="0"
|
||||
style="width:800px;height:390px;border: 0;outline: none;"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<div id="modePlain" style="display:none;">
|
||||
<div class="editor-wrap">
|
||||
<textarea id="editor"></textarea>
|
||||
</div>
|
||||
<div class="input-tip">
|
||||
基于 latex 语法，<a href="javascript:;" id="inputDemo">点击输入示例</a>。
|
||||
</div>
|
||||
<div class="editor-preview" id="preview">
|
||||
<div class="title">预览</div>
|
||||
<div class="body">
|
||||
<img class="image" id="previewImage"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script src="../../third-party/jquery-1.10.2.js?628072e7"></script>
|
||||
<script type="text/javascript" src="../../third-party/clipboard/clipboard.js?555edf0a"></script>
|
||||
<script type="text/javascript" src="formula.js?8fdd0a42"></script>
|
||||
<script type="text/javascript">
|
||||
utils.domReady(function () {
|
||||
Formula.init();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
147
public/UEditorPlus/dialogs/formula/formula.js
Normal file
147
public/UEditorPlus/dialogs/formula/formula.js
Normal file
@ -0,0 +1,147 @@
|
||||
function preg_quote(str, delimiter) {
|
||||
// Quote regular expression characters plus an optional character
|
||||
//
|
||||
// version: 1107.2516
|
||||
// discuss at: http://phpjs.org/functions/preg_quote
|
||||
// + original by: booeyOH
|
||||
// + improved by: Ates Goral (http://magnetiq.com)
|
||||
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
|
||||
// + bugfixed by: Onno Marsman
|
||||
// + improved by: Brett Zamir (http://brett-zamir.me)
|
||||
// * example 1: preg_quote("$40");
|
||||
// * returns 1: '\$40'
|
||||
// * example 2: preg_quote("*RRRING* Hello?");
|
||||
// * returns 2: '\*RRRING\* Hello\?'
|
||||
// * example 3: preg_quote("\\.+*?[^]$(){}=!<>|:");
|
||||
// * returns 3: '\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:'
|
||||
return (str + '').replace(new RegExp('[.\\\\+*?\\[\\^\\]$(){}=!<>|:\\' + (delimiter || '') + '-]', 'g'), '\\$&');
|
||||
}
|
||||
|
||||
function loadScript(url, cb) {
|
||||
var script;
|
||||
script = document.createElement('script');
|
||||
script.src = url;
|
||||
script.onload = function () {
|
||||
cb && cb({isNew: true})
|
||||
};
|
||||
document.getElementsByTagName('head')[0].appendChild(script);
|
||||
}
|
||||
|
||||
var Formula = {
|
||||
mode: 'plain',
|
||||
latexeasy: null,
|
||||
init: function () {
|
||||
// console.log('Formula.init')
|
||||
Formula.initMode();
|
||||
Formula.initEvent();
|
||||
Formula.initSubmit();
|
||||
},
|
||||
renderPlain: function () {
|
||||
var $preview = $('#preview');
|
||||
var value = $('#editor').val();
|
||||
if (!value) {
|
||||
$preview.hide();
|
||||
return;
|
||||
}
|
||||
value = encodeURIComponent(value);
|
||||
var formulaConfig = editor.getOpt('formulaConfig');
|
||||
var src = formulaConfig.imageUrlTemplate.replace(/\{\}/, value);
|
||||
$('#previewImage').attr('src', src);
|
||||
$preview.show();
|
||||
},
|
||||
setValuePlain: function (value) {
|
||||
$('#editor').val(value);
|
||||
Formula.renderPlain();
|
||||
},
|
||||
setValueLive: function (value) {
|
||||
if (!Formula.latexeasy) {
|
||||
setTimeout(function () {
|
||||
Formula.setValueLive(value);
|
||||
}, 100);
|
||||
return;
|
||||
}
|
||||
Formula.latexeasy.call('set.latex', {latex: value});
|
||||
},
|
||||
initMode: function () {
|
||||
var formulaConfig = editor.getOpt('formulaConfig');
|
||||
if ('live' === formulaConfig.editorMode) {
|
||||
$('#liveEditor').attr('src', formulaConfig.editorLiveServer + '/editor');
|
||||
$('#modeLive').show();
|
||||
Formula.mode = 'live';
|
||||
} else {
|
||||
$('#modePlain').show();
|
||||
Formula.mode = 'plain';
|
||||
}
|
||||
var img = editor.selection.getRange().getClosedNode();
|
||||
if (img && img.getAttribute('data-formula-image') !== null) {
|
||||
var value = img.getAttribute('data-formula-image');
|
||||
if (value) {
|
||||
Formula.setValue(decodeURIComponent(value));
|
||||
}
|
||||
}
|
||||
},
|
||||
setValue: function (value) {
|
||||
switch (Formula.mode) {
|
||||
case 'plain':
|
||||
Formula.setValuePlain(value);
|
||||
break;
|
||||
case 'live':
|
||||
Formula.setValueLive(value);
|
||||
break;
|
||||
}
|
||||
},
|
||||
getValue: function (cb) {
|
||||
switch (Formula.mode) {
|
||||
case 'plain':
|
||||
cb($.trim($('#editor').val()));
|
||||
break;
|
||||
case 'live':
|
||||
Formula.latexeasy.call('get.latex', {}, function (data) {
|
||||
cb(data.latex);
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
initEvent: function () {
|
||||
var changeTimer = null, le;
|
||||
switch (Formula.mode) {
|
||||
case 'plain':
|
||||
// console.log('Formula.initEvent');
|
||||
$('#editor').on('change keypress', function () {
|
||||
changeTimer && clearTimeout(changeTimer);
|
||||
changeTimer = setTimeout(function () {
|
||||
Formula.renderPlain();
|
||||
}, 1000);
|
||||
});
|
||||
$('#inputDemo').on('click', function () {
|
||||
$('#editor').val('f(a) = \\frac{1}{2\\pi i} \\oint\\frac{f(z)}{z-a}dz');
|
||||
Formula.renderPlain();
|
||||
});
|
||||
break;
|
||||
case 'live':
|
||||
var formulaConfig = editor.getOpt('formulaConfig');
|
||||
loadScript(formulaConfig.editorLiveServer + '/vendor/LatexEasyEditor/editor/sdk.js', function () {
|
||||
le = new window.LatexEasy(document.getElementById('liveEditor'));
|
||||
le.on('ready', function () {
|
||||
Formula.latexeasy = le;
|
||||
});
|
||||
le.init();
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
initSubmit: function () {
|
||||
dialog.onclose = function (t, ok) {
|
||||
if (!ok) {
|
||||
return true;
|
||||
}
|
||||
// console.log('onclose', t, ok);
|
||||
Formula.getValue(function (value) {
|
||||
editor.execCommand('formula', value);
|
||||
editor.fireEvent('saveScene');
|
||||
dialog.close(false);
|
||||
});
|
||||
return false;
|
||||
};
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user