首页 / 知识
用HTML+CSS做一个实时预览的markdown编辑器
2023-04-11 15:12:00
<!DOCTYPEhtml><html>
<head>
<metacharset="UTF-8">
<title>markdown编辑器</title>
<styletype="text/css">
*{margin:0;padding:0;outline:none;border-radius:0;
}
html,body{width:100%;height:100%;font-family:"HelveticaNeue",Helvetica,Arial,sans-serif;background-color:#ebebeb;
}#toolbar{height:50px;background-color:#444;width:100%;color:#fff;line-height:50px;
}#container{overflow:auto;position:absolute;bottom:0;left:0;right:0;top:50px;
}#editor-column,#preview-column{width:49.5%;height:100%;overflow:auto;position:relative;background-color:#fff;
}.pull-left{float:left;
}
.pull-right{float:right;
}</style>
</head>
<body>
<divid="toolbar"></div>
<divid="container">
<divid="editor-column"class="pull-left">
<divid="panel-editor">
</div>
</div>
<divid="preview-column"class="pull-right">
<divid="panel-preview">
</div>
</div>
</div>
</body></html>
第二步引入资源实现初步效果:
1.项目下创建js文件夹
2.解从下载好的压缩包解marked/lib下的marked.js到js文件夹
3.解从下载好的压缩包解ace-builds/src到js文件夹重命名为ace
4.引入js文件
(注:markdown.css是markdown样式文件,可以自行编写或从网上下载比如:github-markdown-css)
<!DOCTYPEhtml><html>
<head>
<metacharset='UTF-8'>
<title>markdown编辑器</title>
<scriptsrc="js/jquery-2.1.4.min.js"></script>
<scriptsrc="js/marked.js"></script>
<scriptsrc="js/ace/ace.js"></script>
<linkhref="markdown.css"rel="stylesheet"/>
<!--略-->
5初始化插件
(先添加编辑区和显示区代码)
<!--略-->#mdeditor#preview,#panel-editor,#panel-preview{
height:100%;
width:100%;
}</style>
</head>
<body>
<divid='toolbar'></div>
<divid='container'><divid='editor-column'class='pull-left'>
<divid='panel-editor'>
<!--编辑区-->
<divclass="editor-content"id="mdeditor"></div>
</div>
</div>
<divid='preview-column'class='pull-right'>
<divid='panel-preview'>
<!--显示区-->
<divid="preview"class="markdown-body"></div>
</div>
</div>
<!--略-->
(先添加初始化代码)
<!--略-->
varacen_edit=ace.edit('mdeditor');
acen_edit.setTheme('ace/theme/chrome');
acen_edit.getSession().setMode('ace/mode/markdown');
acen_edit.renderer.setShowPrintMargin(false);
$("#mdeditor").keyup(function(){
$("#preview").html(marked(acen_edit.getValue()));
});
第三步添加工具到工具栏示例:
1.编写公用方法
(其实点击工具主要是在编辑器里自动插入本来手打的符号)
functioninsertText(val){
acen_edit.insert(val);//光标位置插入
}
<divid='toolbar'>
<buttononclick="insertText('**?**')">加粗</button>
<buttononclick="insertText('_?_')">斜体</button>
<buttononclick="insertText('>')">引用</button>
.....</div>
第四步ace.jsAPI实现编辑器设置功能:
<divid='toolbar'>
<buttononclick="insertText('**?**')">加粗</button>
<buttononclick="insertText('_?_')">斜体</button>
<buttononclick="insertText('>')">引用</button>.....设置:<selectid="theme"size="1">
<optgrouplabel="Bright">
<optionvalue="ace/theme/chrome">Chrome</option>
<optionvalue="ace/theme/clouds">Clouds</option>
<optionvalue="ace/theme/crimson_editor">CrimsonEditor</option>
<optionvalue="ace/theme/dawn">Dawn</option>
<optionvalue="ace/theme/dreamweaver">Dreamweaver</option>
<optionvalue="ace/theme/eclipse">Eclipse</option>
<optionvalue="ace/theme/github">GitHub</option>
<optionvalue="ace/theme/iplastic">IPlastic</option>
<optionvalue="ace/theme/solarized_light">SolarizedLight</option>
<optionvalue="ace/theme/textmate">TextMate</option>
<optionvalue="ace/theme/tomorrow">Tomorrow</option>
<optionvalue="ace/theme/xcode">XCode</option>
<optionvalue="ace/theme/kuroir">Kuroir</option>
<optionvalue="ace/theme/katzenmilch">KatzenMilch</option>
<optionvalue="ace/theme/sqlserver">SQLServer</option>
</optgroup>
<optgrouplabel="Dark">
<optionvalue="ace/theme/ambiance">Ambiance</option>
<optionvalue="ace/theme/chaos">Chaos</option>
<optionvalue="ace/theme/clouds_midnight">CloudsMidnight</option>
<optionvalue="ace/theme/cobalt">Cobalt</option>
<optionvalue="ace/theme/gruvbox">Gruvbox</option>
<optionvalue="ace/theme/idle_fingers">idleFingers</option>
<optionvalue="ace/theme/kr_theme">krTheme</option>
<optionvalue="ace/theme/merbivore">Merbivore</option>
<optionvalue="ace/theme/merbivore_soft">MerbivoreSoft</option>
<optionvalue="ace/theme/mono_industrial">MonoIndustrial</option>
<optionvalue="ace/theme/monokai">Monokai</option>
<optionvalue="ace/theme/pastel_on_dark">Pastelondark</option>
<optionvalue="ace/theme/solarized_dark">SolarizedDark</option>
<optionvalue="ace/theme/terminal">Terminal</option>
<optionvalue="ace/theme/tomorrow_night">TomorrowNight</option>
<optionvalue="ace/theme/tomorrow_night_blue">TomorrowNightBlue</option>
<optionvalue="ace/theme/tomorrow_night_bright">TomorrowNightBright</option>
<optionvalue="ace/theme/tomorrow_night_eighties">TomorrowNight80s</option>
<optionvalue="ace/theme/twilight">Twilight</option>
<optionvalue="ace/theme/vibrant_ink">VibrantInk</option>
</optgroup>
</select>字体大小<selectid="fontsize"size="1">
<optionvalue="10px">10px</option>
<optionvalue="11px">11px</option>
<optionvalue="12px"selected="selected">12px</option>
<optionvalue="13px">13px</option>
<optionvalue="14px">14px</option>
<optionvalue="16px">16px</option>
<optionvalue="18px">18px</option>
<optionvalue="20px">20px</option>
<optionvalue="24px">24px</option>
</select>代码折行<selectid="folding"size="1">
<optionvalue="manual">manual</option>
<optionvalue="markbegin"selected="selected">markbegin</option>
<optionvalue="markbeginend">markbeginandend</option>
</select>自动换行<selectid="soft_wrap"size="1">
<optionvalue="off">Off</option>
<optionvalue="40">40Chars</option>
<optionvalue="80">80Chars</option>
<optionvalue="free">Free</option>
</select>全选样式<inputtype="checkbox"name="select_style"id="select_style"checked="">光标行高光<inputtype="checkbox"name="highlight_active"id="highlight_active"checked="">显示行号<inputtype="checkbox"id="show_gutter"checked="">打印边距<inputtype="checkbox"id="show_print_margin"checked=""></div>
<!---略--->
......
$("#theme").change(function(){
acen_edit.setTheme($(this).val());
})
$("#fontsize").change(function(){
acen_edit.setFontSize($(this).val());
})
$("#folding").change(function(){
session.setFoldStyle($(this).val());
})
$("#select_style").change(function(){
acen_edit.setOption("selectionStyle",this.checked?"line":"text");
})
$("#highlight_active").change(function(){
acen_edit.setHighlightActiveLine(this.checked);
})
$("#soft_wrap").change(function(){
acen_edit.setOption("wrap",$(this).val());
})
$("#show_print_margin").change(function(){
acen_edit.renderer.setShowPrintMargin(this.checked);
})
本文转载自中文网 |
最新内容
相关内容
pythonpip怎么调用
pythonpip怎么调用，培训，工具，标准，管理，替代品，模块，以上，功能，更多，内容，pip是一个安装和管理Python包的工具，python安装包的工具有easy_ins
python井号怎么用
python井号怎么用，培训，代码，注释，演示，上面，下面，以上，部分，更多，内容，注释在编程中是很重要的部分。它能告诉你这段代码是干什么用的，或者用
python三引号怎么使用
python三引号怎么使用，培训，代码，名字，引号，字符串，注释，下面，定义，以上，作用，python中的三引号，3个单引号及3个双引号，通常用来换行书写代码，或
python不定参数传值怎么做
python不定参数传值怎么做，位置，培训，名称，标准，代码，参数，函数，定义，教程，程序，使用*arg_name定义的位置参数，表示任意多个位置参数;Python标
python如何安装一个模块
python如何安装一个模块，培训，工具，模块，方式，文件夹，源码，本文，下面，以上，之后，下面介绍几种安装Python模块的几种方式easy_install方式先下
python变量怎么使用
python变量怎么使用，培训，信息，数字，变量，字母，空格，开头，关键字，意义，规则，python中的变量主要是用来存贮信息的。message="HelloPythonwor
pythondef有什么作用
pythondef有什么作用，代码，培训，名字，函数，括号，内部，定义，功能，作用，参数，python使用def开始函数定义，紧接着是函数名，括号内部为函数的参数，内
python怎么使用列表
python怎么使用列表，位置，培训，公式，列表，元素，表示，末尾，切片，倒数，顺序，python列表的简单操作1.在列表末尾添加元素：sth.append()2.在列表中
pythonc语言取余和python取余的区
pythonc语言取余和python取余的区别，培训，资料，语言，负数，区别，被除数，符号，除数，规定，余数，今天看书发现python与C的负数取余运算结果不同,python用哪个软件编写运行python
python用哪个软件编写运行python，软件，环境，代码，培训，服务，分析，工具，功能，程序，系列，编写和运行Python代码的软件叫IDE，也就是集成开发环境python函数嵌套时怎么调用
python函数嵌套时怎么调用，培训，函数，周期，变量，嵌套，作用，定义，里面，上层，也就是说，python允许创建嵌套函数。也就是说我们可以在函数里面定python帮助文档怎么使用
python帮助文档怎么使用，培训，文档，函数，模块，以下内容，参数，方法，以上，更多，内容，在python命令行中输入help()，然后再次输入time，可以获得很详