描述　　在html页面实现像word一样的编辑功能（可视化HTML编辑器）

解决方法

　　ckeditor插件官方网站 http://ckeditor.com/

使用

　　1：去官方下载ckeditor插件，添加到项目

　　　　

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

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

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

　　　　<textarea id="idckeditor" class="ckeditor"></textarea>

　　4:将相应的控件替换成编辑器代码

　　　<script type="text/javascript"> CKEDITOR.replace('idckeditor');</script>

配置属性

　　ckeditor的配置都集中在 ckeditor/config.js 文件中

　　//语言

　　　　config.language = 'zh-cn';

　　// 设置宽高

　　　　config.width = 100;

　　　　config.height = 100;

　　// 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'

　　　　config.skin = 'v2';

　　// 背景颜色

　　　　config.uiColor = '#FFF';

　　// 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js

　　　　config.toolbar = 'Basic';

　　　　config.toolbar = 'Full';

　　//工具栏是否可以被收缩
　　　　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;

精简ckeditor

在部署到Web服务器上时，下列文件夹和文件都可以删除：

　　/_samples ：示例文件夹;

　　/_source ：未压缩源程序;

　　/lang文件夹下除 zh-cn.js、en.js 以外的文件（也可以根据需要保留其他语言文件）;

　　根目录下的 changes.html(更新列表)，install.html(安装指向)，license.html(使用许可);

默认样式设置

　　ckeditor/style.js 文件中设置默认的样式

参考资料

　　http://blog.csdn.net/tfy1332/article/details/22648141

效果图

　　

Jquery插件（CKEditor）的更多相关文章

  1. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  2. JQuery插件定义

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...

  3. BootStrap_04之jQuery插件（导航、轮播）、以及Less

    1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...

  4. 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

    1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuer ...

  5. 2016年6月份那些最实用的 jQuery 插件专辑

    jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...

  6. 教你开发jQuery插件（转）

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

  7. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  8. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  9. jquery插件扩展的学习

    jquery插件的学习可以点击这里 举个例子 //首先先来一个插件 (function($){ $.fn.extent({ bigfont:function(){ return this.css('f ...

  10. Jquery 插件\Js 插件收集

    1.linq.js 使得js 的数组像c#的linq操作一下样 http://linqjs.codeplex.com/ 2.分页插件 https://github.com/mricle/Mricode ...

随机推荐

  1. EXTJS中的grid显示实际行号

    添加一个新的功能 Ext.grid.PageRowNumberer = Ext.extend(Ext.grid.RowNumberer, { width : 40, renderer:function ...

  2. C# 反射 通过类名创建类实例

    “反射”其实就是利用程序集的元数据信息. 反射可以有很多方法,编写程序时请先导入 System.Reflection 命名空间. 1.假设你要反射一个 DLL 中的类,并且没有引用它(即未知的类型): ...

  3. AC、HC、AHC、ACT、LS的区别

    http://forum.eet-cn.com/thread!printPreview.jspa?threadID=1200029698&start=0 以245为例,74AC245.74HC ...

  4. 玩转iOS开发 - 多线程开发

    前言 本文主要介绍iOS多线程开发中使用的主要技术:NSOperation, GCD. NSThread, pthread. 内容依照开发中的优先推荐使用的顺序进行介绍,涉及多线程底层知识比較多的NS ...

  5. 【M24】了解虚方法、多继承、虚基类、RTTI的成本

    1.编译器必须实现出C++语言的特性.一般情况下,我们只需要使用这些特性就好了,不需要关心内部的实现细节.但是,有些特性的实现,会对对象的大小和成员方法的执行速度造成影响.因此,有必要了解内部实现的细 ...

  6. CSS的魔法和魅力

    其实我最开始学会的语言是HTML,我记得那还是大一的事情.当时我对床的兄弟DR放了一本HTML的书在床上,我因为没事就拿来看看.那本书大概只有50页左右,可是可以说如果没有这本书,今天Maybe我不会 ...

  7. zoj-3626 Treasure Hunt I （树形dp）

    本文出自   http://blog.csdn.net/shuangde800 题目链接: zoj-3626 题意 给一棵n个节点的树, 节点编号1~n, 每个节点有权值val[i],经过这个节点就可 ...

  8. GXPT（一）——UI设计

    通过长时间的积淀.TGB再次開始GXPT模式,JAVA版..NET版两条线同一时候进行. 纯面向对象的底层架构的搭建:easyUI+MVC的界面设计:工作流的再次雄起.云平台的构想:Confluenc ...

  9. linux 内核参数VM调优 之 参数调节和场景分析

    1. pdflush刷新脏数据条件 (linux IO 内核参数调优 之 原理和参数介绍)上一章节讲述了IO内核调优介个重要参数参数. 总结可知cached中的脏数据满足如下几个条件中一个或者多个的时 ...

  10. 淘宝 印风 UDF

    http://blog.csdn.net/zhaiwx1987/article/details/6902623