Makedown在线预览编辑器

来源:https://www.sucaihuo.com/js/218.html 2015-08-20 23:20浏览(2429) 收藏

Markdown 是 一款纯文本格式的编辑器,所以通过同一个名字,它可以使用工具来转换成 HTML。readme 文件,在线论坛编写消息和快速创建富文本文档的文本编辑器都非常流行使用 Markdown 格式。
Makedown在线预览编辑器
分类:其它特效 > 编辑器 难易:中级
查看演示 下载资源 下载积分: 20 积分

markdown有以下功能:

<ul class='ul_demo'> <li>方便的导入导出功能</li> <li>直接把一个markdown的文本文件拖放到当前这个页面就可以了</li> <li>导出为一个html格式的文件,样式一点也不会丢失</li> <li>编辑和预览同步滚动,所见即所得(右上角设置)</li> <li>VIM快捷键支持,方便vim党们快速的操作 (右上角设置)</li> <li>强大的自定义CSS功能,方便定制自己的展示</li> <li>有数量也有质量的主题,编辑器和预览区域</li> <li>完美兼容Github的markdown语法</li> <li>预览区域代码高亮</li> <li>所有选项自动记忆</li> </ul>

HTML

<div id="wmd-editor" class="panel">
    <div id="wmd-button-bar"></div>
    <textarea rows="11" id="wmd-input" class="wmd-textarea"></textarea>
    <div id="wmd-preview" class="wmd-panel"></div>
</div>

引入jQuery和markdown相关插件:

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jQuery/showdown.js"></script>
<script type="text/javascript" src="jQuery/wmd.js"></script>
<script type="text/javascript" src="jQuery/prettify.js"></script>

调用markdown插件:

<script type="text/javascript">
    var title = $('#wmd-preview');
    title.bind('DOMNodeInserted', function(e) {
        $("#wmd-preview pre").addClass("prettyprint");
        prettyPrint();
    });
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2