日前本人在搭建私人博客的时候一直觉得csdn自带的markdown编辑器挺好用的，经过多方查找找到一个与这个差不多的，就是今天的主角CKEditor。
什么是CKEditorCKEditor是一款开源的富文本编辑器，通过下载源代码集成到项目中可以很方便的使用，集成成功的效果类似于
CKEditor的引入方式
1、下载CKEditor，下载地址，或者自行前往官网下载
下载完成的包类似于
2、把整个ckeditor文件夹COPY到你的项目中
3、在你的页面上引用CKEDITOR的JS文件：
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
4、在你页面上写一个textarea 控件并替换TEXTAREA标签：
<textarea rows="30" cols="50" name="editor01">请输入.</textarea>
<script type="text/javascript">
CKEDITOR.replace('editor01');
</script>
或者在head区域引入
<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'editor01' );
};
</script>
当然还有一个方法CKEDITOR.appendTo(elementOrId, config) 它可以在特定的dom对象中创建CKEDITOR
<div id="editorSpace"></div>
CKEDITOR.appendTo( 'editorSpace' );
页面所有代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="ckeditor/ckeditor.js" ></script>
</head>
<body>
<textarea rows="30" cols="50" name="editor01">请输入.</textarea>
<script type="text/javascript">
CKEDITOR.replace('editor01');
</script>
</body>
</html>
CKEditor的基本用法
1、在页面中加载CKEDITOR编辑器
CKEDITOR.replace（element,config); 用编辑器取代element
CKEDITOR.appendTo(element,config,html); 在element后面添加编辑器
2、常用的方法
获得编辑器中的内容：getData();
设置编辑器中的内容：setData();
编辑器的宽度:config.width = 640;
编辑器的高度:config.height = 100;
全部菜单:config.toolbar = 'Full';
基础菜单:config.toolbar = 'Basic';
自定义菜单:config.toolbar_Full = []
CKEditor中默认没有Markdown编辑模式，需要安装Markdown的插件。安装步骤如下
1、下载CKEditor（上面有，本处不做阐述）
1、下载Markdown插件
https://github.com/hectorguo/CKEditor-Markdown-Plugin
下载完成后文件夹内容类似于这样
2、复制文件夹中的markdown文件夹到ckeditor/plugins目录下
3、修改config.js文件，在文件中添加
config.extraPlugins = ‘markdown’
其余步骤与上面的从第二条开始一致。
安装好后效果
点击这个按钮就可以使用Markdown模式进行写作了。但是没有WYSIWYG（所见即所得的效果），需要再次点击这个按钮就能看到编写好的效果是什么样的。猜测CSDN应该是进行了自己的优化。
上诉虽然安装了Markdown插件可以使用Markdown模式进行写作了，但是因为没有所见即所得的效果，很难受，这里建议大家安装一个MarkdownPad 2，该软件有所见即所得的效果，可以在该软件中写好了文章然后再复制到网页中来。
