东坡网 - 更多系统软件下载,请关注东坡网:www.dongpow.com

当前位置:首页 > 系统教程 > Linux教程 > 详细页面

如何在Linux下使用网页编辑器CKEditor

时间:2023-03-16来源:东坡网作者:qipeng

  CKEditor通常所指的就是fCKEDITOR,是优秀的网页编辑器,能够支持多种编程语言,使用的人越来越多,那么Linux下要如何使用网页编辑器CKEditor呢?下面小编就给大家介绍下Linux使用CKEditor的方法。

 如何在Linux下使用网页编辑器CKEditor

  一、使用方法:

  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 文件中,下面是一些常用的配置参数:

  // 界面语言,默认为 ‘en’

  config.language = ‘zh-cn’;

  // 设置宽高

  config.width = 400;

  config.height = 400;

  // 编辑器样式,有三种:‘kama’(默认)、‘office2003’、‘v2’

  config.skin = ‘v2’;

  // 背景颜色

  config.uiColor = ‘#FFF’;

  // 工具栏(基础‘Basic’、全能‘Full’、自定义)plugins/toolbar/plugin.js

  config.toolbar = ‘Basic’;

  config.toolbar = ‘Full’;

  这将配合:

  config.toolbar_Full = [

  [‘Source’,‘-’,‘Save’,‘NewPage’,‘Preview’,‘-’,‘Templates’],

  [‘Cut’,‘Copy’,‘Paste’,‘PasteText’,‘PasteFromWord’,‘-’,‘Print’, ‘SpellChecker’, ‘Scayt’],

  [‘Undo’,‘Redo’,‘-’,‘Find’,‘Replace’,‘-’,‘SelectAll’,‘RemoveFormat’],

  [‘Form’, ‘Checkbox’, ‘Radio’, ‘TextField’, ‘Textarea’, ‘Select’, ‘Button’, ‘ImageButton’, ‘HiddenField’],

  ‘/’,

  [‘Bold’,‘Italic’,‘Underline’,‘Strike’,‘-’,‘Subscript’,‘Superscript’],

  [‘NumberedList’,‘BulletedList’,‘-’,‘Outdent’,‘Indent’,‘Blockquote’],

  [‘JustifyLeft’,‘JustifyCenter’,‘JustifyRight’,‘JustifyBlock’],

  [‘Link’,‘Unlink’,‘Anchor’],

  [‘Image’,‘Flash’,‘Table’,‘HorizontalRule’,‘Smiley’,‘SpecialChar’,‘PageBreak’],

  ‘/’,

  [‘Styles’,‘Format’,‘Font’,‘FontSize’],

  [‘TextColor’,‘BGColor’]

  ];

  //工具栏是否可以被收缩

  config.toolbarCanCollapse = true;

  //工具栏的位置

  config.toolbarLocation = ‘top’;//可选:bottom

  //工具栏默认是否展开

  config.toolbarStartupExpanded = true;

  // 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js

  config.resize_enabled = false;

  //改变大小的最大高度

  config.resize_maxHeight = 3000;

  //改变大小的最大宽度

  config.resize_maxWidth = 3000;

  //改变大小的最小高度

  config.resize_minHeight = 250;

  //改变大小的最小宽度

  config.resize_minWidth = 750;

  // 当提交包含有此编辑器的表单时,是否自动更新元素内的数据

  config.autoUpdateElement = true;

  // 设置是使用绝对目录还是相对目录,为空为相对目录

  config.baseHref = ‘’

  // 编辑器的z-index值

  config.baseFloatZIndex = 10000;

  //设置快捷键

分享到:

相关信息

  • 如何安装Ubuntu系统?Ubuntu系统的安装教程

    Ubuntu 是一个启动速度超快、界面友好、安全性好的开源操作系统,它由全球顶尖开源软件专家开发,适用于桌面电脑、笔记本电脑等,并且它可以永久免费使用。很多朋友都不知道要怎么安装Ubuntu系统,那Ubuntu系统要怎么安装?...

    2023-03-16

  • Linux系统怎么分析Nginx日志?linux系统日志管理教程

    Linux系统下Nginx 日志可以查看系统运行记录和出错说明,对Nginx 日志的分析可以了解系统运行的状态。那么Linux系统Nginx日志怎么分析呢?...

    2023-03-16

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载

公众号