本人这几天在做一个软件,无意中用到xhEditor在线编辑器,这个编辑器虽然看着比较简单,但功能非常强大,大家可以去官网上查看,废话不说了。

这篇文件主要是实现在ASP环境中利用xhEditor编辑器实现图片上传:

1》首先是下载最新版本xhEditor:http://xheditor.com/download

2》将下载的压缩文件解压缩,上传其中的xheditor.min.js以及xheditor_lang、xheditor_emot、xheditor_plugins和xheditor_skin四个文件夹到网站相应文件夹中。
注:如果您网站中没有使用jQuery框架,也请一并上传jquery文件夹中的jquery-1.4.4.min.js

3》需要调用xhEditor编辑器的网页head标签结束之前添加以下代码:

<script type="text/javascript" charset="utf-8" src="../admin/xhEditor/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../admin/xhEditor/xheditor-1.2.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../admin/xhEditor/xheditor_lang/zh-cn.js"></script>

大家注意路径,还有 charset="utf-8",如果你的网站是GB2312,需要加上,因为不加的话就是乱码,这点也很重要。

4》在需要实现可视化的文本框textarea属性中添加:

 class="xheditor"
例如:<textarea name="content" class="xheditor">test</textarea> 以上代码是默认的,不能上传图片的。以下代码是我自己利用官方工具生成的,很简单的一段代码。

<textarea  name="content"   class="xheditor {width:'100%',height:'350px',upImgUrl:'upload.asp',upImgExt:'jpg,jpeg,gif,png'}"  ></textarea>

5》以上只是有了上传按钮了,但还上传不了。还需要新建个文件夹upload(用来保存上传的文件,这是官方默认的文件夹,自己也可以修改,在Upload.asp文件中个性),和xhEditor这个文件夹平级。

然后在官方下载的压缩包里找到upload.asp这个文件,复制到和xhEditor平级的目录中即可。

6》经过以上步骤,终于成功了。呵呵。

ASP利用xhEditor编辑器实现图片上传的功能。的更多相关文章

  1. Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程

    Asp.Net Core Web Api图片上传及MongoDB存储实例教程(一) 图片或者文件上传相信大家在开发中应该都会用到吧,有的时候还要对图片生成缩略图.那么如何在Asp.Net Core W ...

  2. kindeditor编辑器和图片上传独立分开的配置细节

    关于kindeditor编辑器上传按钮的异步加载最关键的部署问题,它的上传图片的组件都已经封装得很好了的,只需要监听到页面按钮的点击事件给编辑器对象传递一些对应的初始化参数即可显示图片上传的弹窗实现异 ...

  3. 我需要在Web上完成一个图片上传的功能

    我需要在Web上完成一个图片上传的功能. 这个页面需要能从手机中选择图片上传. 首先,这个页面是从微信上面触发的,所以修改了微信的的入口地址,增加了身份识别号作为传参. 跳转到页面的时候,页面先检查身 ...

  4. 在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传(开源代码.net core3.0)

    我们的富文本编辑器不能没有图片上传尤其是截图上传,下面我来教大家怎么实现MarkDown富文本编辑器截图上传和图片上传. 1.配置编辑器到html页 <div id="test-edi ...

  5. rails使用bootstrap3-wysiwyg可视化编辑器并实现自定义图片上传插入功能

    之前在rails开发中使用了ckeditor作为可视化编辑器,不过感觉ckeditor过于庞大,有很多不需要的功能,而且图片上传功能不好控制不同用户可以互相删除图片,感觉很不好.于是考虑更改可视化编辑 ...

  6. yii2解决百度编辑器umeditor图片上传问题

    作者:白狼 出处:http://www.manks.top/article/yii2_umeditor_upload本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原 ...

  7. 关于移动手机端富文本编辑器qeditor图片上传改造

    日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...

  8. 改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能

    最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...

  9. Drupal 7 配置ckeditor和ckfinder编辑器实现图片上传--不用wysisyg

    注意: 1.这里的ckeditor编辑器是独立模块,不是那个wysiwyg模块. 2.这里的图片上传仅仅为文章内图片,非字段图片.   1.下载文件(1) http://drupal.org/proj ...

随机推荐

  1. [转]ssh中如何实现定时任务(spring对quartz的支持)

    原文地址:http://blog.csdn.net/qq_18675693/article/details/50413889 实现定时任务:quartz spring中对quartz进行了封装,使得我 ...

  2. [转]Oracle存储过程总结

    原文地址:https://www.cnblogs.com/tingbogiu/p/5641000.html 1.存储过程结构 1.1 第一个存储过程 create or replace procedu ...

  3. Spring框架中InitializingBean执行顺序

    本文转自:https://www.cnblogs.com/yql1986/p/4084888.html package org.test.InitializingBean; 2 3 import or ...

  4. ado ole方式访问access的两种方式

    OleDbConnection Connection = new OleDbConnection(); OleDbDataAdapter adapter = null; //ConnectiongSt ...

  5. 微信小程序学习资料

    官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/ W3CSchool的教程 https://www.w3cschool.cn/weixinapp/ 更多参 ...

  6. android 开发第三库

    http://blog.daimajia.com/android-library-collection/ http://www.apkbus.com/android-180062-1-1.html h ...

  7. Hbase 学习(五) 调优

    1.垃圾回收器调优 当我们往hbase写入数据,它首先写入memstore当中,当menstore的值大于hbase.hregion.memstore.flush.size参数中设置的值后,就会写入硬 ...

  8. 移动端报表JS开发演示样例

    近期对移动端的报表开发颇有研究,细磨精算了好久,尽管到如今还是"囊中羞涩",但决定还是先抛砖引玉,拿点小干货出来和大家分享. 研究的工具是比較有代表性的FineReport. 1. ...

  9. Dapper:安装Dapper时报错

    今天在使用VS 2013安装Dapper的时候报错,具体报错信息如下: 经过网上查找错误原因,发现是安装的Dapper版本过高,.Net Framework版本不支持该版本的Dapper. 解决方案: ...

  10. linq操作符:限定操作符

    限定操作符运算返回一个Boolean值,该值指示序列中是否有一些元素满足条件或者是否所有元素都满足条件. 一.All操作符 All方法用来确定是否序列中的所有元素都满足条件.看下面的例子: using ...