• Web编程前端之2:选择html在线编辑器


    用什么样的Web编辑器,eWebEditor,kindeditor还是FCKEditor?

    我接触的第一个Web编辑器是eWebEditor。它是国产的,在IE7及以下的版本中效果是非常不错的,不兼容IE8及火狐,而且使用不当就会留下上传漏洞的隐患。这样的编辑器,还是不要用了(很想支持国产,但是...)

    放弃eWebEditor后,我选择了kindeditor。它是老外开发的,能兼容目前所有版本的浏览器,纯静态(文件上传需要自
    己实现,小问题)。但是它不支持Word表格的复制(就是不能直接从Word上复制表格到编辑器中),而且会经常出现图文丢失的现象,郁闷,我还是不用了(老外的东西也不一定好,...)

    前段时间接触了FCKEditor,发现这个编辑器相当不错,查了一下,网上大家对它的评价超高(貌似淘宝也是用的这个编
    辑器)。它也是老外开发的,能兼容目前所有版本的浏览器,对Word的支持非常好,复制表格没有一点变形。到目前为
    止,我已经在两个项目中使用了这个编辑器,一个是基于PHP的订餐系统,另外一个是基于ASP的公司网站,FCKEditor对PHP,ASP以及ASP.NET的支持都很好,使用起来非常方便。


    编辑器的安全问题一直是一个令很多人头痛的问题,这主要在于文件上传上。各种编辑器默认情况下都没有对文件上传
    进行身份认证(它也不可能实现一个通用的身份认证),开发者必须根据自己系统的情况加入适当的身份认证代码。另外
    编辑器允许的文件上传类型也需要进行严格的限制,例如eWebEditor允许在后台修改上传文件类型,这样一旦歹徒获取后
    台密码,即可轻易上传任意格式的文件。低版本的FCKEditor(好像是2.1以下的版本)默认情况下允许上传任意格式的文件。


    总结一下FCKEditor的使用(以2.6.5版为例):


    (1)精简,"言多必失",文件多了也是一种隐患。FCKEditor支持多种服务器脚本语言,实际使用的时候我们根本用不了那么多文件,我们要根据自己的需要对其进行精简。
    对于ASP系统来说:

    FCKEditor根目录,仅保留"fckeditor.asp,fckconfig.js,fckeditor.js,fckpackager.xml,fckstyles.xml,
    fcktemplates.xml"这些文件以及editor目录。删除示例目录"_samples"。
    "fckeditor\editor\filemanager\connectors"目录下面仅保留"asp"目录,删除其它目录和文件。

    对于PHP系统来说:

    FCKEditor根目录,仅保留"fckeditor.php,fckeditor_php4.php,fckeditor_php5.php,fckconfig.js,fckeditor.js,
    fckpackager.xml,fckstyles.xml,fcktemplates.xml"这些文件以及editor目录。删除示例目录"_samples"。"fckeditor\editor\filemanager\connectors"目录下面仅保留"php"目录,删除其它目录和文件。

    (2)修改文件上传采用的脚本程序(语言)。

    默认的FCKEditor文件上传程序为asp,如果是用在asp系统中,那就不用再修改了。

    如果是用在PHP系统中的话,需要做如下修改,打开fckconfig.js
    找到:
    var _FileBrowserLang ge = asp
    var _QuickUploadLang ge = asp
    改成:
    var _FileBrowserLang ge = php
    var _QuickUploadLang ge = php

    (3)开启文件上传,修改文件上传目录。

    对于ASP系统来说:
    打开fckeditor\editor\filemanager\connectors\asp\config.asp
    启用文件上传:

    找到:
    ConfigIsEnabled = false

    改成:
    ConfigIsEnabled = tr

    设置上传存放目录:

    找到:
    ConfigUserFilesPath = "/admin/uppic/"
    改成:
    ConfigUserFilesPath = "自定义的路径"

    对于PHP系统来说:
    打开fckeditor/editor/filemanager/browser/default/connectors/php/config.php
    启用文件上传:

    找到:
    $Config[Enabled] = false

    改成:
    $Config[Enabled] = tr

    设置上传存放目录:

    找到:
    $Config[UserFilesPath] = /userfiles/
    改成:
    $Config[UserFilesPath] = 自定义的路径

    (4)修改上传文件命名方式。

    FCKEditor上传文件,文件名采用原文件名,如果想采用自定义的文件命名方式(比如,随即名称),可以修改如下地
    方:

    对于ASP系统来说:
    打开fckeditor\sample\edit\editor\filemanager\connectors\asp\commands.asp

    找到:
    sFileName = SanitizeFileName( sFileName )

    将该句改为自定义的文件命名格式,例如:

    dim RndStr
    Randomize
    RndStr = Cstr(Fix(9000*rnd()+1000)) 产生一个随机数
    sFileName =year(date)&month(Date)&day(Date)&hour(time)&minute(time)&second(time)&RndStr &"." &
    **tension

    对于PHP系统来说:
    打开fckeditor\editor\editor\filemanager\connectors\php\commands.php

    找到:
    $sOriginalFileName = $sFileName ;

    在该句前面加入:

    // 初始化种子
    $sstr =split(" ",microtime(),5);
    $seed =$sstr[0]*10000;
    // 使用种子初始化随机数发生器
    srand($seed);
    // 生成指定范围内的随机数
    $random =rand(1000,10000);
    // 合成随即的文件名
    $sFileName = date("YmdHis", time()).$random.".".$**tension;


    (5)FCKEditor在程序中引用方式。

    对于ASP系统来说:
    需要包含下面的头文件
    <!--#incl? file="fckeditor/fckeditor.asp"-->
    在编辑器所在的位置添加如下代码:
    <%
    Dim oFCKeditor
    Set oFCKeditor = New FCKeditor
    oFCKeditor.BasePath = "/fckeditor/" 这个路径必须是相对于站点根目录的路径,设置错误编辑器
    将无法显示

    oFCKeditor.ToolbarSet="Default"
    oFCKeditor.Width = "98%"
    oFCKeditor.Height= "500px"

    oFCKeditor.Val = "" 设置默认值
    oFCKeditor.Create "shangpin_description" 编辑器的id,相当于input标签的name属性值,这里是
    shangpin_description
    %>

    对于PHP来说:
    在编辑器所在的位置添加如下代码:
    <?php
    incl?("fckeditor/fckeditor.php"); // 头文件
    $oFCKeditor = new FCKeditor("shangpin_description") ; // 编辑器的id,相当于input标签的
    name属性值,这里是shangpin_description
    $oFCKeditor->BasePath="/fckeditor/ " ; //设置FCKeditor路径

    $oFCKeditor->ToolbarSet ="Default";
    $oFCKeditor->Width="98%";
    $oFCKeditor->Height="500px";

    $oFCKeditor->Val=""; // 设置默认值
    $oFCKeditor->Create();
    ?>

    (6)获取FCKEditor中的数据。

    对于服务器端脚本程序来说,将"编辑器的id"当做input标签的name属性值来获取即可,例如:

    在ASP中reqst("shangpin_description"),在PHP中$_REQST["shangpin_description"]

    JS中用FCKeditorAPI.GetInstance(shangpin_description).GetXHTML(tr)得到shangpin_description对应的值

  • 相关阅读:
    [vue/cli4] 目录public和asset区别
    VSCode常用指令
    [vue] JS导出Excel
    各设计模式总结与对比及Spring编程思想
    JavaIO演进之路
    用300行代码手写提炼Spring的核心原理
    设计模式(六)之装饰器模式(Decorator Pattern)深入浅出
    设计模式(五)之适配器模式(Adapter Pattern)深入浅出
    设计模式(四)之模板模式(Template Method Pattern)深入浅出
    设计模式(二)之委派模式(Delegate Pattern)深入浅出
  • 原文地址:https://www.cnblogs.com/alvinyue/p/htmlonline.html
Copyright © 2020-2023  润新知