富文本框让最大四百像素_富文本框的使用
富文本框的种类有很多,例如
CKEditor
UEEditor
TinyEditor
KindEditor
文件夹说明
├── asp asp示例
├── asp.net asp.net示例
├── attached 空文件夹,放置关联文件attached
├── examples HTML示例
├── jsp java示例
├── kindeditor-all-min.js 全部JS(压缩)
├── kindeditor-all.js 全部JS(未压缩)
├── kindeditor-min.js 仅KindEditor JS(压缩)
├── kindeditor.js 仅KindEditor JS(未压缩)
├── lang 支持语言
├── license.txt License
├── php PHP示例
├── plugins KindEditor内部使用的插件
└── themes KindEditor主题
基本使用
KindEditor.ready(function(K){
editor = K.create(
'#content',
{
resizeType: 1, // 是否可以拖拽文本框的大小 0:不能 1: 只能上下 2:上下左右均可
allowPreviewEmoticons: false, // 为true时,鼠标放到表情上可以预览
items: [
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste'
], // 配置工具栏的参数, "/"表示换行 "|"表示分割符
width: '100%', // 文本框宽度(可以百分比或像素)
height: '300px', // 文本框高度(只能像素)
minWidth: 200, // 最小宽度(数字)
minHeight: 400 // 最小高度(数字)
}
);
});
// 编辑完成后获取编辑的数据
editor.html()
文件上传
var kind = KindEditor.create('#content', {
width: '100%', // 文本框宽度(可以百分比或像素)
height: '300px', // 文本框高度(只能像素)
minWidth: 200, // 最小宽度(数字)
minHeight: 400, // 最小高度(数字)
uploadJson: '/kind/upload_img/', // 指定文件上传的地址
extraFileUploadParams: {
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
fileManagerJson: '/kind/file_manager/',
allowPreviewEmoticons: true,
allowImageUpload: true // 为true时可以显示图片上传按钮,可以上传本地的图片
});
使用afterBlur
当富文本框里面书写的内容通过表单提交后后台不能通过textarea获取的问题,只需要加上 afterBlur: function(){this.sync();} 即可
KindEditor.ready(function(K){
editor = K.create(
'#content',
{
resizeType: 1, // 是否可以拖拽文本框的大小 0:不能 1: 只能上下 2上下左右均可
allowPreviewEmoticons: false, // 为true时,鼠标放到表情上可以预览表情
items: [
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste'
] // 配置工具栏的参数, "/"表示换行 "|"表示分割符
width: '100%', // 文本框宽度(可以百分比或像素)
height: '300px', // 文本框高度(只能像素)
minWidth: 200, // 最小宽度(数字)
minHeight: 400, // 最小高度(数字)
afterBlur: function(){this.sync();}
}
);
});
添加这个属性后,后台就可以获取到富文本所在的textarea里的内容了
解决按ENTER键触发事件的问题
KindEditor.ready(function(K) {
editor= K.create('#message', {
newlineTag :"br",//optional
afterCreate : function() { //设置编辑器创建后执行的回调函数
var self = this;var $txt = $("iframe").contents().find("body");
$txt.keydown(function(event) {if(event.keyCode==13 && !event.ctrlKey){
self.sync();
alert("回车事件");
}
});
K.ctrl($txt[0], 13, function(e) {
K.insertHtml('textarea[name="message"]','
');
});
}
});
});
富文本框让最大四百像素_富文本框的使用相关推荐
- 富文本框让最大四百像素_富文本编辑器 CKeditor 配置使用
http://www.cnblogs.com/tylerdonet/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过以下邮箱 ...
- 富文本框让最大四百像素_TinyMCE 富文本编辑器 ━━ 基本配置
基本配置 在对 TinyMCE 配置的介绍中,我们将讨论基于传统表单的布局中通常使用的最重要的选项,以及如何将 TinyMCE 用作内联编辑器的示例. 将 TinyMCE 脚本添加到页面后,需要考虑三 ...
- 富文本框让最大四百像素_Django2.0.4 结合 KindEditor 4.1.11 富文本编辑器
{# 加载静态文件 #} {% load static %} 首页 {# 载入js库 #} 富文本 查看 initKindEditor(); function initKindEditor() { v ...
- 富文本框让最大四百像素_8 大功能,适合摄影师、设计师的开源工具集
洋芋田图像工具箱是一款 Windows 下,适合于摄影师.设计师等创意人群的小工具合集,拥有加水印.拼长图.富文本制图.图片剪裁等 8 个常用小工具,开源免费. 8 大功能:图片加水印工具 多图拼接长 ...
- 删除下拉框只找23火星软件_下拉框优化首选23火星软件
会员注册发帖 成功不是为了让周围的人都羡慕你,称赞你,而是让周围的人都需要你,离不开你,因害怕失败而不敢放手一搏,永远不会成功.动手成功,伸手落空.光说不干,事事落空:又说又干,马到成功大胆的尝试只等 ...
- 删除下拉框只找23火星软件_下拉框软件找24火星软件
下拉词是搜索引擎为方便用户搜索而提供的一种关键词联想服务,目前各大搜索引擎都有这类的下拉框(如:百度下拉框,搜狗下拉框,神马下拉框,360下拉框),目的是为了提高用户搜索效率.当搜索某个关键词,直接出 ...
- 删除下拉框只找23火星软件_下拉框搜索就找23火星软件/下拉框软件速来火星下拉...
现在不管做什么,都是需要流量,有了流量才能把自己手上的生意做好.不管是实体店微商,电商,还是互联网创业者,如果你拥有了流量,那么不管你选择去做什么产品,你都会一步到位,一飞冲天,实现自己的梦想.但是现 ...
- 删除下拉框只找23火星软件_下拉框关键词软件只找23火星下拉框词工具佳选火星...
现在不管做什么,都是需要流量,有了流量才能把自己手上的生意做好.不管是实体店微商,电商,还是互联网创业者,如果你拥有了流量,那么不管你选择去做什么产品,你都会一步到位,一飞冲天,实现自己的梦想.但是现 ...
- 下拉框系统甄选火星推荐_下拉框词工具都选16火星软件,下拉框词工具佳选23火星...
现在是十人九商的时代,产品种类和数量日益增多,竞争也在不断加大,微商切忌过长时间消耗在熟人市场,因为你的朋友圈熟人购买是有限的,等她们用完再回购需要时间,做久了你会发现,当你把原有的朋友圈子都卖完了, ...
最新文章
- html判断是否有父节点,Jquery判断$(#id)获取的对象是否存在的方法
- HDU - 3488 Tour(二分图最小权匹配+KM)
- 使用dbutils对表进行增删改查
- 最新BAT大厂面试者整理的Android面试题目模板,成功入职字节跳动
- canvas画条形图 微信小程序_小程序-引入 echart 图表画圆饼图
- 网页设计之 HTML代码的理解.
- 国家地区标准代码(国际域名缩写)
- C语言基础(初识C语言)
- c语言 程序数据要五行输出,C语言编程入门之--第三章编写第一个C语言程序
- excel概率密度函数公式_用excel怎么制作概率密度图_EXCEL 正态分布公式�9�3
- matlab绘图 作业,实验作业2 - -MATLAB作图
- 极链AI云丨图像转换代表作CycleGAN快速复现
- 基于Python的冬奥会领域问答机器人设计
- 阿里云块存储团队卓越工程实践
- SCSS迷你书(上)
- VMware Linux虚拟机CPU占用过高
- 九、Arduino 红外避障模块使用
- 【渝粤题库】广东开放大学 电子商务技术导论 形成性考核 -
- java poi写入excel_Java使用POI读取和写入Excel指南
- taro UI webpack5组件引入不起作用
热门文章
- 95-25-010-命令-topic 创建过程
- 【clickhouse】Clickhouse 版本号历史
- 95-140-134-源码-transform-KeyedStream的intervalJoin
- 【Flink】Flink Elasticsearch client is not connected to any Elasticsearch nodes
- 60-008-024-使用-命令-flink如何动态支持依赖jar包提交
- spring-boot启动失败 Unregistering JMX-exposed beans on shutdown
- Maven无法下载远程依赖-强制下载也不行
- 《KyLin学习理解》-01-KyLin麒麟的简介及其思想
- 眨眼检测计算机不精确,基于OpenCV和Python错误的眨眼检测
- hive2 mysql_架构hive2mysql流程