Jquery插件(CKEditor)
描述 在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)的更多相关文章
- 自己写jquery插件之模版插件高级篇(一)
需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...
- JQuery插件定义
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- BootStrap_04之jQuery插件(导航、轮播)、以及Less
1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...
- 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]
1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件 类似于jQuery中的live()方法 4.jQuer ...
- 2016年6月份那些最实用的 jQuery 插件专辑
jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...
- 教你开发jQuery插件(转)
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...
- Lazy Load, 延迟加载图片的 jQuery 插件.
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
- jquery插件扩展的学习
jquery插件的学习可以点击这里 举个例子 //首先先来一个插件 (function($){ $.fn.extent({ bigfont:function(){ return this.css('f ...
- Jquery 插件\Js 插件收集
1.linq.js 使得js 的数组像c#的linq操作一下样 http://linqjs.codeplex.com/ 2.分页插件 https://github.com/mricle/Mricode ...
随机推荐
- 利用花生壳和IIS发布网页过程
老早利用做过类似的事情,但最近又忘了怎么弄的了,还是自己给自己总结下,省得以后到处找了. [动态域名绑定] 如果具有公网IP地址,申请一个免费的花生壳动态域名,再下一个花生壳客户,使用已经申请好的动态 ...
- Gartner: Hype Cycle for Emerging Technologies-2012 (技术成熟度曲线) [转]
英文稿: The “Hype Cycle for Emerging Technologies” report is the longest-running annual Hype Cycle, p ...
- opennebula 创建模板【配置集群、配置VNC、配置RAW、配置SSH】
{ "vmtemplate": { "NAME": "bbbb", "MEMORY": "512", ...
- Android平台NDK编程
转自:http://blog.csdn.net/wangbin_jxust/article/details/37389383 之前在进行cocos2dx开发时,已经详细介绍了如何将win32的c++代 ...
- Thread message loop for a thread with a hidden window? Make AllocateHwnd safe
Thread message loop for a thread with a hidden window? I have a Delphi 6 application that has a thre ...
- BZOJ 2038 [2009国家集训队]小Z的袜子 莫队
2038: [2009国家集训队]小Z的袜子(hose) 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=2038 Descriptionw ...
- Codeforces Round #288 (Div. 2)D. Tanya and Password 欧拉通路
D. Tanya and Password Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/508 ...
- or1200下raw-os学习(任务篇)
这次就来说说基于上一节介绍的系统框图去建立我们所需要的任务,顺便学习Raw-OS提供的API,根据上节的分析,对于Slave Board有如下设计: Slave Board有三个任务,分别负责测试阻抗 ...
- ACdream 1115 Salmon And Cat (找规律&&打表)
题目链接:传送门 题意: 一个数被觉得是一个完美的数,仅仅要须要满足下面的两个条件之中的一个 1)x = 1 or 3 2)x = 2 + a*b + 2*a + 2*b; a.b都是完美的数. 分析 ...
- Swift编程语言学习4.3—— 控制语句
控制传递语句(Control Transfer Statements) 控制转移语句改变你代码的运行顺序,通过它你能够实现代码的跳转.Swift有四种控制转移语句. continue break fa ...