在线编辑器Ckeditor (1) - php (30)

在线编辑器

在线编辑器也称之为所见即所得编辑器,是一种常见的html源码编辑器。

所见即所得:用户在输入的时候,不论是格式和是样式都能被系统原封不动的保存,最后在查看的时候,可以按照用户输入的原来的结构进行输出。

在线编辑器分类

市面上比较常见的在线编辑器有很多,FCKeditor(在线编辑器+Ajax浏览器端服务器文件管理器,免费的),Ckeditor(Content and Knowledge,在线编辑器与服务器端文件管理器分离,在线编辑器免费,服务器端文件管理器收费(CKfinder)),百度旗下Ueditor,Kindeditor

在线编辑器作用

在线编辑器就是所见即所得。

作用

  1. 方便操作,提高用户体验
  2. 简化操作
  3. 提高内容的兼容性

Ckeditor&Ckfinder

Ckeditor的历史比较悠久,被国内外web项目广泛的应用。

基本所有的在在线编辑器都差不多,无外乎就是插件的多少(功能),操作手册

为什么要使用Ckeditor?

  1. 被广泛应用
  2. Ckeditor非常成熟(市场或者产品)
  3. Ckeditor兼容性比较好(所有的在线编辑器都是js编写的)

Ckeditor安装

将获取到的Ckeditor解压后放到对应的项目位置就可以使用。

  1. 获取Ckeditor编辑器。http://www.ckeditor.com

basic:基本,功能较少

standard:标准,常用功能都有

full:完整,拥有全部功能

下载下来:

2 解压到指定目录

3 将Ckeditor文件夹放到需要使用的项目位置

Ckeditor目录结构

使用Ckeditor

当前能够编辑html源码的表单元素:textarea

因此,在线编辑器的使用都是要基于textarea元素

1 加载Ckeditor的js文件。/ckeditor/ckeditor.js

2 界面中必须要有一个textarea元素。

3 将textarea替换成对应的Ckeditor编辑器

a) 最简方式:在textarea标签中增加一个class属性,值为Ckeditor

textarea元素必须要有id或者name属性其中一个

b)         标准方式:使用Ckeditor提供的类CKEDITOR,以及其替换方法replace

myck1可以是id的值,也可以是name属性的值

c)         高级方式:使用jQuery进行textarea替换

要先加载jQuery.js

加载CKEDITOR对jQuery提供的接口文件jquery.js。/ckeditor/adapters/jquery.js

使用jQuery语法,替换textarea元素

配置(定制)Ckeditor

Ckeditor提供了三种配置方式

  1. 修改系统提供的配置文件config.js

修改配置文件

效果

特点:项目中所有的Ckeditor都会受config.js的影响。

2 自定义配置文件,形式与系统配置文件config.js一致

新建一个用户配置文件,配置文件的格式与config.js格式完全一致

修改配置选项

在需要使用客户化的配置文件的Ckeditor实例中加载客户化的配置文件。

注意:

使用基础版的方式加载Ckeditor,没有办法进行客户化配置文件使用

只有标准版和jquery版可以使用

特点:只有加载了客户化配置文件的Ckeditor实例会受影响,其他的不受影响。(该方式使用的比较多)

时间: 2025-01-15 02:35:16

在线编辑器Ckeditor (1) - php (30)的相关文章

在线编辑器Ckeditor (2) - php (31)

接上一篇 3 in-page(页内)配置,在使用Ckeditor的界面里进行直接配置 页内配置 效果 特点:配置项完全属于某个特定的Ckeditor实例,不可重用 三种配置方式比较 定制方式 特点 说明 优先级 接口函数 灵活,不能复用 每个使用编辑器的页面都要写一次代码 最高 覆盖自定义及系统配置文件中的参数 自定义配置文件 灵活,可复用 可根据使用场景定义多个自定义配置文件,在不同的页面中引用不同的配置文件 中等 覆盖系统配置文件中的参数 系统配置文件 不灵活 全局性质,影响所有程序 最低

在线编辑器ckeditor配置与使用

1.去官网下载http://ckeditor.com/合适的版本,我用的是最新版,ckeditor_4.5.6_standard 2.将解压的文件夹复制到WebContent文件夹下(本人IDE的是Eclipse) 3.jsp页面引入 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/samples.css"> <script src="${pageCo

在线编辑器CKEditor,多图上传功能实现

界面设计: 批量上传时: 下面是代码: aspx 代码: 1 <tr> 2 <td style="display: none"> 3 <iframe src="/b2c/pages/common/uploadPic.aspx?type=202&editor=<%=txt_Description.ClientID %>&spuId=<%=hid_spuId.Value %>" 4 scrolling

CKedit在线编辑器

在线编辑器???? ????在实现所见即得的编辑效果. FCK????????????是开发者的名字的缩写 CKEditor????????功能很完善的,具有,在线编辑与图片上传JS插件 UEdit????????????百度自己开发的一款在线编辑器 ? CKeditor安装 http://resource.ckeditor.com/ basic package????????基本安装包????????只包含了基本的功能 standard package????标准安装包????????包含更多

jsp解决kindeditor在线编辑器struts图片上传问题

1.下载 官网下载ckeditor,解压后去掉不需要的部分,仅需保留plugin,lang,theme文件夹,这三个文件夹中用不到的东西可以删除, 比如lang文件下存放所有语言文件js,仅仅 保留en.js和zh_CN.js即可,保留jsp文件夹下的json_upload.jsp文件和 kindeditor.js文件即可,把jsp下面的jar导入 在线编辑器:http://kindeditor.net/ 2.修改json_upload.jsp 修改json_upload.jsp文件保存路径即可

PHP.25-TP框架商城应用实例-后台1-添加商品功能、钩子函数、在线编辑器、过滤XSS、上传图片并生成缩略图

添加商品功能 1.创建商品控制器[C] /www.test.com/shop/Admin/Controller/GoodsController.class.php <?php namespace Admin\Controller; use Think\Controller; //后台添加商品功能控制器 class GoodsController extends Controller { //显示和处理表单 public function add() { //判断用户是否提交了表单(如果提交了,就

Angularjs在线编辑器

1.TextAngular: https://github.com/fraywing/textAngular textAngular是一个强大的Text-Editor/Wysiwyg 编辑器,用于Angular.js应用中.安装使用方便,可以创建多个编辑器实例,双向绑定HTML内容,可以查看编辑内容的变化.不足之处是不支持上传文件到服务器,只能进行简单的文字编辑,可用于网站的用户评论模块 2.angular.xheditor: https://github.com/cipchk/angular.

MVC富文本编辑器CKEditor配置CKFinder

富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { margin:

文本编辑器CKEditor的使用

将ckeditor文件夹中的adapter .images.lang.plugins.skins.themes.ckeditor.js.config.js.contents.css解压到js目录 然后在页面中引用ckeditor.js 然后在页面中通过TextBox TextMode= "MultiLine" CssClass="ckeditor" 如果程序误以为XSS漏洞攻击,则设置第一行中的Page  ValidateRequest="false&qu