新版ckeditor在线编辑器配置全攻略

4星 · 超过85%的资源 | 下载需积分: 9 | TXT格式 | 13KB | 更新于2024-09-25 | 64 浏览量 | 举报

"本文将详细介绍如何配置ckeditor在线编辑器，包括在HTML页面中引入ckeditor.js文件，设置编辑器容器，以及在ASP.NET环境下应用ckeditor。此外，还将探讨ckeditor的个性化配置，如语言设置、尺寸调整、皮肤选择和工具栏定制。" ckeditor是一个流行的富文本编辑器，它允许用户在网页上创建和编辑复杂的HTML内容。新版ckeditor提供了更丰富的功能和更易用的界面。要在网页中使用ckeditor，首先需要在<head>部分引入ckeditor.js文件，如下面的代码所示： ```html <head> <script type="text/javascript" src="ckeditor/ckeditor.js"></script> </head> ``` 接着，需要定义一个textarea或者ASP.NET的TextBox控件作为ckeditor的容器。对于textarea，可以直接使用CKEDITOR.replace方法进行替换： ```html <textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea> <script type="text/javascript"> CKEDITOR.replace('TextArea1'); </script> ``` 对于ASP.NET环境中的TextBox，由于服务器端ID与客户端ID不同，需要使用ClientID属性来获取正确的ID，如下所示： ```html <asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox> <script type="text/javascript"> CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$")%>'); </script> ``` ckeditor的个性化配置主要通过修改config.js文件完成。例如，可以设置编辑器的语言（默认为'en'，可以改为'zh-cn'以适应中文环境），宽度和高度，皮肤，以及UI颜色： ```javascript config.language = 'zh-cn'; config.width = 400; config.height = 400; config.skin = 'v2'; // 可选 'kama', 'office2003', 'v2' config.uiColor = '#FFF'; ``` 此外，ckeditor的工具栏可以根据需求进行自定义。例如，可以创建名为'Basic'和'Full'的两个工具栏配置： ```javascript config.toolbar_Basic = [ ['Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'], // ... ]; config.toolbar_Full = [ // ... ]; ``` 通过这些配置，你可以使ckeditor更适合你的项目需求，提供用户友好的编辑体验。记得在实际使用时，根据你的实际路径和需求调整引用的ckeditor.js文件路径和配置选项。

展开

一、使用方法：

1、在页面<head>中引入ckeditor核心文件ckeditor.js

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

2、在使用编辑器的地方插入HTML控件<textarea>

<textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>

如果是ASP.NET环境，也可用服务器端控件<TextBox>

<asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox>

注意在控件中加上 class="ckeditor" 。

3、将相应的控件替换成编辑器代码

<script type="text/javascript">
CKEDITOR.replace('TextArea1');
//如果是在ASP.NET环境下用的服务器端控件<TextBox>
CKEDITOR.replace('tbContent');
//如果<TextBox>控件在母版页中，要这样写
CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$") %>');
</script>

4、配置编辑器

ckeditor的配置都集中在 ckeditor/config.js 文件中，下面是一些常用的配置参数：