ASP.NET 文本编辑器使用(CKEditor)与上传图片
CKEditor是什么
CKEidtor是一个在线富文本编辑器,可以将让用户所见即所得的获得编辑在线文本,编辑器或自动将用户编辑的文字格式转换成html代码。
方法一、在ASP.NET工程中添加CKEditor插件(不需要做上传图片操作)
1.下载插件:可以到CKEditor官方网站下载 CKEditor for ASP.NET Control.网址:http://ckeditor.com/download 解压后得到如下图
2.压缩包找到其中\bin\Release下的CKEditor.NET.dll和CKEditor.NET.pdb考到你的工程文件夹的Web/bin/文件下
3.在工程中右击Web工程添加引用(AddReference)在Browse中添加刚才靠过来的CKEditor.NET.dll文件
4.将压缩包中的_Sample的ckeditor文件夹拷贝到工程文件下。
5.在aspx网页中注册CKEditor插件:
第一种一种方式是在单个网页的顶部添加下面的语句如果要在单个网页中使用该插件则在该网页到最上面添加
<%@Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor"%>
第二种方式是在整个工程的Web.config文件的
<
system.web
><
pages
><
controls
>
中添加
<add tagPrefix="CKEditor" assembly="CKEditor.NET" namespace="CKEditor.NET"/>
6.然后在网页中需要使用到插件的地方添加
<CKEditor:CKEditorControl ID="id" BasePath="~/ckeditor" runat="server"></CKEditor:CKEditorControl>
7.效果图 下面部分是我用laber接受从CKEditor.Text获得的内容
方法二、在asp.net中添加 ckeditor 插件 与ckfinder结合做到图片上传与编辑
首先我们先看一下效果:
1.下载插件:可以到CKEditor官方网站下载 CKEditor for ASP.NET Control.网址:http://ckeditor.com/download 解压后得到如下图
2.在自己的项目先新建Lbrary文件夹跟js文件夹(js小写)并在js文件夹下在简历ckeditor和ckfinder文件夹,压缩包找到其中/bin/Debug下的CKEditor.NET.dll考到你新建的文件夹下,如后在引用中右键添加对刚才的CKEditor.NET.dll的引用
3.将压缩包中的_Sample的ckeditor文件夹下的9个文件考到js文件夹下的ckeditor里连同(部分文件如下)
5.在aspx网页中注册CKEditor插件:
第一种一种方式是在单个网页的顶部添加下面的语句如果要在单个网页中使用该插件则在该网页到最上面添加
<%@Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor"%>
第二种方式是在整个工程的Web.config文件的
<
system.web
><
pages
><
controls
>
中添加
<add tagPrefix="CKEditor" assembly="CKEditor.NET" namespace="CKEditor.NET"/>
6.然后在网页中需要使用到插件的地方添加
<CKEditor:CKEditorControl ID="id" BasePath="~/ckeditor" runat="server"></CKEditor:CKEditorControl>
7.下面来实现图片的上传,同样在官网上下载CKFinder,解压后把bin/Debug下的CKFinder.dll也考到Lbrary文件夹中并添加对其的引用
8.把ckfinder文件下的4个问价考到ckfinder文件夹里
9.修改ckeditor下的config.js文件,在其添加如下代码
var ckfinderPath = "/js"; config.filebrowserBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html'; config.filebrowserImageBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?type=Images'; config.filebrowserFlashBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?type=Flashs'; config.filebrowserUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Files'; config.filebrowserImageUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Images'; config.filebrowserFlashUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Flash';
10修改ckfinder下的config.ascx 文件,把return false 给为return true
大功告成,赶紧运行一下吧!
ASP.NET 文本编辑器使用(CKEditor)与上传图片的更多相关文章
- 关于NK3C使用富文本编辑器(CKEditor)发送HTML邮件的使用说明
目前NK3C发送HTML邮件使用的的编辑器是CKEditor4.6版本,关于CKEditor的使用说明如下: 1.依赖JQuery1.7版本以上,在xxx.vm中<head>< ...
- asp.net文本编辑器FCKeditor使用方法详解
文本编辑器的使用: 1.FCKeditor的官方网站是:http://www.fckeditor.net/download 目前最新的FCKeditor.Net_2.6.9版本. 请在此页下载:ht ...
- asp.net文本编辑器(FCKeditor)
FCKeditor介绍 FCKeditor是一个功能强大支持所见即所得功能的文本编辑器,可以为用户提供微软office软件一样的在线文档编辑服务.它不需要安装任何形式的客户端,兼容绝大多数主流浏览器, ...
- summernote 文本编辑器使用时,选择上传图片、链接、录像时,弹出的对话框被遮挡住
更多内容推荐微信公众号,欢迎关注: 即问题如下链接内的情况: http://bbs.csdn.net/topics/392004332 这个一般属于CSS中样式出现了问题,可以在点开的时候,F12查看 ...
- Django配置富文本编辑器kindeditor
一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...
- js ui框架 My97日期控件 富文本编辑器
My97日期控件 http://www.my97.net/dp/index.asp 富文本编辑器 http://www.kindsoft.net/demo.php 百度的magic也不错 http:/ ...
- JForum论坛添加UEditor文本编辑器
在使用JForum论坛中发现论坛自带的文本编辑器不好用,不能上传图片,样式编辑也很麻烦,就想着把这个文本编辑器替换掉,我这里选用的是百度的开源富文本编辑器UEditor 替换后的效果图 替换方法如下 ...
- 富文本编辑器 CKeditor 配置使用+上传图片
参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置 ...
- bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片
bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片 bootstrap-wysihtml5实际使用内核为ckeditor 故这里修改ckeditor即可 ...
随机推荐
- asp.net webform 局部发布更新
一:关于webform编译 编译时会将每个aspx文件单独生成dll文件于bin目录下.也会将引用的dll存放于bin目录 二:对界面或者引用的dll(如BLL层,DAL层等)做了修改更新后在服务器只 ...
- oracle导入
1 建立all.sql脚本,此脚本内容指定了insert脚本的路径all.sql脚本内容如下: @D:\workspace\workspace-二期开始使用的文件\Test\数据库升级工具\导入基础数 ...
- django + nginx + raspberypi + pidaro
对于一个从事后台开发的人来说,搞了个网站,我自己都觉得有点意外.不是很懂html,不是很懂css,不是很懂js,不是很懂web开发模式/框架,不是很懂httpd/nginx--,web的东西样 ...
- 在vs中连接sql的几种连接方式
sql身份验证:Data Source=.;Initial Catalog=DBName;UID=sa;Pwd=pwd windows身份验证:Data Source=.;Initial Catal ...
- 直接引用windows命名空间
再逛博客的时候,看见一段这样代码.获取系统密码的 static void DumpCredentials(Windows.Security.Credentials.PasswordCredential ...
- 根据Hash分块存储文件
迷你云默认存储方式是Hash存储模式,文件内容存储在本地硬盘,而非明文存储模式 一.下图大致说明了情况 <ignore_js_op> 二.工作原理 1.假设用户上传了A.doc文件,迷你云 ...
- 生产环境下,不建议用早期版本的Mono........
一个BUG修复需要4年!!!!!!!!!!!!!也是醉了....不造被微软收购后的Xamarin会不会好起来
- 【Linux】鸟哥的Linux私房菜基础学习篇整理(十二)
1. depmod [-Ane]:更新内核模块依赖.参数:无参数:depmod会主动分析目前内核的模块,并重新写入/lib/modules/$(uname -r)/modules.dep中:-A:de ...
- (2015年郑州轻工业学院ACM校赛题)H 五子棋
我们最后选题策略失败,选到五子棋这题,没想到这题非常麻烦,最后也没做出来! 比赛结束后发了题解再做才做出来! 不得不说 这题真的很麻烦 一个需要比较细致分类讨论的题目.判定棋盘是否合法应考虑如下几种情 ...
- Google Java 风格 阅读随笔
官方文档:Google Java Style 中文翻译版:Google Java编程风格指南, Hawstein's Blog 可以先看官方文档,遇到不确定有疑问的,可以再对照翻译版本阅读,加深理解. ...