Bootstrap实现Markdown编辑器

                                                                  进腾讯          

效果图:

争取写出一个直接获取鼠标键盘事件的web界面，而无须通过标签进行操作   

 

 一.工具简介

1.Bootstrap框架

2.ace编辑器

3.javascript中highlightjs

在我的git hub上可下载全部源码（包括工具包）下载后直接可运行

prolov/Markdown- (github.com)

详解:

1.在HTML文件中利用Bootstrap框架建立两个div 一个是编辑框，另一个则是预览框

   <div class="container-fluid">
      <div class="row">
        <!-- markdown编辑器div -->
        <div class="col-md-6" id="md-editor">
        </div>
        <!-- markdown预览框div -->
        <div class="col-md-6" id="md-viewer"></div>
      </div>
    </div>

2.在css设置两个div样式

#md-editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 16px;
}
/* 预览框 */
#md-viewer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  overflow-y: scroll;
}

3.在js文件中初始化编辑器(利用ace) js也是面向对象的编程

function initEditor() {
  // 初始化编辑器
  var editor = ace.edit('md-editor');

  editor.setTheme('ace/theme/monokai'); // 设置主题样式
  editor.getSession().setMode('ace/mode/markdown'); // 设置编辑器模式
  editor.getSession().setTabSize(4); // 设置 Tab 为４个空格
  editor.getSession().setUseWrapMode(true); // 自动换行


  // 加载本地缓存数据
  editor.setValue(localStorage.localData || '');
  

  // 解析从本地加载的缓存数据
  // 并获取其返回的 viewer
  var viewer = parseMarkdown(editor);
  // 控制滚动条
  fixScrollBar(editor, viewer);
  // 即时解析 markdown
  editor.getSession().on('change', function (e) {
    parseMarkdown(editor);//解析数据 因此这步不要动
  });
}

4.解析文字数据

function parseMarkdown(editor) {
  var viewer = $('#md-viewer'); // 文档预览框
  var data = editor.getValue(); // 获取编辑器数据

  // 保存数据到本地
  localStorage.localData = data;
  // 解析 markdown
  data = marked(data);
  viewer.html(data);

  // 高亮 markdown 文档中的代码
  $('pre > code', viewer).each(function () {
    hljs.highlightBlock(this);
  });

  // 返回 viewer
  return viewer;
}

5.设置滚动条

function fixScrollBar(editor, viewer) {
  var session = editor.getSession();

  // 默认滚动到第一行
  session.setScrollTop(0);

  // 编辑器绑定滚动事件
  session.on('changeScrollTop', function () {
    var sTop = session.getScrollTop();
    // 设置预览框的滚动条
    viewer.scrollTop(sTop);
  });
  // 预览框定滚动事件
  viewer.on('scroll', function () {
    var sTop = viewer.scrollTop();
    // 设置编辑器的滚动条
    session.setScrollTop(sTop);
  });
}

 6.OK