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

缘起

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

什么是CKEditor

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

CKEditor的使用方式

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

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应该是进行了自己的优化。
在这里插入图片描述
在这里插入图片描述

关于MarkdownPad 2

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

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:撸撸猫 设计师:马嘣嘣 返回首页

打赏作者

诺浅

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值