本人这几天在做一个软件,无意中用到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. 代码重定位和位置无关码——运行于nor flash

    通过前面的学习,我们知道,把可执行程序从一个位置复制到另一个位置的过程叫做重定位. 现在有两种方式,第一种是只重定位data段到内存(sdram),为什么需要重定位?因为有些flash的写操作,不是简 ...

  2. iOS开发中多线程断点下载大文件

    主要思想,就是创建一个与目标文件等大小的空白文件,然后分段往这个空白文件中写入数据. 可以通过发送HEAD请求,获得服务器中文件的具体大小,然后再将这样的长度分割成若干等大的数据块,在发送get请求时 ...

  3. order by name 注入

    order by name id id是一个注入点 可以利用if语句进行注入 order by name ,if(1=1,1,select 1 from information_schema.tabl ...

  4. python parse xml using DOM

    demo: import xml.dom.minidom dom=xml.dom.minidom.parse('sample.xml')root = dom.documentElementcc=dom ...

  5. Android 面试知识集1

    今晚在复习Android基础的时候,找到了一些很有价值的基础知识,分享给给位Android的开发者.这些是基础知识,同时也可以当做面试准备.面试题其实是很好的基础知识学习,有空会好好整理相关基础知识. ...

  6. [转]快速搞懂Gson的用法

    原文地址:http://coladesign.cn/fast-understand-the-usage-of-gson/ 谷歌gson这个Java类库可以把Java对象转换成JSON,也可以把JSON ...

  7. visualstudio学习

    https://docs.microsoft.com/zh-CN/visualstudio/ide/get-started-with-visual-studio

  8. 【WPF】软件更新程序的设计思路

    目标:客户端程序在启动时,自动联网检查服务端是否有新的版本,有则提示用户更新客户端. 思路: 1.打开Visual Studio,在主体程序的解决方案下再新建一个叫自动更新程序的项目.主体程序的目录是 ...

  9. 字符串过滤掉所有最邻近的“<”和“>”之间的字符

    请编写一个方法,实现如下功能:请输入字符串过滤掉所有最邻近的“<”和“>”之间的字符,将其与字符返回. 例如:输入<html><body>4<5<123 ...

  10. CSS(三):引入样式和优先级

    CSS的引入样式总共有三种:行内样式(内联样式表).内部样式表.外部样式表.下面分别来介绍这三种样式. 一.行内样式 行内样式也叫内联样式,使用style属性引入CSS样式.看下面的示例: <! ...