本人这几天在做一个软件,无意中用到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. fzu2158

    http://acm.fzu.edu.cn/problem.php?pid=2158 在密室逃脱游戏中,大家被困在一个密室中,为了逃出密室,需要找到正确的数字密码,于是大家分头行动,分别找到了密码的子 ...

  2. C#正则表达式提取HTML中IMG标签的SRC地址

    一般来说一个 HTML 文档有很多标签,比如“<html>”.“<body>”.“<table>”等,想把文档中的 img 标签提取出来并不是一件容易的事.由于 i ...

  3. 1. 集成学习(Ensemble Learning)原理

    1. 集成学习(Ensemble Learning)原理 2. 集成学习(Ensemble Learning)Bagging 3. 集成学习(Ensemble Learning)随机森林(Random ...

  4. Docker之宿主机ssh至docker容器

    下载docker: https://www.docker.com/products/overview 下载镜像: docker pull centos 查看镜像:docker images 创建镜像对 ...

  5. Android 一条竖线或横线、画边框

    Android 一条竖线或横线.画边框 博客分类: android androidshape  1.画线 [img] http://pic002.cnblogs.com/images/2010/122 ...

  6. android开发(33) 让 actionbar 透明2

    让 actionbar 的背景 透明 我需要一个 透明的actionbar ,找到如下方法实现: 1. 首先,设置ActionBar 浮动到主界面上来. 2. 然后,设置ActionBar的背景色,透 ...

  7. python里面有人写while 循环用 用while 1 和while True的区别

    由于Python2中,True/False不是关键字,因此我们可以对其进行任意的赋值,这就导致程序在每次循环时都需要对True/False的值进行检查:而对于1,则被程序进行了优化,而后不会再进行检查 ...

  8. Entity Framework应用:EntityFramework DataBase First模式

    在这篇文章中讲解如何使用EF的DbFirst模式实现数据的增删改查 一.新建控制台应用程序,然后右键->添加新建项,选择数据里面的实体数据模型: 然后点击添加 二.选择来自数据库的EF设计器,并 ...

  9. 解决:No qualifying bean of type [org.springframework.jdbc.core.JdbcTemplate] found for dependency

    错误: Description: Field jdbcTemplate in com.gwd.dao.impl.IUserDaoImpl required a bean of type 'org.sp ...

  10. "No user exists for uid 501"

    "No user exists for uid 501"   问题表现:git操作远端失败. iterm2的问题,更改了配置可能导致这个问题,最简单的解决办法,退出客户端后重启.重 ...