CKeditor使用备注

最新推荐文章于 2023-12-22 10:50:25 发布

刘贠

最新推荐文章于 2023-12-22 10:50:25 发布

阅读量739

点赞数

分类专栏： javascript HTML

本文链接：https://blog.csdn.net/laumin/article/details/22373505

版权

javascript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

1. 我使用的是3.x的版本

●首先是javascript调用

<head>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>
<body>
<div>
<textarea class="ckeditor" id="ckeditor" name="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.replace("ckeditor");
</script>
</div>
</body>

直接用 CKEDITOR.replace("ckeditor"); //参数“ckeditor”自己设置可以，随便取个名字就可以，不过最好要唯一的 id 或 name 值。

现在Ckeditor调用出来了，可以用了，但不是所有功能我们都想要的，因此我们还要进行配置，制作我们想要的效果

首先在<head>里调用了 config.js

<script type="text/javascript" src="/ckeditor/config.js"></script>

官方提供了好几种配置方法，我选择的是在config.js文件里配置

打开 config.js 你会看到如下的代码

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
};

我的配置是如下：

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	config.width = 610; //宽度
	config.height = 300; //高度
	 
	// 工具栏
	config.toolbar =
	[
	    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
	    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
	    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
	    ['Link','Unlink','Anchor'],
	    ['Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
	    '/',
	    ['Styles','Format','Font','FontSize'],
	    ['TextColor','BGColor'],
	    ['Maximize', 'ShowBlocks','-','Source','-','Undo','Redo']
	];
	 
	// 字体
	config.fontSize_sizes='8/8px;9/9px;10/10px;11/11px;12/12px;13/13px;14/14px;15/15px;16/16px;17/17px;18/18px;19/19px;20/20px;21/21px;22/22px;23/23px;24/24px;25/25px;26/26px;27/27px;28/28px;36/36px;48/48px;72/72px';
	 
	// 默认字体
	config.fontSize_defaultLabel='13px';
};

说明：在config.toolbar的数组中配置工具栏的工具，根据自己的需要去配置所需工具

以上并不能实现图片上传功能，通过如下配置实现图片上传

以下转自：http://bbs.csdn.net/topics/350239842

二、Ckfinder配置:

         这里首先要说明的是ckfinder是个ckeditor的扩展控件。用于文件上传的。

要配置这个控件首先下载这个控件。下载地址：http://ckfinder.com/ 目前我们用的是php就选择php版本的，不用担心php4和php5的兼容问题。其内部有两个版本的。程序会自动选择。

下载的文件放到网站的目录最好是单独的文件夹这里以其在admin这个目录中为例子。

还是第一得有添加资源文件：<script type="text/javascript" src="ckfinder/ckfinder.js">script>

然后在ckeditor/config.js的下面添加这样的代码：
  config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
     config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?type=Images';

     config.filebrowserFlashBrowseUrl  = 'ckfinder/ckfinder.html?type=Flash';

     config.filebrowserUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';

     config.filebrowserImageUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';

     config.filebrowserFlashUploadUrl  = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';

同时修改config.php:

在函数：CheckAuthentication中添加验证函数，更改最后的return为true；

$config['LicenseName'] = '';

$config['LicenseKey'] = '';

这两个是配置License我们没有就不配置了，没有反正功能没什么影响。

$baseUrl = '/upload/';设置上传文件的目录，ckfinder会根据文件的类型生成不同的文件夹装在不同的文件夹里面。

$config['ResourceType']  可配置每种上传类型的文件等，其实这里你可以自己定义每一种文件上传到到哪里。

   这样就能保证在上传文件、上传图片、上传flash中能上传到服务器了。

  参考：http://docs.cksource.com/CKFinder_2.x/Developers_Guide

刘贠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CKeditor使用备注

1. 我使用的是3.x的版本●首先是javascript调用CKEDITOR.replace("ckeditor");直接用 CKEDITOR.replace("ckeditor"); //参数“ckeditor”自己设置可以，随便取个名字就可以，不过最好要唯一的 id 或 name 值。现在Ckeditor调用出来了，可以用了，但不是所有功能我们都
复制链接

扫一扫

专栏目录