CKEditor使用方法以及在CKEditor中使用Markdown编辑器

深碍√TFBOYSˉ_ 2022-03-11 12:00 582阅读 0赞

# 缘起 #

日前本人在搭建私人博客的时候一直觉得csdn自带的markdown编辑器挺好用的，经过多方查找找到一个与这个差不多的，就是今天的主角CKEditor。

# 什么是CKEditor #

CKEditor是一款开源的富文本编辑器，通过下载源代码集成到项目中可以很方便的使用，集成成功的效果类似于  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70]

# CKEditor的使用方式 #

## CKEditor的引入方式 ##

1、下载CKEditor，[下载地址][Link 1]，或者自行前往[官网][Link 2]下载  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70 1]  
下载完成的包类似于  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70 2]  
2、把整个ckeditor文件夹COPY到你的项目中  
![在这里插入图片描述][20190307223818519.png]  
3、在你的页面上引用CKEDITOR的JS文件：

4、在你页面上写一个textarea 控件并替换TEXTAREA标签：

<textarea rows="30" cols="50" name="editor01">请输入.</textarea>
    <script type="text/javascript"> CKEDITOR.replace('editor01'); </script>

或者在head区域引入

当然还有一个方法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 #

CKEditor中默认没有Markdown编辑模式，需要安装Markdown的插件。安装步骤如下

1、下载CKEditor（上面有，本处不做阐述）  
1、下载Markdown插件  
https://github.com/hectorguo/CKEditor-Markdown-Plugin  
下载完成后文件夹内容类似于这样  
![在这里插入图片描述][20190307223414766.png]  
2、复制文件夹中的markdown文件夹到ckeditor/plugins目录下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70 3]  
3、修改config.js文件，在文件中添加  
config.extraPlugins = ‘markdown’  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70 5]  
其余步骤与上面的从第二条开始一致。

安装好后效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70 6]  
点击这个按钮就可以使用Markdown模式进行写作了。但是没有WYSIWYG（所见即所得的效果），需要再次点击这个按钮就能看到编写好的效果是什么样的。猜测CSDN应该是进行了自己的优化。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70 8]

# 关于MarkdownPad 2 #

上诉虽然安装了Markdown插件可以使用Markdown模式进行写作了，但是因为没有所见即所得的效果，很难受，这里建议大家安装一个MarkdownPad 2，该软件有所见即所得的效果，可以在该软件中写好了文章然后再复制到网页中来。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70 9]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70]: /images/20220311/7a0595bb687f459d8e9c949ee40e34cc.png
[Link 1]: http://download.cksource.com/CKEditor/CKEditor/CKEditor%204.4.7/ckeditor_4.4.7_standard.zip
[Link 2]: https://ckeditor.com/ckeditor-5/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70 1]: /images/20220311/5f4f853932fb4fb29899c0588f92030b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70 2]: /images/20220311/ede70f7eb98a486f9f2a37960d9b39b9.png
[20190307223818519.png]: /images/20220311/c69cab55db53436aab6c3534f26555f5.png
[20190307223414766.png]: /images/20220311/8c57ccf1da4142cba751bc8ce56941e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70 3]: /images/20220311/894156be3deb41c99986e20eb8c12462.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70 4]: /images/20220311/deda265f74d74d44baca1d3ff0650d94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70 5]: /images/20220311/fc5715a477bf41d4b5a4a747778b5a02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70 6]: /images/20220311/2a5f6589d15c4f4587b1e20e9791f7a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70 7]: /images/20220311/748c494d02304ffabd587638c64a54a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70 8]: /images/20220311/463109ef9ced4888a4650d716a6b6b4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70 9]: /images/20220311/3ce76e8ee3454be0a3fa6fc1a79d31f2.png