You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
educoder/public/editormd/examples/resettings.html

144 lines
6.2 KiB

6 years ago
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Resettings - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../css/editormd.css" />
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="layout">
<header>
<h1>Resettings</h1>
<p>只能设置依赖模块加载完成之后的相关配置或者使用拖动加载模块方式。</p>
<p>Only be resetting the relevant configuration of dependent module loaded after, or using manually load modules mode.</p>
</header>
<div class="btns">
<button id="show-btn">Show editor</button>
<button id="hide-btn">Hide editor</button>
<button id="get-md-btn">Get Markdown</button>
<button id="get-html-btn">Get HTML</button>
<button id="watch-btn">Watch</button>
<button id="unwatch-btn">Unwatch</button>
<button id="preview-btn">Preview HTML(Press ESC cancel)</button>
<button id="fullscreen-btn">Fullscreen (Press ESC cancel)</button>
<button id="show-toolbar-btn">Show toolbar</button>
<button id="close-toolbar-btn">Hide toolbar</button>
</div>
<div id="test-editormd">
<textarea style="display:none;">#### Resetting examples
```javascript
this.config("lineNumbers", false);
this.config({
toc : false,
tex : false,
previewCodeHighlight : true, // before set previewCodeHighlight == false, editor not load pretty.js, so now codes can't highlight and display line numbers.
flowChart : false,
sequenceDiagram : false,
dialogLockScreen : false,
dialogDraggable : false,
dialogMaskBgColor : "teal",
toolbar : true
});
this.config("onresize", function() {
console.log("onresize =&gt;", this);
});
```</textarea></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditor;
$(function() {
$.get("test.md", function(md) {
testEditor = editormd("test-editormd", {
width : "90%",
height : 740,
path : "../lib/",
appendMarkdown : "\n" + md,
saveHTMLToTextarea : true,
watch : false,
htmlDecode : true,
toolbar : false,
previewCodeHighlight : false,
tex : true,
flowChart : true,
sequenceDiagram : true,
emoji : true,
taskList : true,
onload : function() {
console.log('onload', this);
this.config("lineNumbers", false);
this.config({
toc : false,
tex : false,
toolbar : true,
previewCodeHighlight : true, // before set previewCodeHighlight == false, editor not load pretty.js, so now codes can't highlight and display line numbers.
flowChart : false,
sequenceDiagram : false,
dialogLockScreen : false,
dialogMaskOpacity : 0.5, // 设置透明遮罩层的透明度全局通用默认值为0.1
dialogDraggable : false,
dialogMaskBgColor : "#000"
});
this.config("onresize", function() {
console.log("onresize =>", this);
});
this.watch();
}
});
});
$("#show-btn").click(function(){
testEditor.show();
});
$("#hide-btn").click(function(){
testEditor.hide();
});
$("#get-md-btn").click(function(){
alert(testEditor.getMarkdown());
});
$("#get-html-btn").click(function() {
alert(testEditor.getHTML());
});
$("#watch-btn").click(function() {
testEditor.watch();
});
$("#unwatch-btn").click(function() {
testEditor.unwatch();
});
$("#preview-btn").click(function() {
testEditor.previewing();
});
$("#fullscreen-btn").click(function() {
testEditor.fullscreen();
});
$("#show-toolbar-btn").click(function() {
testEditor.showToolbar();
});
$("#close-toolbar-btn").click(function() {
testEditor.hideToolbar();
});
});
</script>
</body>
</html>