web前端实现markdown编辑预览页面(低仿csdn博客界面)

来源:互联网 发布:知途旅行网 编辑:程序博客网 时间:2024/05/17 11:57

所需的第三方js库

1.编辑框库 https://github.com/ajaxorg/ace-builds/
2.markdown预览库https://github.com/chjj/marked

效果

这里写图片描述

页面分三部分,一个顶部的状态栏(包括文章标题、相关插入操作工具栏),一个左部的输入框,一个右部的预览。这种布局用css就能简单的实现。
具体思路就是给左侧输入添加keyup事件,该事件调用右侧显示框获取左侧的输入值并在右侧渲染。
具体细节可以参考我的代码
项目代码地址

0 0
原创粉丝点击