vue-cuihovah-ueditor
Version:
将ueditor添加了修改mathjax公式的功能，封装成了Vue组件
110 lines (93 loc) • 3.6 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="kityformula/assets/styles/base.css">
<link rel="stylesheet" href="kityformula/assets/styles/ui.css">
<link rel="stylesheet" href="kityformula/assets/styles/scrollbar.css">
<style>
html, body {
padding: 0;
margin: 0;
}
.kf-editor {
width: 780px;
height: 380px;
}
#loading {
height: 32px;
width: 340px;
line-height: 32px;
position: absolute;
top: 42%;
left: 50%;
margin-left: -170px;
font-family: arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
#loading img {
position: absolute;
}
#loading p {
display: block;
position: absolute;
left: 40px;
top: 0px;
margin: 0;
}
</style>
<title></title>
</head>
<body>
<div id="kfEditorContainer" class="kf-editor">
<div id="tips" class="tips">
</div>
</div>
<!--页面中一定要引入internal.js为了能直接使用当前打开dialog的实例变量-->
<!--internal.js默认是放到dialogs目录下的-->
<script type="text/javascript" src="/node_modules/underscore/underscore-min.js"></script>
<script type="text/javascript" src="/node_modules/vue-cuihovah-ueditor/charMap.js"></script>
<script type="text/javascript" src="../dialogs/internal.js"></script>
<script src="kityformula/js/jquery-1.11.0.min.js"></script>
<script src="kityformula/js/kitygraph.all.js"></script>
<script src="kityformula/js/kity-formula-render.all.min.js"></script>
<script src="kityformula/js/kity-formula-parser.all.min.js"></script>
<script src="kityformula/js/kityformula-editor.all.js"></script>
<script>
jQuery( function ($) {
if ( document.body.addEventListener ) {
$( "#tips").html('<div id="loading"><img src="kityformula/loading.gif" alt="loading" /><p>正在加载，请耐心等待...</p></div>' );
var factory = kf.EditorFactory.create( $( "#kfEditorContainer" )[ 0 ], {
render: {
fontsize: 24
},
resource: {
path: "./kityformula/resource/"
}
} );
factory.ready( function ( KFEditor ) {
$( "#tips").remove();
// this指向KFEditor
var rng = editor.selection.getRange(),
img = rng.getClosedNode(),
imgLatex = img && $(img).attr('data-latex');
this.execCommand( "render", imgLatex || "\\placeholder" );
this.execCommand( "focus" );
window.kfe = this;
} );
dialog.onok = function(){
kfe.execCommand('get.image.data', function(data){
var latex = kfe.execCommand('get.source');
editor.execCommand('inserthtml', '<img resize=true class="kfformula" src="'+ data.img +'" data-latex="' + latex + '" onclick="start_edit(this)" />');
dialog.close();
});
return false;
}
} else {
$( "#tips").css( "color", "black" );
$( "#tips").css( "padding", "10px" );
}
} );
</script>
</body>
</html>