MVC开发Markdown编辑器(2)

MVC开发Markdown编辑器(2)

MVC Markdown


实时预览

我希望实现一个在线实时预览的Markdown编辑器,左边是编辑处,右边是实时预览界面。

准备工作

引入相关js和css

  • 这里我需要引入bootstrap的css 用来做基本的布局
  • jquery以及之前提到过的mdd的js和css
  1. <link href="~/Scripts/mdd_styles.css" rel="stylesheet" />
  2. <script src="~/Scripts/jquery-1.10.2.min.js"></script>
  3. <script src="~/Scripts/MarkdownDeepLib.min.js"></script>

由于bootstrap默认在Layout中已经引入,这里就不需要引入了

View代码

  1. <div id="markdownDiv" class="row">
  2. <div id="editDiv" class="mdd_modal_frame mdd_editor_wrap col-lg-6">
  3. @Html.TextArea("OrignalText", new { @class = "mdd_modal_content mdd_editor textarea" })
  4. </div>
  5. <div id="renderDiv" class="mdd_modal_frame col-lg-6 ">
  6. <div id="renderContent" class="mdd_modal_content"></div>
  7. </div>
  8. </div>

这里结构很简单最外层一个div 里面2个div一个显示在左,一个显示在右,

因此最外层Div我们设置Class为row让它占满整行,里面两个div都设置为col-lg-6,这样基本的布局就出来了,同时再添加mdd_modal_frame到里面2个子div,这个样式是在mdd_styles.css写好的,它是的div有基本的外框样式

JavaScript代码

  1. function markdown(content) {
  2. //Set required options:
  3. // Set options
  4. md.ExtraMode = true;
  5. md.SafeMode = true;
  6. md.MarkdownInHtml = true;
  7. //Transform your text:
  8. var output = md.Transform(content);
  9. return output;
  10. };
  11. function Transform() {
  12. var content = $("#OrignalText").val();
  13. var html = markdown(content);
  14. $("#renderContent").html(html);
  15. }

通过Transform函数找到需要解析的文本框,将其内容解析并添加到renderContentdiv中

  1. var enterOrignal = false;//鼠标是否在OrigbanText的上
  2. var enterRender = false;//鼠标是否在RenderText的上
  3. $(function() {
  4. $("#OrignalText").click(function() {
  5. this.focus();
  6. });
  7. //本文点击是获取焦点
  8. $("#OrignalText").keyup(Transform);
  9. $("#OrignalText").scroll(function () {
  10. if (enterOrignal){//只有进入OrignalText了才滚动renderContent,
  11. var height = ($("#renderContent").height() * 1.0 / $("#OrignalText").height()) * $("#OrignalText").scrollTop();
  12. $("#renderContent").scrollTop(height);
  13. }
  14. });
  15. $("#renderContent").scroll(function () {
  16. if (enterRender){//只有进入renderContent了才滚动orignal,
  17. var height = ($("#OrignalText").height() * 1.0 / $("#renderContent").height()) * $("#renderContent").scrollTop();
  18. $("#OrignalText").scrollTop(height);
  19. }
  20. });
  21. $("#OrignalText").mouseenter(function () {
  22. enterOrignal = true;//鼠标进入则设置为true
  23. });
  24. $("#OrignalText").mouseleave(function () {
  25. enterOrignal = false;//鼠标离开则设置为false
  26. });
  27. $("#renderContent").mouseenter(function () {
  28. enterRender = true;
  29. });
  30. $("#renderContent").mouseleave(function () {
  31. enterRender = false;
  32. });
  33. });
  34. //滚动条同步滚动
  35. });

在页面加载时绑定事件

MVC开发Markdown编辑器(2)

MVC开发Markdown编辑器(2)

双向滚动就完成了

上一篇:asp.net mvc下的多语言方案 包含Html,Javascript和图片


下一篇:We Chall-Training: Encodings I -Writeup