在线编辑器    

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

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中,进行修改

 

CKedit在线编辑器的更多相关文章

  1. 在ASP.NET Core中使用百度在线编辑器UEditor

    在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...

  2. 在线编辑器的使用-KindEditor

    第一种:KindEditor编辑器 步骤一:加载相应的核心的文件 下载地址:http://kindeditor.net/demo.php <link rel="stylesheet&q ...

  3. js组件在线编辑器插件、图表库插件、文件树插件

    在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...

  4. Method Draw – 很好用的 SVG 在线编辑器

    Method Draw 是一款在线 SVG 编辑器,是 SVG Edit 的一个分支.Method Draw 的目的是改进 SVG Edit 的可用性和用户体验.它移除了 line-caps/corn ...

  5. 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程之更改图片和附件上传路径

    本文是接上一篇博客,如果有疑问请先阅读上一篇:百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程 默认UEditor上传图片的路径是,编辑器包目录里面的net目录下 下面就演示如 ...

  6. 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程

    UEditor是百度开发团队奉献的一款很不错的在线编辑器.在百度自己很多产品上都有应用,本文主要是该编辑器的配置教程. 1.下载UEditor,当前最新版本是1.3.6.这里下载的.net版本,选择U ...

  7. 05传智_jbpm与OA项目_部门模块中增加部门的jsp页面增加一个在线编辑器功能

    这篇文章讲的是在线编辑器功能,之前的部门模块中,增加部门的功能jsp页面起先是这么做的.

  8. 将kindeditor在线编辑器制作成smarty插件

    在web开发中,在线编辑器是经常要用到的功能模块,虽说配置在线编辑器没有多大难度,但是每一次编写重复的代码,总是让人感觉不爽. 本篇,就来讲解一下,如何将kindeditor制作成smarty的一个自 ...

  9. 在线编辑器 (UBB, FCK)

    这里主要说明一下:UBB UBB 使用类型HTML的语法.  UBB相对FCK的HTML方式, 安全性高. 用户不可以直接嵌入HTML代码.   UBB 在线编辑器(JS版): http://www. ...

随机推荐

  1. Swift学习笔记五

    基础运算符 Swift的大部分运算符和C及OC相同,也分一元二元多元的,这里只记录一些Swift特有的性质或写法. 赋值运算符( = ) 在等号右边是一个有多个值的元组时,它的成员值可以分解并同时分别 ...

  2. TinyXML:一个优秀的C++ XML解析器[转]

    TinyXML:一个优秀的C++ XML解析器 读取和设置xml配置文件是最常用的操作,试用了几个C++的XML解析器,个人感觉TinyXML是使用起来最舒服的,因为它的API接口和Java的十分类似 ...

  3. MySQL Cluster基础知识简介以及基本参数介绍

    PS:这些资料都是以前整理的,有些有可能是在网上copy别人的,但是时间长了,记不得出处了,sorry! 在MySQL Cluster环境的配置文件config.ini里面,每一类节点都有两个(或以上 ...

  4. PHP实现Web Service(转)

    1.OAuth OAUTH协议为用户资源的授权提供了一个安全的.开放而又简易的标准.与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密码)  2.SCA 服务组件 ...

  5. 《Maven_孔浩》依赖传递

    间接依赖的包中有同级相同的依赖,那么按照写在前面的依赖:如果不同级有相同的依赖,那么按照级别最高的为准. 依赖的范围scope(test/compile/provided/runtime) test: ...

  6. (转)ReSharper 配置及用法

    1:安装后,Resharper会用他自己的英文智能提示,替换掉 vs2010的智能提示,所以我们要换回到vs2010的智能提示 2:快捷键.是使用vs2010的快捷键还是使用 Resharper的快捷 ...

  7. c语言数组的初始化

    #include "stdio.h" int main() { ][]; a[][]="1,2,3,4,5,6,7,8,9,10,11,12"; ]=a,*p= ...

  8. HBase-java api 基本操作

    使用的是完全分布式,详细信息为: 操作的Java 代码(抄的别人的) package org.admln.hbase; import java.util.ArrayList; import java. ...

  9. 视频-某hadoop高级应用-搜索提示

    看了北风的免费视频,只有一个案例,苦逼买不起几百上千的视频教程 先搭建简单的web项目,基于struts,使用到了bootstrap. 界面: web.xml <filter> <f ...

  10. 实验-hadoop新增节点

    关于hadoop新增节点网上的说法都有些差别,自己来实践一把 1.建立一个namenode一个datanode的集群 master:192.168.126.130 slave1:192.168.126 ...