这次给大家带来纯前端技术做实时预览的markdown编辑器，用纯前端技术做实时预览的markdown编辑器的注意事项有哪些，下面就是实战案例，一起来看一下。
第一步 搭建布局:
1.构思布局（以下是总体布局）
2.项目下新建个index.html页面,写入以下代码:
nbsp;html>markdown编辑器 * { margin: 0; padding: 0; outline: none; border-radius: 0; } html, body { width: 100%; height: 100%; font-family: "Helvetica Neue", 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; }
登录后复制
效果预览
立即学习“前端免费学习笔记（深入）”；
第二步 引入资源实现初步效果:
1.项目下创建js文件夹
2.解从下载好的压缩包解marked/lib下的marked.js到js文件夹
3.解从下载好的压缩包解ace-builds/src到js文件夹重命名为ace
4.引入js文件
(注:markdown.css是markdown样式文件,可以自行编写或从网上下载 比如:github-markdown-css)
nbsp;html>markdown编辑器
登录后复制
5初始化插件
(先添加编辑区和显示区代码)
#mdeditor,#preview,#panel-editor,#panel-preview{ height: 100%; width: 100%; } (先添加初始化代码)
var acen_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.编写公用方法
(其实点击工具主要是在编辑器里自动插入本来手打的符号)
function insertText(val){ acen_edit.insert(val);//光标位置插入 } .....
登录后复制
第四步 ace.js API 实现编辑器设置功能:
设置:
Chrome Clouds Crimson Editor Dawn Dreamweaver Eclipse GitHub IPlastic Solarized Light TextMate Tomorrow XCode Kuroir KatzenMilch SQL Server Ambiance Chaos Clouds Midnight Cobalt Gruvbox idle Fingers krTheme Merbivore Merbivore Soft Mono Industrial Monokai Pastel on dark Solarized Dark Terminal Tomorrow Night Tomorrow Night Blue Tomorrow Night Bright Tomorrow Night 80s Twilight Vibrant Ink 字体大小 10px 11px 12px 13px 14px 16px 18px 20px 24px 代码折行 manual mark begin mark begin and end 自动换行 Off 40 Chars 80 Chars Free 全选样式 光标行高光 显示行号 打印边距
登录后复制...... $("#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);
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
相关阅读：
用nodejs做简介的网站
怎样用JS编写模拟器
如何在移动端做出1px边框的效果
以上就是纯前端技术做实时预览的markdown编辑器的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2784044.html
赞 (0)
关于作者
js如何删除数组里的某个元素
上一篇
2025年3月8日 16:59:14
javascript的模板引擎art-template常用操作介绍
下一篇
2025年3月8日 01:39:38
AD推荐 黄金广告位招租... 更多推荐
-
-
-
-
相关推荐
-
H5如何做图片上传预览组件
这次给大家带来h5如何做图片上传预览组件，h5做出图片上传预览组件的注意事项有哪些，下面就是实战案例，一起来看一下。 本人开发环境是windows10测试浏览器是chrome 和火狐如遇不兼容浏览器的可尝试升级浏览器或Google一下 (～…
-
jq查看预览图实例分享
鼠标移到缩略图上会显示该图的大图，并且大图跟随鼠标移动；或是移动到提示文字上，也可以显示图片。并且含有方向判别功能，具体来说就是如果缩略图在页面的左半部分，则大图显示在鼠标的右侧，如果缩略图在页面的右半部分，则预览的大图在鼠标的左侧显示。 …
-
-
-
-
-
-
上传图片时本地先预览如何实现
这次给大家带来上传图片时本地先预览如何实现，实现上传图片时本地先预览的注意事项有哪些，下面就是实战案例，一起来看一下。 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容,使用 File …
-
js实现txt文件的上传并预览的代码
本文主要和大家分享js实现txt文件的上传并预览的代码，因为是简单的txt文件，只涉及文本，如果需要涉及图片预览就需要使用papaparse和jschardet，此处不多叙述。 表单按钮使用js的onchange=”uploadfile(…
-
JavaScript实现txt文件的上传并预览功能
今天做项目刚好碰到这个记录一下。因为是简单的txt文件，只涉及文本，如果需要涉及图片预览就需要使用papaparse和jschardet，此处不多叙述。 表单按钮使用js的onchange=”uploadfile()” 事件，functi…
-
ajax怎么实现实时验证功能
这次给大家带来ajax怎么实现实时验证功能，ajax实现实时验证功能的注意事项有哪些，下面就是实战案例，一起来看一下。 什么是ajax Ajax 即“Asynchronous Javascript And XML”（异步 JavaScrip…
-
Ajax怎么实现上传前先预览图片的功能
这次给大家带来Ajax怎么实现上传前先预览图片的功能，Ajax实现上传前先预览图片功能的注意事项有哪些，下面就是实战案例，一起来看一下。 手头上有几个小项目用到了easyUI，一开始决定使用easyUI就注定了项目整体上前后端分离，基本上所…
-
React+ajax实现上传图片前先预览图片
这次给大家带来React+ajax实现上传图片前先预览图片，React+ajax实现上传图片前先预览图片的注意事项有哪些，下面就是实战案例，一起来看一下。 之前有在网上找ajax上传图片的资料，大部分的人写得都是用jQuery，但是在这里用…
-
PHP+Ajax如何实现表格的实时编辑
这次给大家带来PHP+Ajax如何实现表格的实时编辑，PHP+Ajax实现表格实时编辑的注意事项有哪些，下面就是实战案例，一起来看一下。 如果我们的对于一个表格中所有的数据都能在本页进行操作那该是多酷炫的一件事（用起来炒鸡爽）！ 用Ajax…
-
ajax怎么实现图片的预览上传以及查看缩略图
这次给大家带来ajax怎么实现图片的预览上传以及查看缩略图，ajax实现图片的预览上传以及查看缩略图的注意事项有哪些，下面就是实战案例，一起来看一下。 要实现功能，上传图片时可以预览，因还有别的文字，所以并不只上传图片，实现与别的文字一起保…
