`

css对Kindeditor的影响

 
阅读更多


 

       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添加网络视频插件

    KindEditor是一款广泛应用于网页编辑器的开源项目,它旨在提供用户友好的“所见即所得”(WYSIWYG)编辑...这个过程涉及到前端开发的基本知识,包括JavaScript、HTML和CSS,同时也需要对KindEditor的API有一定的了解。

    kindeditor文本编辑插件

    使用KindEditor通常需要将其解压到服务器的适当位置,然后在网页中引入相关的JavaScript和CSS文件,并通过JavaScript代码初始化编辑器实例。在`kindeditor-master`压缩包中,可能包含了源码、示例、文档等相关资源...

    kindeditor的JSP示例

    通常,这些文件会被放在项目的静态资源目录下,如`/js/kindeditor`和`/css/kindeditor`。在`&lt;head&gt;`标签内添加以下代码: ```html &lt;link rel="stylesheet" href="/css/kindeditor.css" /&gt; ...

    .net kindEditor 图片上传实例

    在需要使用KindEditor的ASP.NET页面中,引入KindEditor的JavaScript和CSS文件。例如,在页面的`&lt;head&gt;`部分添加: ```html &lt;link href="Scripts/kindeditor.css" rel="stylesheet" type="text/css" /&gt; ...

    kindeditor

    1. **下载与引入**:从官方网站或GitHub仓库下载KindEditor的压缩包,解压后将JavaScript和CSS文件引入到网页中。 2. **创建编辑器实例**:在HTML中创建一个`&lt;textarea&gt;`或`&lt;div&gt;`作为编辑器的容器,然后通过...

    kindeditor编辑器-封装

    这些文件一般位于`kindeditor_package-develop`目录下,包括`kindeditor.js`主文件和`kindeditor.css`样式文件。 2. 初始化编辑器:在JavaScript中,通过调用`$.initKindEditor`函数来初始化编辑器。这个函数可能...

    kindEditor批量传图配置

    ### kindEditor批量传图配置详解 #### 一、前言 在使用kindEditor进行富文本编辑时,批量上传图片是一项非常实用的功能。然而,在实际应用过程中,很多开发者都会遇到一些配置上的难题,尤其是在多图上传方面。...

    kindeditor 相关JS文件

    - 由于不同浏览器对JavaScript和CSS的支持程度不同,KindEditor需要进行大量的兼容性处理以确保在各种环境下正常工作。 - 这涉及到对浏览器特性的检测和针对特定浏览器的代码优化。 7. **插件机制** - ...

    Extjs kindeditor整合 demo

    1. 引入ExtJS和KindEditor的库文件:在HTML中,需要链接到ExtJS的JS文件和KindEditor的JS及CSS文件。 2. 创建ExtJS组件:定义一个面板(Panel)或者其他合适的组件,作为KindEditor的容器。 3. 初始化KindEditor:在...

    java 富文本kindeditor4.0.3_jsp整合

    2. `css/kindeditor.css`:编辑器的样式文件,定义了编辑器的外观。 3. `images/`:存放编辑器所需的图片资源。 4. `lang/`:包含不同语言的本地化文件,可以根据需要选择合适的语言包。 接下来,我们开始整合过程...

    最新版KindEditor3.5.5使用攻略(.net C#),所有问题解决方法

    总之,KindEditor3.5.5在.NET C#环境中的应用需要对服务器配置、上传处理、CSS定制、安全性等多个方面都有所了解。通过理解并解决上述问题,你可以顺利地将这款富文本编辑器集成到你的项目中,提供用户友好的内容...

    kindeditor示例

    首先,我们需要在项目中引入KindEditor的JavaScript和CSS资源。这通常包括在HTML页面头部引用KindEditor的JS和CSS文件,确保编辑器样式和功能的正常显示。例如: ```html &lt;link rel="stylesheet" href="kindeditor/...

    公式编译器整理jmeditor+kindeditor

    JME(Java Math Editor)编辑器特别强调了对数学公式的支持,通过内建的LaTeX语法解析和渲染,使得在网页中插入复杂的数学公式变得简单。在题库类应用中,这样的功能非常关键,因为它允许教师或管理员方便地录入包含...

    kindeditor使用方法及实例

    以下是对KindEditor使用方法及实例的详细解析。 1. **安装与引入** 在使用KindEditor之前,你需要先下载其源代码包。下载完成后,将包含的CSS、JS文件引入到你的HTML页面中。通常,需要引入`kindeditor.js`主文件...

    kindEditor使用说明2

    解压缩后,你会看到一个包含多个文件和文件夹的目录结构,其中`kindeditor.js`是核心编辑器脚本,`kindeditor.css`为样式文件。在HTML页面中通过`&lt;script&gt;`和`&lt;link&gt;`标签引入这两个文件: ```html ...

    终极解决kindeditor IE11兼容性看不到弹出框 360浏览器兼容性问题

    IE11和360浏览器对某些CSS属性和JavaScript语法的支持可能存在差异,这可能导致KindEditor的弹出框(如图片上传对话框)无法正常显示。 解决此类问题通常需要以下步骤: 1. **检查浏览器兼容模式**:确保浏览器...

    KindEditor

    另外,编辑器的样式文件一般为`kindeditor.css`,定义了编辑区域的样式和布局。 在描述中提到的`examples`文件夹,这是一个演示和教程的集合,展示了KindEditor的各种功能和使用方式。`index.html`作为目录页面,列...

    kindeditor使用说明文档

    &lt;link rel="stylesheet" type="text/css" href="path/to/kindeditor.css" /&gt; &lt;script charset="utf-8" src="path/to/kindeditor.js"&gt; ``` 这里的`path/to/`需要替换为实际的文件路径。 二、配置KindEditor 1. ...

    Kindeditor使用.pdf

    ### KindEditor使用详解 #### 一、概述 KindEditor是一款基于JavaScript的富文本编辑器,广泛应用于网页开发中,提供了一系列强大的编辑功能,如插入图片、视频、表格、链接等,使得用户在网页上能够轻松地编辑和...

    kindeditor表情插件

    你可能需要对KindEditor的API有深入理解,比如如何触发事件、如何操作DOM元素等。 6. **前端开发**:除了JavaScript,你还需要理解HTML和CSS,因为表情的展示样式和布局可能需要通过CSS进行调整,而表情的引入和...

Global site tag (gtag.js) - Google Analytics