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 ...
随机推荐
- Win8增加了快速启动功能......
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-05-11) Win8增加了快速启动功能,能让计算机尽快的启动进入Windows界面.win8的这种快速启动功能只会在“关机 ...
- 关于.NET邮件的收发问题总结
转载:http://www.cnblogs.com/ustbwuyi/archive/2007/05/28/762581.html //取数据库中邮件信息中的最大发送时间,即最近接收到的一封邮件的时间 ...
- Windows 错误代码
Error Messages for Windows http://www.gregorybraun.com/MSWINERR.ZIP Server 4.0 Error Messages Code ...
- Vehicle Network Protocols -- ISO/KWP CAN CCD PCI SCI / SCP / Class 2
Vehicle Network Protocols There are 5 protocols in the OBD2 system and a car will normally only use ...
- CORTEX -M3 : Registers in depth
http://www.zembedded.com/cortex-m3-registers-in-depth/ Thanks for the overwhelm response you show in ...
- linux集群管理<转>
云在根本上是由硬件和软件组成的,这些组件需要经常细心地维护.出现故障的硬件需要修理或更换:软件需要应用补丁.更新和升级:必须根据需求和潜在的安全威胁提前配置系统.应用程序开发人员可能觉得计算云很方便. ...
- Unity实现相似于安卓原生项目的点击安卓返回button回到前一页的功能
本章博主和大家一起讨论下Unity怎么实现类似安卓原生项目,点击安卓返回button实现返回到前一个页面的功能. 1.定义一个泛型用于响应安卓的返回button public static List& ...
- html的下拉框的几个基本使用方法
尽管使用EXT开发了一段时间,可是自己认为我对javascript还是不是非常熟,所以边看书边做小样例 给自己以后用到的时候查看下,都是非常主要的东西,对刚開始学习的人可能有点帮助 以下是代码 < ...
- Android Volley框架的使用(三)
此博文源码下载地址 https://github.com/Javen205/VolleyDemo.git Image Request 为了更方便的使用Volley中的图片请求,我们同样先在Voll ...
- 怎样基于android4.4.2的源代码和android-4.3.1_r1的驱动编译I9250的ROM
怎样基于android4.4.2的源代码和android-4.3.1_r1的驱动编译I9250的ROM 作者:雨水 2014-05-04 联系方式:dennis.hu.cd at gmail.com ...