KE的上传按钮一直有一个毛病让我很伤脑经也一直找不到原因,就是按钮配置好了以后点击没有反应也弹不出对话框。
这次看了KE的部分源码和KE按钮的HTML,发现KE的按钮是分成2个的一个是显示外观的,一个是实际有作用的但是却是没有任何外观的。如下图所示:
图片地址:http://a.hiphotos.baidu.com/album/w=575/sign=72e9317f0824ab18e016e13000fbe69a/8326cffc1e178a82998eabf9f703738da977e83d.jpg
KE原有的设置是让这两个按钮重合这样就能顺利上传,但是一些样式会造成这两个按钮分离。分离之后就会造成我上述的错误发生,实际上KE没有任何错误。例如如果在KE按钮的父标签里有浮动效果的话,就可能导致分离的情况。例如此时的li标签的情况:
<li style="float:left;height:350px;width:270px;diaplsy:inline-block;">
<div style="">
<div style="padding: 10px;clear:both;float:left;">
<div style="">
<input type="hidden" id="imgid1" name="imgid1" />
<img id="img1" alt="请上传资源缩略图" src="${pageContext.request.contextPath}/admin/images/nopic.jpg"
style="width: 200px;height: 180px;border:1px solid #ddd;" />
</div>
<div style="display:block;test-align:left;clear: both;">
<input type="button" id="img_btn_1" style="width:110px;height:25px;" value="上传图片"/><br/>
<input type="hidden" id="img_url_1" name="imgurl1"/>
</div>
</div>
基于这样的情况我们可在上传标签的父标签中解除浮动。
相关推荐
KindEditor是一款广泛应用于网页编辑器的开源项目,它旨在提供用户友好的“所见即所得”(WYSIWYG)编辑...这个过程涉及到前端开发的基本知识,包括JavaScript、HTML和CSS,同时也需要对KindEditor的API有一定的了解。
使用KindEditor通常需要将其解压到服务器的适当位置,然后在网页中引入相关的JavaScript和CSS文件,并通过JavaScript代码初始化编辑器实例。在`kindeditor-master`压缩包中,可能包含了源码、示例、文档等相关资源...
通常,这些文件会被放在项目的静态资源目录下,如`/js/kindeditor`和`/css/kindeditor`。在`<head>`标签内添加以下代码: ```html <link rel="stylesheet" href="/css/kindeditor.css" /> ...
在需要使用KindEditor的ASP.NET页面中,引入KindEditor的JavaScript和CSS文件。例如,在页面的`<head>`部分添加: ```html <link href="Scripts/kindeditor.css" rel="stylesheet" type="text/css" /> ...
1. **下载与引入**:从官方网站或GitHub仓库下载KindEditor的压缩包,解压后将JavaScript和CSS文件引入到网页中。 2. **创建编辑器实例**:在HTML中创建一个`<textarea>`或`<div>`作为编辑器的容器,然后通过...
这些文件一般位于`kindeditor_package-develop`目录下,包括`kindeditor.js`主文件和`kindeditor.css`样式文件。 2. 初始化编辑器:在JavaScript中,通过调用`$.initKindEditor`函数来初始化编辑器。这个函数可能...
### kindEditor批量传图配置详解 #### 一、前言 在使用kindEditor进行富文本编辑时,批量上传图片是一项非常实用的功能。然而,在实际应用过程中,很多开发者都会遇到一些配置上的难题,尤其是在多图上传方面。...
- 由于不同浏览器对JavaScript和CSS的支持程度不同,KindEditor需要进行大量的兼容性处理以确保在各种环境下正常工作。 - 这涉及到对浏览器特性的检测和针对特定浏览器的代码优化。 7. **插件机制** - ...
1. 引入ExtJS和KindEditor的库文件:在HTML中,需要链接到ExtJS的JS文件和KindEditor的JS及CSS文件。 2. 创建ExtJS组件:定义一个面板(Panel)或者其他合适的组件,作为KindEditor的容器。 3. 初始化KindEditor:在...
2. `css/kindeditor.css`:编辑器的样式文件,定义了编辑器的外观。 3. `images/`:存放编辑器所需的图片资源。 4. `lang/`:包含不同语言的本地化文件,可以根据需要选择合适的语言包。 接下来,我们开始整合过程...
总之,KindEditor3.5.5在.NET C#环境中的应用需要对服务器配置、上传处理、CSS定制、安全性等多个方面都有所了解。通过理解并解决上述问题,你可以顺利地将这款富文本编辑器集成到你的项目中,提供用户友好的内容...
首先,我们需要在项目中引入KindEditor的JavaScript和CSS资源。这通常包括在HTML页面头部引用KindEditor的JS和CSS文件,确保编辑器样式和功能的正常显示。例如: ```html <link rel="stylesheet" href="kindeditor/...
JME(Java Math Editor)编辑器特别强调了对数学公式的支持,通过内建的LaTeX语法解析和渲染,使得在网页中插入复杂的数学公式变得简单。在题库类应用中,这样的功能非常关键,因为它允许教师或管理员方便地录入包含...
以下是对KindEditor使用方法及实例的详细解析。 1. **安装与引入** 在使用KindEditor之前,你需要先下载其源代码包。下载完成后,将包含的CSS、JS文件引入到你的HTML页面中。通常,需要引入`kindeditor.js`主文件...
解压缩后,你会看到一个包含多个文件和文件夹的目录结构,其中`kindeditor.js`是核心编辑器脚本,`kindeditor.css`为样式文件。在HTML页面中通过`<script>`和`<link>`标签引入这两个文件: ```html ...
IE11和360浏览器对某些CSS属性和JavaScript语法的支持可能存在差异,这可能导致KindEditor的弹出框(如图片上传对话框)无法正常显示。 解决此类问题通常需要以下步骤: 1. **检查浏览器兼容模式**:确保浏览器...
另外,编辑器的样式文件一般为`kindeditor.css`,定义了编辑区域的样式和布局。 在描述中提到的`examples`文件夹,这是一个演示和教程的集合,展示了KindEditor的各种功能和使用方式。`index.html`作为目录页面,列...
<link rel="stylesheet" type="text/css" href="path/to/kindeditor.css" /> <script charset="utf-8" src="path/to/kindeditor.js"> ``` 这里的`path/to/`需要替换为实际的文件路径。 二、配置KindEditor 1. ...
### KindEditor使用详解 #### 一、概述 KindEditor是一款基于JavaScript的富文本编辑器,广泛应用于网页开发中,提供了一系列强大的编辑功能,如插入图片、视频、表格、链接等,使得用户在网页上能够轻松地编辑和...
你可能需要对KindEditor的API有深入理解,比如如何触发事件、如何操作DOM元素等。 6. **前端开发**:除了JavaScript,你还需要理解HTML和CSS,因为表情的展示样式和布局可能需要通过CSS进行调整,而表情的引入和...