澳门新葡萄京娱乐场Drupal7 安装 CKEditor 和 IMCE 模块 及配置

话说程序员的博客总是用到SyntaxHighlighter之类的来在pre标签里贴一堆代码。于是因为装了CKEditor
for
WordPress就一直觉得很讨厌,在HTML标签里写下一些代码,到了Visual里就被转义了。比如和就变成了虾米虾米的。话说今天心血来潮去Google了一下,CKEditor的设置文档里还真的有相关的设置,请围观这里!

CKEditor 3.6.2+CKFinder2.2.2配置,实现文件上传

Drupal7 安装
CKEditor 编辑器的方法及配置:

配置ckeditor插件目录下的ckeditor.config.js文件,加入下面这行。

1、准备CKEditor、CKFinder,这里分别用3.6.2、2.2.2版本

  1. 首先要下载模块和编辑器
    CKEditor Moudle:
    IMCE Module:
    CKEditor 编辑器:
  2. 安装 CKEditor Moudle澳门新葡萄京娱乐场, 和 IMCE Moudle
    将解压的 CKEditor Moudle 和 IMCE Moudle 模块分别放到
    sites/all/moudles/ckeditor/
    sites/all/moudles/imce/
    然后将 CKEditor 编辑器压缩包里面的放到
    /sites/all/moudles/ckeditor/ckeditor/中, 如下图
    澳门新葡萄京娱乐场 1
    放好后的路径如:
    /sites/all/moudles/ckeditor/ckeditor/ckeditor.config.js
    /sites/all/moudles/ckeditor/ckeditor/ckeditor_php5.php
    /sites/all/moudles/ckeditor/ckeditor/ckeditor_php4.php
    /sites/all/moudles/ckeditor/ckeditor/ckeditor/plugins/*
    /sites/all/moudles/ckeditor/ckeditor/ckeditor/_samples/*
    /sites/all/moudles/ckeditor/ckeditor/ckeditor/_source/*
    /sites/all/modules/imce/css/*
  3. 在 Modules 中启用 CKEditor 和 ICME 这两个模块.
  4. Home » Administration »
    Configuration » Content authoring
    中配置CKEditor ( 路径为
    /admin/config/content/ckeditor)
    选择 Full HTMLedit Operations 进入 CKEditor 配置. (
    路径为 /admin/config/content/ckeditor/edit/Full )
    然后点击 EDITOR APPEARANCE
    选项进去, 在显示的表单中有个Toolbar,
    这个是配置CKEditor显示哪些操作标签的.
    在默认的这行 [‘Image’,’Media’,’Flash’,’Table’,’HorizontalRule’,’Smiley’,’SpecialChar’],
    中添加一个 ‘IMCE‘
    这样才能在编辑器里显示 IMCE上传图片的图标.
    添加后为: [‘Image’,’IMCE’,’Media’,’Flash’,’Table’,’HorizontalRule’,’Smiley’,’SpecialChar’],
    接着在 Plugins 中选中 IMCE Window button in toolbar
    澳门新葡萄京娱乐场 2

    最后在 File browser settings
    中的
    File browser type (Link dialog)
    File browser type (Image
    dialog)
    File browser type (Flash
    dialog)
    三个选项都选择IMCE, 如下图
    澳门新葡萄京娱乐场 3

  5. OK, 配置完毕, 在 add Content 时选择 FULL HTML就行了.
    另外也可以配置 Filtered HTML, 在 Toolbar配置里面设置一下,
    比如我的设置如下

    1
    2
    3
    4
    5
    6
    7
    [
    ['Source'],
    ['Cut','Copy','Paste','PasteText','Undo','Redo'],
    ['Bold','Italic','Underline','Strike','-'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ]

    显示在 Filtered HTML 的效果为:
    澳门新葡萄京娱乐场 4

复制代码 代码如下:config.entities =
false;

2、CKEditor解压,复制_Samples下的ckeditor文件夹到项目根目录,复制bindebugCKEditor.NET.dll到项目根目录下的Bin文件夹(没有可以自己创建);CKFinder解压,复制文件夹ckfinder到项目根目录,复制ckfinderbinDebugCKFinder.dll到项目根目录。之后,在项目根目录上右击选择“添加引用”——“浏览”,依次添加项目根目录Bin下之前放入的两个DLL。

不过这样比较暴力,所有的内容都不转义了,有没人有担心。于是在这里查到还有另外一种办法,用正则筛选要保护的代码。这样对数据来说是很不错,不过有个缺点,在ckeditor所见即所得模式里看不见被保护的内容,这个就看你自己的取舍了。

3、配置CKEditorconfig.js文件

复制代码
代码如下:config.protectedSource.push(/pre[/s/S]*?pre/g);

打开CKEditorconfig.js,添加下面代码。

貌似我还是倾向于用前者~
在所见即所得标签里黏贴的内容还是都会转义的,只是HTML过来的内容都不转义了,貌似不错。独立博客真是要折腾啊
= = 怪辛苦的……

CKEDITOR.editorConfig = function( config )

{

……….

config.filebrowserBrowseUrl = ‘../ckfinder/ckfinder.html’;
//上传文件时浏览服务文件夹

    config.filebrowserImageBrowseUrl =
‘../ckfinder/ckfinder.html?Type=Images’; //上传图片时浏览服务文件夹///
<reference path=”../ckfinder/ckfinder.html” />

    config.filebrowserFlashBrowseUrl =
‘../ckfinder/ckfinder.html?Type=Flash’;  //上传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’;
//上传Flash按钮(标签)

………

}

4、配置ckfinderconfig.ascx文件

        public override bool CheckAuthentication()

         {

//return false;// 此处用于配置权限

return true;//测试可以使用,正式使用一定要加入验证代码

}

    public override void SetConfig()

       {

BaseUrl = “~/filefolder/”;//上传文件的存储目录

}

 

5、引用

前台:

首先在<head></head>中添加如下两个文件的引用:

<script src=”ckeditor/ckeditor.js”
type=”text/javascript”></script>

    <script src=”ckfinder/ckfinder.js”
type=”text/javascript”></script>

然后,拖控件CKEditorControl到前台页面,,并增加设置basePath=”ckeditor/”,示例如下:

 <CKEditor:CKEditorControl ID=”CKEditorControl1″ runat=”server” 
basePath=”ckeditor/”
></CKEditor:CKEditorControl>

注:网上多是设置textarea,然后再用Js代码replace为CKEditor的,不知原因,望多多指教。

后台设置:

    加入如下代码:

       protected void Page_Load(object sender, EventArgs e)

    {

…….

       CKFinder.FileBrowser fb
= new CKFinder.FileBrowser();

       fb.BasePath =
“ckfinder/”;

      
fb.SetupCKEditor(CKEditorControl1);

……….

    }

 说明:上面的 basePath=”ckeditor/”   fb.BasePath = “ckfinder/”;
两个路径要注意,不要错

 另外,若两个文件夹均为二级目录,如:根目录/admin下面,则路径应写为BasePath=”admin/ckeditor3.6.2/”

fb.BasePath = “admin/ckfinder/”;

6、其他

增加上传文件大小

通过更改Web.Config文件来改变单个上传文件的大小。

   代码如下:

<system.web>

……

      <httpRuntime maxRequestLength=”49600″ appRequestQueueLimit=”60″
executionTimeout=”60″ />

………

</system.web>

 

     其中maxRequestLength就是单个上传的文件大小了,这里是40M

本方法解决了出现错误“此程序无法显示网页”的问题

我做项目之前用过一次CKEditor+CKFinder,没有问题。但是这次用,点击上传后老是出现错“此程序无法显示网页”,路径配置都没问题,折腾了两天在网上也找不到详细的解决办法及原因说明,最后通过研究示例文件ckfinder2.2.2/_samples/aspx/ckeditor.aspx找到上面这种引用配置方法,其中黄色的部分是涉及的核心部分。

   Asp.net刚入门,也是第一次发博客,望多多指教。

发表评论

电子邮件地址不会被公开。 必填项已用*标注