php预览md文件,用HTML+CSS做一个实时预览的markdown编辑器

最新推荐文章于 2024-07-01 02:17:25 发布

玫瑰好吃

最新推荐文章于 2024-07-01 02:17:25 发布

阅读量450

点赞数

文章标签： php预览md文件

这次给大家带来用HTML+CSS做一个实时预览的markdown编辑器，用HTML+CSS做一个实时预览的markdown编辑器的注意事项有哪些，下面就是实战案例，一起来看一下。

第一步搭建布局:

1.构思布局(以下是总体布局)

2.项目下新建个index.html页面,写入以下代码:

markdown编辑器

* {margin: 0;padding: 0;outline: none;border-radius: 0;

}

html,body {width: 100%;height: 100%;font-family: "Helvetica Neue", 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;

}

第二步引入资源实现初步效果:

1.项目下创建js文件夹

2.解从下载好的压缩包解marked/lib下的marked.js到js文件夹

3.解从下载好的压缩包解ace-builds/src到js文件夹重命名为ace

4.引入js文件

(注:markdown.css是markdown样式文件,可以自行编写或从网上下载比如:github-markdown-css)

markdown编辑器

5初始化插件

(先添加编辑区和显示区代码)#mdeditor#preview,#panel-editor,#panel-preview{

height: 100%;

width: 100%;

}

(先添加初始化代码)

var acen_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.编写公用方法

(其实点击工具主要是在编辑器里自动插入本来手打的符号)function insertText(val){

acen_edit.insert(val);//光标位置插入

}

第四步 ace.js API 实现编辑器设置功能:

加粗

斜体

引用..... 设置:

Chrome

Clouds

Crimson Editor

Dawn

Dreamweaver

Eclipse

GitHub

IPlastic

Solarized Light

TextMate

Tomorrow

XCode

Kuroir

KatzenMilch

SQL Server

Ambiance

Chaos

Clouds Midnight

Cobalt

Gruvbox

idle Fingers

krTheme

Merbivore

Merbivore Soft

Mono Industrial

Monokai

Pastel on dark

Solarized Dark

Terminal

Tomorrow Night

Tomorrow Night Blue

Tomorrow Night Bright

Tomorrow Night 80s

Twilight

Vibrant Ink

字体大小

10px

11px

12px

13px

14px

16px

18px

20px

24px

代码折行

manual

mark begin

mark begin and end

自动换行

Off

40 Chars

80 Chars

Free

全选样式光标行高光显示行号打印边距

......

$("#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);

})

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！