zoukankan      html  css  js  c++  java

  • FCKeditor相关资料简介：

    FCKeditor相关资料简介：

    官方网站http://www.fckeditor.net/

    官方文档http://wiki.fckeditor.net/

    下载地址http://www.fckeditor.net/download/default.html

    官方演示http://www.fckeditor.net/demo/default.html

    FCKEditor asp.net设置

    下载：http://www.fckeditor.net

    （要下载FCKeditor2.6.zip和FCKeditor.NET2.5版的2个zip包）

    FCKeditor2.6zip是其最新的Javascript文件和图片等；

    FCKeditor.NET.zip是一个ASP.NET控件DLL文件。

    下面结合一个ASP.NET2.0的项目来具体看看FCKeditor的安装、配置、使用。在开始之前请先下载FCKeditor文件包和FCKeditor.Net 服务器控件。启用VWD2005新建一个C#的WEB Site工程，取名FCKPro。

    FCKeditor安装：

    所谓安装就是一个简单的拷贝过程。把下载的FCKeditor2.4.2.zip文件包直接解压缩到FCKPro的根目录下，这样根目录下就得到一个FCKeditor文件夹，里面富含所有FCKeditor的核心文件。

    然后把下载的FCKeditor.Net.zip随便解压缩到你硬盘的一个空目录，里面是FCKeditor.Net的源代码，你可以对它进行再度开发，本文尚不涉及本内容，我们只是直接使用其目录下的"bin"Debug目录中的FredCK.FCKeditorV2.dll文件。

    在VS2005中添加对FredCK.FCKeditorV2.dll的引用：

    1.在FCKPro工程浏览器上右键，选择添加引用（Add Reference…），找到浏览(Browse)标签，然后定位到你解压好的FredCK.FCKeditorV2.dll，确认就可以了。这时，FCKPro工程目录下就多了一个bin文件夹，里面包含FredCK.FCKeditorV2.dll文件。当然，你也可以完全人工方式的来做，把FredCK.FCKeditorV2.dll直接拷贝到FCKPro"bin"下面，VS2005在编译时会自动把它编译进去的。

    2.为了方便RAD开发，我们把FCKeditor控件也添加到VS的工具箱（Toolbox）上来，展开工具箱的常用标签组（General），右键选择组件（Choose Items…），在对话框上直接找到浏览按钮，定位FredCK.FCKeditorV2.dll，然后确认就可以了。这时工具箱呈现出控件的样子，这样会省去很多在开发时使用FCKeditor控件时要添加的声明代码。

    至此，你已经完成了FCKeditor的安装，并可以在你的项目中使用FCKeditor了，当然后面还有很多需要配置的东西。

    FCKeditor详细的设置：

    进入FCKeditor文件夹，编辑 fckconfig.js 文件。

    1、此步骤是必须的，也是最重要的一步。

    修改

    var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py

    var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php

    改为

    var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py

    var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | php

    2、配置语言包。有英文、繁体中文等，这里我们使用简体中文。

    修改

    FCKConfig.DefaultLanguage = 'en' ;

    为

    FCKConfig.DefaultLanguage = 'zh-cn' ;

    3、配置皮肤。有default、office2003、silver风格等，这里我们可以使用默认。

    FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;

    4、在编辑器域内可以使用Tab键。（1为是，0为否）

    FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ;

    5、加上几种我们常用的字体的方法，例如：

    修改

    FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

    为

    FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'

    6、编辑器域内默认的显示字体为12px，想要修改可以通过修改样式表来达到要求，打开/editor/css/fck_editorarea.css，修改font-size属性即可。如font-size: 14px;

    7、关于安全性。

    如果你的编辑器用在网站前台的话，那就不得不考虑安全了，在前台千万不要使用Default的toolbar，要么自定义一下功能，要么就用系统已经定义好的Basic，也就是基本的toolbar，

    修改

    FCKConfig.ToolbarSets["Basic"] = [

        ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']

    为

    FCKConfig.ToolbarSets["Basic"] = [

    ['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-','Smiley','SpecialChar','Replace','Preview']

    ] ;

    这是我改过的Basic，把图像功能去掉，把添加链接功能去掉，因为图像和链接和flash和图像按钮添加功能都能让前台页直接访问和上传文件，要是这儿不改直接给你上传个木马还不马上玩完？

    当然也可以配置一下WebConfig,也能让它确保安全，接下来我们将讲到。

    FCKPro工程项目的设置：

    1、配置WebConfig，在<appSettings>节点添加，如下所示：

    <appSettings>

        <add key="FCKeditor:BasePath" value="/项目名称/fckeditor/"/>

       //Win2003下，Files目录一定要有IIS_WPG用户的写权限，否则可能无法上传

        <add key="FCKeditor:UserFilesPath" value="/项目名称/Files/" />

    </appSettings>

    说明：BasePath是fckeditor所在路径，fckeditor由于我们直接放网站目录下这样写就可以，如果您的网站多放几层适当调整即可。UserFilesPath是所有上传的文件的所在目录。我们新建了一个Files文件夹放在了项目中做为上传文件的所在目录，这里为了方便，但由于考虑到安全性，我们建议Files要单独做wwwroot目录下的一个站点比较好，和我们的站点FCKEditor平行。不要把它放FCKEditor里，为什么呢？因为Files是要让客户有写的权限的，如果放FCKEditor下很危险。Files目录要有写的权限。你根据自己网站需求设置那个帐号，本文为方便设置User实际中你可能用ASP.NET帐号更合理。

    2、在FCKpro工程项目中编写一个最简单的页面

    <%@ Page Language="C#"  AutoEventWireup="true"   CodeFile="Default.aspx.cs" Inherits="_Default" validateRequest="false" %>

    <%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>

    // 这里要主要两个参数

    // 默认为<%@ Page Language="C#"  AutoEventWireup="true"   CodeFile="Default.aspx.cs" Inherits="_Default" %>

    // 我们要添加一个参数 validateRequest=false，否则提交带html代码的内容会报错

    // 从客户端(...)中检测到有潜在危险的 Request.Form 值。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head runat="server">

        <title>无标题页</title>

    </head>

    <body>

        <form id="form1" runat="server">

        <div>

            <FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server">

            </FCKeditorV2:FCKeditor>

            &nbsp;</div>

        </form>

    </body>

    </html>

    如何获取其内容呢？读取FCKeditor1控件的Value属性值即可。

    FCKEditor 2.6的问题：

    1.FCKeditor出现"this connector is disabled Please check the"editor/filemanager/connectors/aspx/config.aspx"错误的解决办法

    打开editor/filemanager/connectors/aspx/config.ascx修改CheckAuthentication()方法，返回true

    C# code 

    1. private bool CheckAuthentication()   
    2. {   
    3. // WARNING : DO NOT simply return "true". By doing so, you are allowing   
    4. // "anyone" to upload and list the files in your server. You must implement   
    5. // some kind of session validation here. Even something very simple as...   
    6. //   
    7. //        return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );   
    8. //   
    9. // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the   
    10. // user logs in your system.    
    11.   
    12.         return true;   
    13. }   
    private bool CheckAuthentication() { // WARNING : DO NOT simply return "true". By doing so, you are allowing // "anyone" to upload and list the files in your server. You must implement // some kind of session validation here. Even something very simple as... // // return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true ); // // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the // user logs in your system. return true; }

    2.在上传文件窗口点击浏览服务器，会出现the server didn't send back a proper xml.....错误提示，因为后期版本的FCKEditor要求不同类型的文件分别传到不同的目录，包括file,image,falsh,media 等目录，一定要先建立起来。

    FCKeditor精简版的制作方法（附）

    　进入FCKeditor文件夹，把所有“_”开头的文件和文件夹删掉，这些都是一些范例，只保留editor文件夹、fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml就可以了；

    　　进入editor文件夹，删掉“_source”文件夹，里面放的同样是源文件；

    　　退回上一级目录进入filemanager文件夹，有browser和upload两个文件夹。进入browser"default"connectors，只保留aspx文件夹，其余的删掉；mcpuk目录亦可删除；upload也一样，只保留aspx文件夹；

    　　退到editor再进入images文件夹，smiley里面放的是表情图标，有msn和fun两个系列，如果你想用自己的表情图标，可以把它们都删除；如果你想用这里的表情图标那就不要删了；

    　　lang里面放的是语言包，如果只是用简体中文，那么只保留fcklanguagemanager.js、zh-cn.js两个文件就行了，建议也保留en.js（英文）、zh.js（繁体中文）两个文件，fcklanguagemanager.js是语言配置文件，有了它才能和fckconfig.js里的设置成对，对应上相应的语言文件，一定要保留！

    　　再退出lang文件夹，进入skins文件夹，如果你想使用FCKeditor默认的奶黄色，那就把除了default文件夹外的另两个文件夹直接删除，如果想用别的，那就看你自己的喜好了。

    至此，文件精简完毕，由原来的2.55M变成现在的797K了。接着修改设置。

     fckeditor高度设置height="600px"

    <fckeditorv2:fckeditor id="FCKeditor1" runat="server" height="600px"></fckeditorv2:fckeditor> 

    形式如：

    varoEditor=FCKeditorAPI.GetInstance('content');
    varcontent=oEditor.GetXHTML(true);

    eg:

    function GetInnerHTML()
    {
        // Get the editor instance that we want to interact with.
        var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
        alert( oEditor.EditorDocument.body.innerHTML ) ;
    }

    *************************************************

    运用 Javascript取和设FCKeditor值也是非常容易的，如下：

    // 获取编辑器中HTML内容
    function getEditorHTMLContents(EditorName) {
        var oEditor = FCKeditorAPI.GetInstance(EditorName);
        return(oEditor.GetXHTML(true));
    }

    // 获取编辑器中文字内容
    function getEditorTextContents(EditorName) {
        var oEditor = FCKeditorAPI.GetInstance(EditorName);
        return(oEditor.EditorDocument.body.innerText);
    }

    // 配置编辑器中内容
    function SetEditorContents(EditorName, ContentStr) {
        var oEditor = FCKeditorAPI.GetInstance(EditorName) ;
        oEditor.SetHTML(ContentStr) ;
    }

    FCKeditorAPI是FCKeditor加载后注册的一个全局对象，运用 它我们就可以完成对编辑器的各种操作。

    在当前页获得 FCK 编辑器实例：
    var Editor = FCKeditorAPI.GetInstance('InstanceName');

    从 FCK 编辑器的弹出窗口中获得 FCK 编辑器实例：
    var Editor = window.parent.InnerDialogLoaded().FCK;

    从框架页面的子框架中获得其它子框架的 FCK 编辑器实例：
    var Editor = window.FrameName.FCKeditorAPI.GetInstance('InstanceName');

    从页面弹出窗口中获得父窗口的 FCK 编辑器实例：
    var Editor = opener.FCKeditorAPI.GetInstance('InstanceName');

    获得 FCK 编辑器的内容：
    oEditor.GetXHTML(formatted); // formatted 为：truefalse，表示能不能按HTML格式取出
    也可用：
    oEditor.GetXHTML();

    配置 FCK 编辑器的内容：
    oEditor.SetHTML("content", false); // 第二个参数为：truefalse，能不能以所见即所得方式配置其内容。此要领常用于"配置原始值"或"表单重置"哦作。

    插入内容到 FCK 编辑器：
    oEditor.InsertHtml("html"); // "html"为HTML文本

    检查 FCK 编辑器内容能不能发生变化：
    oEditor.IsDirty();

    在 FCK 编辑器之外调用 FCK 编辑器工具条命令：
    命令列表如下：
    DocProps, Templates, Link, Unlink, Anchor, BulletedList, NumberedList, About, Find, Replace, Image, Flash, SpecialChar, Smiley, Table, TableProp, TableCellProp, UniversalKey, Style, FontName, FontSize, FontFormat, Source, Preview, Save, NewPage, PageBreak, TextColor, BGColor, PasteText, PasteWord, TableInsertRow, TableDeleteRows, TableInsertColumn, TableDeleteColumns, TableInsertCell, TableDeleteCells, TableMergeCells, TableSplitCell, TableDelete, Form, Checkbox, Radio, TextField, Textarea, HiddenField, Button, Select, ImageButton, SpellCheck, FitWindow, Undo, Redo

    运用要领如下：
    oEditor.Commands.GetCommand('FitWindow').Execute();

    = FCKConfig.BasePath + 'plugins/'
    // FCKConfig.Plugins.Add( 'placeholder', 'en,it' ) ;


    去掉//后，就相当于把placeholder这个插件功能加上了，fckeditor的插件文件都在/editor/plugins/文件夹下分类按文件夹放置的，对于fckeditor2.0来说，里面有两个文件夹，也就是有两个官方插件，placeholder这个文件夹就是我们刚才加上去的，主要用于多参数或单参数自定义标签的匹配，这个在打造编辑模板时非常管用，要想看具体实例的话，大家可以去下载acms 这个系统查看学习，另一个文件夹tablecommands就是编辑器里的表格编辑用到的了。当然，如果你想打造自己其它用途的插件，那就只要按照 fckeidtor插件的打造规则打造完放置在/editor/plugins/下就行，然后再在fckeidtor.js里再添加 FCKConfig.Plugins.Add('Plugin Name',',lang,lang');就可以了。

    第二部分 ，如何 让编辑器一打开的时候，编辑工具条不出现，等点“展开工具栏”时才出现？Easy，FCKeditor本身提供了这个功能啦，打开fckconfig.js，找到

    FCKConfig.ToolbarStartExp anded = true ;
    改成
    FCKConfig.ToolbarStartExp anded = false ;
    就可以啦！

    第三部分，运用自己的表情图标，同样打开fckcofnig.js到最底部那一段


    FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
    FCKConfig.SmileyImages = ['regular_smile.gif','sad_smile.gif','wink_smile.gif'] ;
    FCKConfig.SmileyColumns = 8 ;
    FCKConfig.SmileyWindowWidth    = 320 ;
    FCKConfig.SmileyWindowHeight = 240 ;

    上面这段已经是我修改过的了，为了我发表此文的版面不会被撑得太开，我把FCKConfig.SmileyImages那一行改得只有三个表情图了。

    第一行，当然是表情图标路径的配置，第二行是有关表情图标文件名的一个List，第三行是指弹出的表情添加窗口最每行的表情数，下面两个参数是弹出的模态窗口的宽和高喽。

    第四部分，文件上传管理部分

    此部分可能是大家最为关心的，上一篇文章基本的讲了如何 修改来上传文件以及运用 fckeidtor2.0才提供的高速上传功能。再我们继续再深层次的讲解上传功能

    FCKConfig.LinkBrowser = true ;
    FCKConfig.ImageBrowser = true ;
    FCKConfig.FlashBrowser = true ;在fckconfig.js找到这三句，这三句不是连着的哦，只是我把他们集中到这儿来了，配置为true的意思就是允许运用 fckeditor来阅读服务器端的文件图像以及flash等，这个功能是你插入图片时弹出的窗口上那个“阅读服务器”按钮可以体现出来，如果你的编辑器只用来自己用或是只在后台管理用，这个功能无疑很好用，因为他让你很直观地对服务器的文件执行 上传操作。但是如果你的系统要面向前台用户或是像blog这样的系统要用的话，这个安全隐患可就大了哦。于是我们把其一律配置为false;如下

    FCKConfig.LinkBrowser = false ;
    FCKConfig.ImageBrowser = false ;
    FCKConfig.FlashBrowser = false ;
  • 相关阅读:
    SQLSERVER Truncate使用注意事项
    SQLSERVER Truncate使用注意事项
    c#事件使用示例详解
    c#事件使用示例详解
    C#反射の反射泛型
    C#反射の反射泛型
    C#反射设置属性值和获取属性值
    1336：【例31】找树根和孩子
    1336：【例31】找树根和孩子
    1037：计算2的幂
  • 原文地址：https://www.cnblogs.com/tangself/p/1622492.html
Copyright © 2011-2022 走看看