wsq/nas_docker_compose
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
nas_docker_compose/kodbox/site/static/app/vender/tinymce/demo.html

327 lines
22 KiB
HTML
Raw Normal View History

update
2024-08-31 01:03:37 +08:00
<!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 -&gt; <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>&sum;</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">&sum;</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>&sum;</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>&minus;</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;">&sum;</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><
<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>
Reference in New Issue Copy Permalink