跳过正文
  1. 博客/
  2. 后端/
  3. 软件/

富文本编辑器CKEditor配置CKFinder

·3 分钟· ·
后端 软件
目录

由于网站要实现图片和文字的混排的上传
所以在网上找了富文本编辑器的插件,发现CKEditor这款还不错的插件

我用的是4.5.1这个版本,的确很好用,只是引用了一个js文件就可以实现。
#


  1. 将网上下的CKEditor包解压放在根目录下

  2. 在页面上引用CKEditor的核心包ckeditor.js

    <script src="ckeditor/ckeditor.js" type="text/javascript"></script>;
      
    
  3. 在页面添加一个输入框textarea

     <textarea name="individual" id="individual" runat="server"></textarea>
      
     <script type="text/javascript">
      
      CKEDITOR.replace('individual');
      
      </script>
      
    

只要通过上面上面几个步骤就能实现富文本编辑器,但是点开图片上传功能,发现只有上传url的功能,并不能本地上传图片,百度了一下发现由于安全性问题CKEditor没有上传功能,只有安上CKFinder才能实现上传功能,于是我在官网下了ckfinder__aspnet_2.5.0.1,同CKEditor一样引用JS文件(只要引用ckfinder.js)
#

     <script src="ckfinder/ckfinder.js" type="text/javascript"></script>
  
  • 由于我是MVC的网站基于.net4.5,在官方给的包里面有一个asp.net网站实例放在**_source文件夹里面,里面有一个基于.net2的示例网站,一运行就报找不到 System.Web.UI.Design这个命名空间的错,所以我把它从项目中排除,把项目中bin中debug文件夹下的CKFinder.dll**复制出来,引用到我自己的项目中。

接下来要配置CKEditor来让CKFinder引用进来,在CKEditor文件夹下config.js在CKEDITOR.editorConfig = function (config) {};方法中添加如下代码:
#

 config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
  
 config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
  
  config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
  
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
  
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
  
config.filebrowserWindowWidth = '800';  //“浏览服务器”弹出框的size设置
  
config.filebrowserWindowHeight = '500';
  

注意在配置Url的时候要修改成相对于网站本地网站磁盘文件路径,比如说,你的网址是http://example.com.cn ,你把ckfinder文件夹放在Admin下的Editor文件夹,那么所有url要改成下面类似的格式
#

config.filebrowserImageBrowseUrl ='/Admin/Editor/ckfinder/ckfinder.html?Type=Images';
  

否则会报404错误,
#

最后一步是修改一个函数让所有人能看到服务器上传文件夹里面的文件,在ckfinder文件夹下面的cofig.ascx文件,找到 CheckAuthentication函数将返回值改成true
#

当然如果你想修改上传文件的地址,你可以在上面方法里面找到SetConfig()方法,找到BaseUrl,修改为你想上传的地址,



PS:
#

我是在在VS里面进行调试的,由于VS的IIS在调试的时候不允许对磁盘文件的路由地址访问,就是CKFinder通过ckfinder.html这个html来实现上传图片的功能,但是这个在调试的时候VS无法访问这个文件,所以一直报404错误,可以修改IIS来允许IIS访问磁盘文件,步骤如下:
#

  1. 右键点击IIS Express,选择显示所有应用程序

  2. 找到运行网站的配置,进入applicationhost.config文件夹

  3. ctrl+f 寻找UrlRoutingModule

  4. 将preCodition设置为空字符

     <add name="UrlRoutingModule-4.0" type="System.Web.Routing.UrlRoutingModule" preCondition="" />
      
    

如果你是用MVC进行表单传值的话,你必须在post方法上面添加 [ValidateInput(false)] 属性,如果不这样的话就会报下面的错
#

	“/”应用程序中的服务器错误。
  
    从客户端(content="<p>sdfsdafwewo shdfh...")中检测到有潜在危险的 Request.Form 值。
  

相关文章

GitHub Education Pack
·3 分钟
后端 软件
GitHub推出一个对学生和教师的福利包,对于学生来说这是一个不小 的福利,只要通过一个edu邮箱就可以领取,但奈何国内有些无良人买卖 邮箱,所以GitHub对于.cn的邮箱一律拒绝,但是可以通过上传学生证的方法 得到验证,题主刚开始用学校邮箱试了试,失败了,抱着试一试的心态,上传了 学生证,没想到第二天就给我回复,并给我这个豪华大礼包,接下来我就介绍介绍 如何用这个包来.
在Linux下玩转Vim
·3 分钟
后端 软件
学了鸟哥的书前面基础后,突然想在Linux下用gcc玩C语言,然后了解到了Vim这个神一样的编译器,接下来经过超长时间虐心的安装无数插件无数依赖包,突然有种打自己一顿的感觉,还好终于把Vim装的和VS差不多了,接下来我介绍我安装Vim的经验吧。 # 我虚拟机下的Linux原来是红旗6的,但是我改了一下yum的包源成CentOS的并且全部update一下后就神奇的变成了CentOS6,虽然他们两个是同一家公司,但是总给我一种由盗版成了正版的感觉。。 # 闲话不多说,刚开始装第一个插件是Ctags # 刚开始装的时候我是在X-Windows里面的这里下载再转回shell敲
有用的几个Shell命令
·1 分钟
后端 软件
管线命令 (pipe): # 撷取命令: cut, grep 排序命令: sort, wc, uniq 双向重导向: tee 字符转换命令: tr, col, join, paste, expand 分割命令: split 参数代换: xargs 分割文档 # 长长的一大片文档有时我们并不愿意看到全部内容,我们只想关注 部分内容的时候了可以考虑使用分割文档命令
阿里云服务器初体验
·1 分钟
后端 软件
申请了一个阿里的15体验的云服务器,同自己玩的虚拟机还是有点不同的。 # 1.用户名和密码 # 找了半天没有找到那个是用户名,试了实例的id,没有用,最后终于在登录帮助名里面找到了,用户名竟然是root!!!!,我用的是Ubuntu系统,说好的Ubuntu不提供root权限的呢,阿里还真会改造Linux系统 ,但是我觉得用root登录还是不安全,我觉得新建一个用户吧
Numpy的简析
·3 分钟
后端 框架 Python
numpy简单来说就是python的C版数组实现,因为python原生列表虽然好使,但是生成大量数据时开销很大,而numpy是基于C的,生成大量数组非常简单,而且操作他们速度非常快.
PIL (Pillow)
·3 分钟
后端 框架 Python
Pillow 是 PIL的对Python3支持的另外一个分支,当然他对Python2也兼容,由于PIL安装起来比较烦,而使用pip可以很轻松的安装Pillow,所以我选择Pillow使用,但是其核心还是PIL库的。