327 lines
22 KiB
HTML
Executable File
327 lines
22 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
<title></title>
|
||
</head>
|
||
<body>
|
||
<textarea class="aaa">
|
||
<p>Here is an example of math -> <span class="katex-box"><span class="katex" contenteditable="false" data-exp="\displaystyle \sum ^{k+1}_{i=1} {i}"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mstyle scriptlevel="0" displaystyle="true"><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mrow><mi>k</mi><mo>+</mo><mn>1</mn></mrow></munderover><mi>i</mi></mstyle></mrow><annotation encoding="application/x-tex">\displaystyle \sum ^{k+1}_{i=1} {i}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height: 3.1137820000000005em; vertical-align: -1.277669em;"></span><span class="mop op-limits"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 1.8361130000000003em;"><span style="top: -1.872331em; margin-left: 0em;"><span class="pstrut" style="height: 3.05em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathnormal mtight">i</span><span class="mrel mtight">=</span><span class="mord mtight">1</span></span></span></span><span style="top: -3.050005em;"><span class="pstrut" style="height: 3.05em;"></span><span><span class="mop op-symbol large-op">∑</span></span></span><span style="top: -4.300005em; margin-left: 0em;"><span class="pstrut" style="height: 3.05em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathnormal mtight" style="margin-right: 0.03148em;">k</span><span class="mbin mtight">+</span><span class="mord mtight">1</span></span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height: 1.277669em;"><span></span></span></span></span></span><span class="mspace" style="margin-right: 0.16666666666666666em;"></span><span class="mord"><span class="mord mathnormal">i</span></span></span></span></span></span> 123</p>
|
||
<p><span style="font-size: 24px;">1<span class="katex-box"><span class="katex" contenteditable="false" data-exp="\left ( {x+a} \right )^{2}=\sum ^{n}_{k=0} {\left ( {^{n}_{k}} \right ){x}^{k}{a}^{n-k}}"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msup><mrow><mo fence="true">(</mo><mrow><mi>x</mi><mo>+</mo><mi>a</mi></mrow><mo fence="true">)</mo></mrow><mn>2</mn></msup><mo>=</mo><msubsup><mo>∑</mo><mrow><mi>k</mi><mo>=</mo><mn>0</mn></mrow><mi>n</mi></msubsup><mrow><mrow><mo fence="true">(</mo><msubsup><mrow></mrow><mi>k</mi><mi>n</mi></msubsup><mo fence="true">)</mo></mrow><msup><mi>x</mi><mi>k</mi></msup><msup><mi>a</mi><mrow><mi>n</mi><mo>−</mo><mi>k</mi></mrow></msup></mrow></mrow><annotation encoding="application/x-tex">\left ( {x+a} \right )^{2}=\sum ^{n}_{k=0} {\left ( {^{n}_{k}} \right ){x}^{k}{a}^{n-k}}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height: 1.204008em; vertical-align: -0.25em;"></span><span class="minner"><span class="minner"><span class="mopen delimcenter" style="top: 0em;">(</span><span class="mord"><span class="mord mathnormal">x</span><span class="mspace" style="margin-right: 0.2222222222222222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right: 0.2222222222222222em;"></span><span class="mord mathnormal">a</span></span><span class="mclose delimcenter" style="top: 0em;">)</span></span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.954008em;"><span style="top: -3.2029em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span></span><span class="mspace" style="margin-right: 0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right: 0.2777777777777778em;"></span></span><span class="base"><span class="strut" style="height: 1.148818em; vertical-align: -0.29971000000000003em;"></span><span class="mop"><span class="mop op-symbol small-op" style="position: relative; top: -0.0000050000000000050004em;">∑</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 0.804292em;"><span style="top: -2.40029em; margin-left: 0em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathnormal mtight" style="margin-right: 0.03148em;">k</span><span class="mrel mtight">=</span><span class="mord mtight">0</span></span></span></span><span style="top: -3.2029em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathnormal mtight">n</span></span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height: 0.29971000000000003em;"></span></span></span></span></span><span class="mspace" style="margin-right: 0.16666666666666666em;"></span><span class="mord"><span class="minner"><span class="mopen delimcenter" style="top: 0em;">(</span><span class="mord"><span class="mord"><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 0.664392em;"><span style="top: -2.4168920000000003em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathnormal mtight" style="margin-right: 0.03148em;">k</span></span></span></span><span style="top: -3.063em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathnormal mtight">n</span></span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height: 0.2831079999999999em;"></span></span></span></span></span></span><span class="mclose delimcenter" style="top: 0em;">)</span></span><span class="mspace" style="margin-right: 0.16666666666666666em;"></span><span class="mord"><span class="mord"><span class="mord mathnormal">x</span></span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.849108em;"><span style="top: -3.063em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathnormal mtight" style="margin-right: 0.03148em;">k</span></span></span></span></span></span></span></span></span><span class="mord"><span class="mord"><span class="mord mathnormal">a</span></span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.8491079999999999em;"><span style="top: -3.063em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathnormal mtight">n</span><span class="mbin mtight">−</span><span class="mord mathnormal mtight" style="margin-right: 0.03148em;">k</span></span></span></span></span></span></span></span></span></span></span></span></span>0</span></span></p>
|
||
<h3>The Suneditor is based on pure JavaScript, with no <a href="http://suneditor.com/sample/index.html">dependencies</a>.</h3>
|
||
<p><br /></p>
|
||
<p><img src="http://suneditor.com/docs/big-whale.jpg" alt="" /></p>
|
||
</textarea>
|
||
|
||
|
||
<style type="text/css" media="all">
|
||
.ripple-father {position: absolute !important;border-radius: 10% !important;}
|
||
</style>
|
||
<script type="text/javascript">
|
||
var time = function(){var theTime=(new Date).valueOf();return parseInt(theTime/1e3)};
|
||
window.G = {kod:{version:time()}}
|
||
window.API_HOST = "/kod/kodbox/index.php?";
|
||
window.STATIC_PATH = "/kod/kodbox/static/";
|
||
</script>
|
||
|
||
|
||
<script src="/kod/kodbox/static/app/dist/vendor.js"></script>
|
||
<script src="/kod/kodbox/static/app/dist/api.js"></script>
|
||
<link href="/kod/kodbox/static/style/lib/main.css" rel='stylesheet'>
|
||
<link href="/kod/kodbox/static/style/dist/main.css" rel='stylesheet'>
|
||
<link rel="stylesheet" href="./kod/style.css" type="text/css"/>
|
||
|
||
|
||
<script src="./tinymce.min.js" type="text/javascript" charset="utf-8"></script>
|
||
<script src="./jquery.tinymce.min.js" type="text/javascript" charset="utf-8"></script>
|
||
<script src="./kod/media.js" type="text/javascript" charset="utf-8"></script>
|
||
<script type="text/javascript" charset="utf-8">
|
||
function getFileName() {
|
||
$(".mce-textbox.mce-placeholder").val($("#image").val());
|
||
}
|
||
|
||
var sizeArr = "12px,13px,14px,15px,16px,18px,20px,24px,32px,36px,48px".split(',');
|
||
var fontArr = [
|
||
"默认字体=",
|
||
"微软雅黑=Microsoft Yahei",
|
||
"宋体=STsong,SimSun,NSimSun,STFangsong,FangSong,FangSong_GB2312,STZhongsong",
|
||
// "仿宋=STFangsong",
|
||
"楷体=STKaiti,KaiTi,KaiTi_GB2312,Kai",
|
||
"华文细黑=STXihei",
|
||
"华文行楷=STXingkai",
|
||
"黑体=STHeiti,SimHei",
|
||
"隶书=隶书,SimLi,STLiti",
|
||
|
||
"Arial=Arial,helvetica,sans-serif",
|
||
"Comic Sans MS=Comic Sans MS,cursive",
|
||
"Courier New=Courier New,Courier,monospace",
|
||
"Impact=Impact,chicago",
|
||
"Lucida Sans Unicode=Lucida Sans Unicode,Lucida Grande,sans-serif",
|
||
"Tahoma=Tahoma,Geneva,sans-serif",
|
||
"Times New Roman=Times New Roman,Times,serif",
|
||
"Trebuchet MS=Trebuchet MS",
|
||
"Verdana=Verdana,Geneva,sans-serif",
|
||
];
|
||
//http://tinymce.ax-z.cn/general/basic-setup.php
|
||
|
||
var menuList = {
|
||
menuFormate:{title:'Format',items: 'bold italic underline strikethrough superscript subscript blockquote checklist codeformat | blockformats fontformats fontsizes align | forecolor backcolor | removeformat' },
|
||
menuInsert:{title:'Insert',items: 'image link media template codesample inserttable | pageembed kitymath bdmap | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime'},
|
||
menuMore:{title:'更多',items: 'undo redo | cut copy selectall searchreplace | visualchars visualblocks | codeView wordcount formatpainter | fullscreen preview print help' }
|
||
};
|
||
|
||
var toolbarGroup = {
|
||
formateKod: {
|
||
icon: 'bold',
|
||
tooltip: 'Formatting',
|
||
items: 'bold italic underline | superscript subscript'
|
||
},
|
||
alighKod: {
|
||
icon: 'aligncenter',
|
||
tooltip: 'Align',
|
||
items: 'alignleft aligncenter alignright'
|
||
}
|
||
};
|
||
var toolbar = [
|
||
'codeView undo redo formatpainter | numlist bullist checklist indent outdent | alignleft aligncenter alignright | lineheight '+
|
||
'preview fullscreen',
|
||
'bold italic underline strikethrough | formatselect fontselect fontsizeselect | forecolor backcolor| link blockquote emoticons image table'
|
||
];
|
||
var toolbar = [
|
||
'formatselect fontselect fontsizeselect | alignleft aligncenter alignright alignjustify lineheight | formatpainter preview codeView fullscreen ',
|
||
'bold italic underline strikethrough forecolor backcolor removeformat | numlist bullist indent outdent |hr blockquote emoticons link image table'
|
||
];
|
||
|
||
// toolbar = ['bold italic underline formatselect forecolor| alignleft aligncenter alignright numlist bullist | emoticons link image | codeView fullscreen']
|
||
|
||
var plugins = [
|
||
'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image',
|
||
'link media codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist',
|
||
'lists textcolor wordcount imagetools contextmenu paste colorpicker textpattern help lineheight quickbars',
|
||
'bdmap emoticons checklist pageembed formatpainter kitymath codeView'
|
||
];
|
||
|
||
var menubarList = 'menuFormate menuInsert menuMore';//file edit insert view format table tools help
|
||
var colorMap = [
|
||
'#FFFFFF','c-white','#cfd8dc','','#ffccbc','','#ffecb3','','#fff9c4','','#dcedc8','','#b2ebf2','','#e6f7ff','','#d1c4e9','',
|
||
'#D9D9D9','','#90a4ae','','#ff8a65','','#ffd54f','','#fff176','','#aed581','','#4dd0e1','','#91d5ff','','#9575cd','',
|
||
'#969696','','#607d8b','','#ff5722','','#ffc107','','#ffeb3b','','#8bc34a','','#00bcd4','','#40a9ff','','#673ab7','',
|
||
'#525252','','#455a64','','#e64a19','','#ffa000','','#fbc02d','','#689f38','','#0097a7','','#1890ff','','#512da8','',
|
||
'#000000','','#263238','','#bf360c','','#ff6f00','','#f57f17','','#33691e','','#006064','','#006dd2','','#311b92','',
|
||
];
|
||
|
||
var menuBarInit = function(editor){
|
||
window.teditor = editor;
|
||
var $main = $(editor.editorContainer);
|
||
var $menubar = $main.find('.tox-menubar');
|
||
var $toolbar = $main.find(".tox-toolbar").first();
|
||
$menubar = $menubar.appendTo($toolbar);
|
||
$menubar.prev().addClass('menubar-prev');
|
||
|
||
$main.find(".toc-i-icon").each(function(){
|
||
var $btn = $(this).parents('.tox-split-button,.tox-tbtn');
|
||
if($btn.length == 1){
|
||
$btn.addClass('toc-i-'+$(this).attr('key'));
|
||
}
|
||
});
|
||
|
||
var menubarArr = menubarList.split(' ');
|
||
$menubar.find('.tox-mbtn').each(function(index){
|
||
$(this).addClass('mce-i-'+menubarArr[index]);
|
||
});
|
||
editor.on('DblClick',function(e){
|
||
var $target = $(e.target);
|
||
if(!$target[0].tagName) return;
|
||
var tag = $target[0].tagName.toLowerCase();
|
||
|
||
// console.log(111,tag,$target); //mce-preview-object mce-object-iframe
|
||
// 命令:https://www.tiny.cloud/docs/advanced/editor-command-identifiers/
|
||
switch(tag){
|
||
case 'img':
|
||
if($target.hasClass('mce-object-video')){
|
||
editor.execCommand('mceMedia');
|
||
}else if(!$target.hasClass('mce-object')){
|
||
editor.execCommand('mceImage');
|
||
}
|
||
break;
|
||
case 'a' :editor.execCommand('mceLink');break;
|
||
case 'span':
|
||
// iframe 视频;
|
||
if( $target.hasClass('mce-preview-object') &&
|
||
$target.hasClass('mce-object-iframe')){
|
||
editor.execCommand('mceMedia');
|
||
}
|
||
default:break;
|
||
}
|
||
});
|
||
}
|
||
var STATIC_PATH = '/kod/kodbox/static/';
|
||
|
||
tinymce.init({
|
||
selector:'.aaa',
|
||
theme: "silver",
|
||
content_css: [
|
||
'./kod/content.css',
|
||
STATIC_PATH+'app/vender/markdown/katex/katex.min.css',
|
||
],
|
||
theme_advanced_font_sizes:sizeArr.join(','),
|
||
fontsize_formats:sizeArr.join(' '),
|
||
font_formats:fontArr.join(';'),
|
||
menu:menuList,
|
||
menubar:menubarList,
|
||
language: 'zh_CN',
|
||
plugins: plugins,
|
||
toolbar: toolbar,
|
||
toolbar_groups: toolbarGroup,
|
||
browser_spellcheck: true,
|
||
|
||
color_cols:9,
|
||
color_map:colorMap,
|
||
resize: 'both',
|
||
toolbar_mode:'sliding', //不生效问题;
|
||
draggable_modal: true,
|
||
branding: false,
|
||
|
||
// contextmenu: false, 不使用自定义右键,使用浏览器默认;
|
||
contextmenu: "bold copy cut | align | link format | insert | table",
|
||
// quickbars_insert_toolbar: 'h2 h3 | bullist | link blockquote image table',//[插入时]快捷工具栏
|
||
quickbars_insert_toolbar:false,
|
||
quickbars_selection_toolbar: 'bold italic underline | h2 h3 blockquote link',//[选择内容时]快捷工具栏
|
||
|
||
width:1200,height:600,
|
||
cache_suffix: '?v=4.1.6',
|
||
// 工具栏: https://www.tiny.cloud/docs/configure/editor-appearance/#menu
|
||
// 值过滤: http://tinymce.ax-z.cn/configure/content-filtering.php
|
||
// 内容格式: https://www.tiny.cloud/docs/configure/content-formatting/
|
||
|
||
|
||
allow_conditional_comments:true,
|
||
verify_html: false, // 是否过滤html; 清除script,过滤空元素;
|
||
extended_valid_elements : "i[*],span[*],div[*]",// 不清除空元素; 例如<i class="icon-code"></i>;
|
||
remove_trailing_brs: false,
|
||
protect:[
|
||
/\<\/?(if|endif)\>/g, //<if> & </endif>
|
||
/\<xsl\:[^>]+\>/g, //<xsl:...>
|
||
/<\?php.*?\?>/g, //php代码
|
||
],
|
||
// custom_elements:'math,semantics,mrow,mstyle,munderover,annotation,mi,mo,mn',
|
||
|
||
// 复制粘贴处理;https://www.pianshen.com/article/6109197268/
|
||
// 增强复制粘贴: https://www.tiny.cloud/docs-4x/plugins/powerpaste/
|
||
// 保留样式;all为所有; 多个用逗号隔开;
|
||
// paste_webkit_styles:'all',
|
||
paste_webkit_styles: 'color,background,width,height,vertical-align,'+
|
||
'text-align,padding,margin,padding-top,padding-bottom,line-height',
|
||
|
||
|
||
|
||
file_browser_callback_types: 'image',
|
||
file_browser_callback: function(field_name,url,type,win) {
|
||
return false;
|
||
},
|
||
setup:function(editor){
|
||
editor.on('preinit',function(){
|
||
loadPluginReset(editor);
|
||
addIcon(editor);
|
||
resetMenus(editor);
|
||
});
|
||
},
|
||
init_instance_callback:function(editor){// 初始化完成;
|
||
menuBarInit(editor);
|
||
},
|
||
|
||
//图片上传相关
|
||
paste_data_images: true,
|
||
image_title: false, // 是否开启图片标题设置的选择，这里设置否
|
||
image_advtab: true, //开启图片上传的高级选项功能
|
||
// images_upload_base_path:'xxx', // 图片上传的基本路径
|
||
// images_upload_url:'xxx?method=country-',
|
||
// automatic_uploads: true, //开启点击图片上传时，自动进行远程上传操作
|
||
images_upload_handler1:function(blobInfo,successCallback,errorCallback){
|
||
var formData = new FormData()
|
||
console.log(blobInfo)
|
||
formData.append('file',blobInfo.blob(), blobInfo.filename());
|
||
|
||
// self.$axios.post('http://127.0.0.1:8000/upload/',formData)
|
||
}
|
||
});
|
||
|
||
var loadPluginReset = function(editor){
|
||
if(!tinymce.pluginResetAdd) return;
|
||
_.each(tinymce.pluginResetAdd,function(method){
|
||
method && method(editor);
|
||
});
|
||
}
|
||
var resetMenus = function(editor){
|
||
var data = editor.ui.registry.getAll();
|
||
if(_.isEmpty(data.menuItems)) return;
|
||
var menus = 'tableprops,align,fontformats,fontsizes,blockformats'.split(',');
|
||
_.each(menus,function(menu){
|
||
if(data.menuItems[menu]){
|
||
data.menuItems[menu].icon = menu;
|
||
data.menuItems[menu].tooltip = 'fafa';
|
||
}
|
||
});
|
||
}
|
||
var addIcon = function(editor){
|
||
var data = editor.ui.registry.getAll();
|
||
resetSvgIcon(data.icons);
|
||
var iconMap = {
|
||
'math':'mce-i-icon mce-i-mathjax',
|
||
'bdmap':'icon-location',
|
||
'code':'icon-code',
|
||
'fontformats':'icon-font', //字体
|
||
'fontsizes':'icon-format-font-size',
|
||
'blockformats':'icon-header',
|
||
'new-tab':'icon-external-link',
|
||
'align':'mce-i-icon mce-i-align-center',
|
||
'tableprops':'icon-information-outline',
|
||
'table-delete-table':'icon-minus-outline',
|
||
|
||
|
||
'checklist':'icon-check-square',
|
||
'sourcecode':'icon-code',
|
||
'code-sample':'icon-code',
|
||
'insert-time':'icon-date-add',
|
||
'embed':'icon-play-circle',
|
||
'chevron-down':'icon-angle-down',
|
||
'chevron-right':'icon-angle-right',
|
||
'chevron-left':'icon-angle-left',
|
||
'chevron-up':'icon-angle-up'
|
||
}
|
||
_.each(iconMap,function(value,key){
|
||
var icon = '<i class="font-icon '+value+'"></i><i class="toc-i-icon" key="'+key+'"></i>';
|
||
editor.ui.registry.addIcon(key,icon);
|
||
});
|
||
}
|
||
var resetSvgIcon = function(iconList){
|
||
var resetIcon = [
|
||
// 'highlight-bg-color','text-color','selected',
|
||
|
||
'help','bookmark','autocorrect','bidiltr','bidirtl',
|
||
'quote','bold','unordered-list','button','checkbox','copy','cut','docprops',
|
||
'find','form','visualchars','horizontal-rule','iframe','image','imagebutton',
|
||
'indent','italic','align-justify','align-center','align-left','align-right',
|
||
'language','link','mathjax','fullscreen','newpage','ordered-list','outdent',
|
||
'page-break','paste','pastefromword','preview','print','radio',
|
||
'redo','remove-formatting','search','save','scayt','select','select-all',
|
||
'showblocks','emoji','sourcecode','sourcedialog','insert-character','spellchecker',
|
||
'strike-through','subscript','superscript','table','templates','textarea',
|
||
'textfield','uicolor','underline','undo','undo','unlink'
|
||
];
|
||
for (var key in iconList) {
|
||
if(iconList[key] && iconList[key].substr(0,2) == '<i') continue;
|
||
var addIcon = '<i class="toc-i-icon" key="'+key+'"></i>';
|
||
var sizeNew = 'width="18" height="18" viewBox="2 2 20 20"';
|
||
iconList[key] = addIcon + iconList[key].replace('width="24" height="24"',sizeNew);
|
||
|
||
if(resetIcon.indexOf(key) == -1) continue;
|
||
iconList[key] = addIcon + '<i class="mce-i-icon mce-i-'+key+'"></i>';
|
||
}
|
||
}
|
||
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|