怎么用HTML+CSS做实时预览的markdown编辑器

发布时间:2022-03-11 15:47:46 作者:iii
来源:亿速云 阅读:463

这篇文章主要讲解了“怎么用HTML+CSS做实时预览的markdown编辑器”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用HTML+CSS做实时预览的markdown编辑器”吧!

  <!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);

  })

感谢各位的阅读,以上就是“怎么用HTML+CSS做实时预览的markdown编辑器”的内容了,经过本文的学习后,相信大家对怎么用HTML+CSS做实时预览的markdown编辑器这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

推荐阅读:
  1. 如何使用HTML+CSS做一个实时预览的markdown编辑器
  2. 如何用Sublime编辑markdown实现实时预览

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html css markdown

上一篇:HTML与CSS中2D转换模块怎么用

下一篇:CSS长英文单词的页面显示问题如何解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》