本人这几天在做一个软件,无意中用到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. 大牛总结的Linux提权Exp合集

    https://github.com/SecWiki/linux-kernel-exploits #CVE #Description #Kernels CVE-2017-1000367 [Sudo] ...

  2. git pull出现There is no tracking information for the current branch

    使用git pull 或者 git push 的时候报错 gitThere is no tracking information for the current branch. Please spec ...

  3. Quartz Scheduler Calendar日历的使用

    Quartz Calendar 日历的使用 quartz引擎为我们提供了日历的功能,让我们可以自己定义一个时间段,可以控制触发器在这个时间段内触发或者不触发,比如可以设置节假日,工作时间早8晚5等等. ...

  4. redis详细配置文件

    redis 单机版自己指定配置 #修改为守护模式 daemonize yes #设置进程锁文件 pidfile /usr/local/redis/redis.pid #端口 port 6379 #客户 ...

  5. android开发(37) android使用android_serialport_api 操作串口,解决权限问题

    最近有个项目,要使用android设备操作串口的 斑马GK888T打印机,使用打印机打印二维码. 硬件设备连接方式: 安卓设备 通过 串口RS232 连接 斑马打印机的串口 那么就要解决:使用安卓设备 ...

  6. MVC教程八:缓存过滤器

    缓存过滤器用来输出页面缓存,其用法如下图所示: 注意: Duration:表示缓存多少秒;VaryByParam:表示缓存是否随地址参数而改变.OutputCache除了可以定义在Action方法上面 ...

  7. Map与Url查询参数相互转换

    package com.thunisoft.maybee.engine.utils; import org.apache.commons.lang3.StringUtils; import java. ...

  8. PCL关键点(1)

    关键点也称为兴趣点,它是2D图像或是3D点云或者曲面模型上,可以通过定义检测标准来获取的具有稳定性,区别性的点集,从技术上来说,关键点的数量相比于原始点云或图像的数据量减小很多,与局部特征描述子结合在 ...

  9. m2e-wtp error: <path>/target/m2e-wtp/web-resources/META-INF/MANIFEST.MF (No such file or directory)

    错误信息: D:\workspace\eclipse\xinfubao\xfb-mgr\target\m2e-wtp\web-resources\META-INF\MANIFEST.MF (系统找不到 ...

  10. C51寄存器

    EA   全局中断允许位 ET2 定时器/计时器2中断允许位 ES 串行口中断允许位 ET1 定时器/计时器1中断允许位 EX1 外部中断1中断允许位 ET0 定时器/计时器0中断允许位 EX0 外部 ...