CKedit在线编辑器

在线编辑器????

????在实现所见即得的编辑效果。

FCK????????????是开发者的名字的缩写

CKEditor????????功能很完善的,具有,在线编辑与图片上传JS插件

UEdit????????????百度自己开发的一款在线编辑器

?

CKeditor安装

http://resource.ckeditor.com/

basic package????????基本安装包????????只包含了基本的功能

standard package????标准安装包????????包含更多的功能

full package????????完全安装包????????包含所有的功能

CKEditor在线编辑

安装

将安装包解压到项目目录:

使用:

方法1:

简易方式

第1步:引入ckeditor.js主程序文件

第2 步:将ckeditor.js应用到指定的textarea标签

说明:

????class的值必须是ckeditor,必须有id或name属性,id或name属性的值可以任意

方法2:

基本方式

方法3:

框架方式(jqurey),CKEditory,

Jquery就是使用JS封装好的一个框架,实现对标签对象的获取、绑定事件、简单的特效、css样式的操作

配置:

1、全局配置

在ckeidtor/config.js

配置语法:

????config.配置项=值;

示例:

????config.width=500;

????config.height=300;

2、自定义配置

需要自己创建一个配置文件(以config.js为模型)

在需要使用此配置信息的textarea标签上引用此配置文件

此种方式只能被基本方式与框架方式使用

3、代码方式

?

<texteara>标签很特别:只有textarea能存其他的标签

?

在线编辑器的入库

ck.html

后台文件receiver.php

内容:

出库

ckfinder的安装

图片上传工具,应用于文件管理器。

????ckeditor将在线编辑 与图片上传的功能分享,形成了用于在线编辑(ckeditor)与图片上传(ckfinder)

下载并解压到项目目录(single)

加载ckfinder

在ckeditor的config.js配置文件中加载ckfinder

效果:

用户虽然可以选择上传,但是限制不足

ckfinder目录结构

在ckfinder的配置文件config.php中开始文件上传功能

示例:

默认的ckfinder把上传的文件保存在ckfiner/userfiles/images中。

更改保存目录

在ckfinder/config.php文件中

上传测试

分目录存储

在ckfinder/config.php文件中配置

动态生成文件名

在fileupload.php文件中首先动态产生文件名的函数

使用动态产生的文件名,替换ckfinder中的默认保存的文件名

测试效果

ckfinder权限修改

默认ckfinder对文件管理是全部开放

在ckfinder/config.php中,进行修改

?

时间: 2024-10-11 04:59:12

CKedit在线编辑器的相关文章

Angularjs在线编辑器

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

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文件保存路径即可

用Javascript 编写 HTML在线编辑器

在线编辑器主要有3大类:1.直接用textarea 标签 优点:速度快,提交方便,可以用UBB标签来弥补不能所见所得 缺点:不直观,功能非常少 2.用 DIV或者TABLE的CONTENTEDITABLE 标签,属性来让一个区域可以编辑 优点:可以很直观,可以做各种效果 缺点:此标签在mozilla下不可用,只适合IE浏览器,且对js要求高 3.用iframe或者frame的中的document的document.designMode ="On" 来实现可编辑 优点:具有上面第二条的全

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() { //判断用户是否提交了表单(如果提交了,就

thinkphp使用在线编辑器存入html标签被转义解决

thinkphp中的create 方法收集的post表单数据中的html标签如:<p>之类存入数据库时会被转义成< p > ,导致前台显示都是代码,这个问题困扰了我几天,从fckeditor换到Ueditor还是同样的结果,最后终于搞定了 解决办法:单独收集在线编辑器的数据:$xxx -> yy = $_POST['字段名']  希望能帮助遇到同样问题的朋友!

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

在线编辑器 在线编辑器也称之为所见即所得编辑器,是一种常见的html源码编辑器. 所见即所得:用户在输入的时候,不论是格式和是样式都能被系统原封不动的保存,最后在查看的时候,可以按照用户输入的原来的结构进行输出. 在线编辑器分类 市面上比较常见的在线编辑器有很多,FCKeditor(在线编辑器+Ajax浏览器端服务器文件管理器,免费的),Ckeditor(Content and Knowledge,在线编辑器与服务器端文件管理器分离,在线编辑器免费,服务器端文件管理器收费(CKfinder)),

Html、CSS、JavaScript 实时效果在线编辑器 - 学习的好工具,算不算?!

关于 二维码 与 NFC 之间的出身贫贱说 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. http://jsfiddle.net/vnkuZ/ 总共四个工作区:左上是 Html 界面组件:左下

超简单的标记语言Markdown-写博客-语法-在线编辑器

几个不错的网站:免费图床  在线编辑器 语法:

Ueditor 在线编辑器使用

ueditor在线编辑器插件 地址:http://ueditor.baidu.com/website/ 试用体验: 帮助文档:http://fex.baidu.com/ueditor/ ? 实操 引入文件 需要为textarea定义个一个ID 属性 有兴趣的了解 sea.js 解决js顺序加载的问题 使用UE.getEditor("ID")调用 效果: 可以简单的配置一下 具体的配置文件信息 在线编辑器使用后的问题: 当时在线编辑器之后,HTML标签无法正常的显示,其主要的原因是由于I