fckeditor的配置方法

fckeditor的配置方法本文章借鉴的是:马千里的博客今天早晨用了一点时间找了一个开源的富文本编辑器,我之前一直用一个很简单的,受限于功能,复用性一直不好,每次重建一个网站都需要用非常多的时间来处理,比较繁琐。在这里记录一下

大家好,又见面了,我是你们的朋友全栈君。

本文章借鉴的是:马千里的博客 

今天早晨用了一点时间找了一个开源的富文本编辑器,我之前一直用一个很简单的,受限于功能,复用性一直不好,每次重建一个网站都需要用非常多的时间来处理,比较繁琐。在这里记录一下fckeditor的配置方法。

这是官方网站功能:

image

第一步:软件下载和安装

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

我下载了两个文件:FCKeditor_2.6.6.zip 和 FCKeditor.Net_2.6.3.zip

第二个文件只需要使用编译好的 FredCK.FCKeditorV2.dll

1. 对于FCKeditor_2.6.6.zip文件

解压缩后,将得到的fckeditor文件夹复制到网站的目录下面。我是放在我的样式Style下的JS目录如图:

image

2.对于FCKeditor.Net_2.6.3

解压 FCKeditor.Net_2.6.3,该目录中包括FCKeditor.Net_2.6.3的全部代码,但是我们只要使用它编译好的部分。

■找到其目录下的\bin\Release目录中的FredCK.FCKeditorV2.dll文件。把 FredCK.FCKeditorV2.dll添加到bin目录下。如图:

image

■在VS2005/2008的工具箱上新建一个名叫FCKEditor的Tab,然后在里面点右键,选择Choose Item,定位到解压FCKEditor.Net后生成的\bin\Release\2.0目录下的FredCK.FCKEditorV2.dll。该 Tab下就会生成一个FCKEditor的.net组件。在vs的Design模式下把该组件拖放到界面上。

image

第二步:配置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、定制工具栏
如果你的编辑器用在网站前台的话,那就不得不考虑安全了,在前台千万不要使用Default的toolbar,要么自定义一下功能,要么就用系统已经定义好的Basic,也就是基本的toolbar,
修改
FCKConfig.ToolbarSets[“Basic”] = [
    [‘Bold’,’Italic’,’-‘,’OrderedList’,’UnorderedList’,’-‘,’Link’,’Unlink’,’-‘,’About’]

FCKConfig.ToolbarSets[“Basic”] = [
[‘Bold’,’Italic’,’-‘,’OrderedList’,’UnorderedList’,’-‘,’Unlink’,’-‘,’Style’,’FontSize’,’TextColor’,’BGColor’,’-‘,’Smiley’,’SpecialChar’,’Replace’,’Preview’]
] ;
7、配置WebConfig

在<appSettings>节点添加,如下所示:
如果你用的是默认的上传功能,则
  <add key=”FCKeditor:BasePath” value=”~/fckeditor/”/>
  <add key=”FCKeditor:UserFilesPath” value=”/网站名称/UploadFiles/”/>

8.如需使用上传图片功能还需配置

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

注意看这里的注释:意思是说不要简单的修改为true,而应该在这里加一些权限Check的判断。否则的话所有人都可以上传图片。

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;
}

不过不修改的话,会弹出一个阻止框,显示”this connector is disabled Please check the”editor/filemanager/connectors/aspx/config.aspx”

9. 其它次要配置(不影响使用)
* 可以把fckeditor目录及其子目录下所有下划下开头的范例、源文件删掉。
* 可以在fckeditor目录下只保留fckconfig.js、fckeditor.js和几个xml文件,其余全部删掉。
* fckeditor目录下的editor目录下有个filemanager目录,把该目录下的borswer\default\connectors目录中除aspx目录以外的全部目录删掉。
* 可以把editor\lang目录下除zh-cn.js、en.js、zh.js之外的全部删掉。

第三步:使用FCKeditor编辑器

<div>
        test hello world!<FCKeditorV2:FCKeditor ID=”FCKeditor1″ runat=”server”>
        </FCKeditorV2:FCKeditor>
        <asp:Button ID=”Button1″ runat=”server” OnClick=”Button1_Click” Text=”Button” />
        <asp:Label ID=”Label1″ runat=”server” Text=”Label”></asp:Label>
   </div>

完成后的效果!


image

好了!以后用这颗就好了,可以自己多在config中定义几种编辑器的类型,这样可以在一个网站中不同的地方使用不同形式的richtext。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/155659.html原文链接:https://javaforall.net

(0)
上一篇 2022年7月3日 下午3:16
下一篇 2022年7月3日 下午3:16


相关推荐

  • copy.deepcopy()_python切片是深拷贝还是浅拷贝

    copy.deepcopy()_python切片是深拷贝还是浅拷贝copy()与deepcopy()之间的主要区别是python对数据的存储方式。首先直接上结论:—–我们寻常意义的复制就是深复制,即将被复制对象完全再复制一遍作为独立的新个体单独存在。所以改变原有被复制对象不会对已经复制出来的新对象产生影响。—–而浅复制并不会产生一个独立的对象单独存在,他只是将原有的数据块打上一个新标签,所以当其中一个标签被改变的时候,数据块就会发生变化

    2022年10月3日
    3
  • ICA独立成分分析去除脑电伪影「建议收藏」

    ICA独立成分分析去除脑电伪影「建议收藏」点击上面"脑机接口社区"关注我们更多技术干货第一时间送达关于脑电图EEG,Rose分享过很多,可以查看《什么是EEG以及如何解释EEG?》《EEG数据、伪影的查看与清洗》…

    2022年5月16日
    43
  • 东华大学计算机考研录取分数线,东华大学2019年考研复试录取分数线

    东华大学计算机考研录取分数线,东华大学2019年考研复试录取分数线

    2021年11月28日
    48
  • 搜索、推荐、广告系统等人工智能优质技术资源最全整理[通俗易懂]

    搜索、推荐、广告系统等人工智能优质技术资源最全整理[通俗易懂]前沿文章目录前沿开源地址[算法学习资料:AI_Tutorial](https://github.com/cbamls/AI_Tutorial)开源相关LuceneSolrElasticLucidWorks中文分词大公司阿里百度京东美团点评携程去哪儿搜狗一号店待分类开发应用理论基础源码解读常见问题其他人工智能领域文集算法学习资料:AI_Tutorial人工智能、AI架构、搜索系统、推荐系统…

    2022年5月5日
    40
  • MinGW安装教程——著名C/C++编译器GCC的Windows版本[通俗易懂]

    前言本文主要讲述如何安装C语言编译器——MinGW,特点是文章附有完整详细的实际安装过程截图,文字反而起说明提示作用。编写本文的原因始于我的一个观点:图片可以比文字传达更多的信息,也能让其他人更容易理解作者的意图及思想。因此,我将安装MinGW的过程和步骤,编写成了这篇以图片为主的教程,为了让看到这篇文章的任何人,都可以很容易按照图片所示正确安装MinGW。一、什么是MinGW…

    2022年4月8日
    71
  • 优秀的第三方资源

    优秀的第三方资源一:源代码实例1:快速搭建项目源代码地址:https://github.com/wujunyang/MobileProject2:高仿美团iOS版地址:https://github.com/lookingstars/meituan3:模仿网易新闻做的精仿网易新闻地址:https://github.com/dsxNiubility/SXNews4:支付宝高仿版地址:h…

    2022年5月22日
    37

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号