。net下的富文本编辑器FCKeditor的配置方法(图)原创

。net下的富文本编辑器FCKeditor的配置方法(图)原创
。net下的富文本编辑器FCKeditor的配置方法(图)原创

.net下的富文本编辑器FCKeditor的配置方法(图)原创

FCKeditor是一款开源的富文本编辑器,几乎支持所有流行的Web开发语言,版本稳定,用户多,可配置性好。

以前做Java和php的时候就一直用FCKeditor,现在做.net了继续用。呵呵。

我用在对文章的评论页面,所以只需要少部分功能。先看看我做好的效果:

在看看官方完整功能:

第一步:软件下载和安装

下载地址:https://www.360docs.net/doc/6811384233.html,/download

需要下载https://www.360docs.net/doc/6811384233.html,和FCKeditor两个文件,https://www.360docs.net/doc/6811384233.html,本身其实只是在.net中配置FCKedi tor用的,本身不包含实质内容。

我下载的是:https://www.360docs.net/doc/6811384233.html,_2.6.3和FCKeditor_2.6.5两文件。

1. 对于FCKeditor_

2.6.5.zip文件

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

2.对于https://www.360docs.net/doc/6811384233.html,_2.6.3

解压https://www.360docs.net/doc/6811384233.html,_2.6.3,该目录中包括https://www.360docs.net/doc/6811384233.html,_2.6.3的全部代码,但是我们只要使用它编译好的部分。

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

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

第二步:配置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 | las so | 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','BG Color','-','Smiley','SpecialChar','Replace','Preview']

] ;

7、配置WebConfig

节点添加,如下所示:

如果你用的是默认的上传功能,则

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 implem ent

// 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/fi lemanager/connectors/aspx/config.aspx"

9. 其它次要配置(不影响使用)

* 可以把fckeditor目录及其子目录下所有下划下开头的范例、源文件删掉。

* 可以在fckeditor目录下只保留fckconfig.js、fckeditor.js和几个xml文件,其余全部删掉。

* fckeditor目录下的editor目录下有个filemanager目录,把该目录下的borswer\default\connect ors目录中除aspx目录以外的全部目录删掉。

* 可以把editor\lang目录下除zh-cn.js、en.js、zh.js之外的全部删掉。

第三步:使用FCKeditor编辑器

注意看这里红色的部分,是在使用Fckeditor增加的:

AutoEventWireup="true"是增加一些特殊事件的关联。

validateRequest="false"是因为Fckeditor框内的提交的内容是HTML,所以要去掉验证提交请求的功能。

<%@ Page Language="C#" AutoEventWireup="true"

CodeFile="Default.aspx.cs" Inherits="_Default" validateRequest="false"%>

无标题页

 

后台获取编辑器内填写的内容:读取FCKeditor1控件的Value属性值即可。

.net下的富文本编辑器FCKeditor的配置方法(图)原创

FCKEDITOR_API使用详解

FCKeditor API使用详解 2009-04-2614:46 利用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为:true|false,表示是否按HTML格式取出 也可用: oEditor.GetXHTML();

富文本编辑器的技术演进

富?文本编辑器?的技术演进

?目录一、富文本编辑器介绍 二、语雀文档编辑器面临的问题与解决思路 三、多人实时协同的解决思路

富?文本编辑器? - 常?见交互 富文本输入框 - 输入内容 - 选中 & 操作 操作栏 - 顶部工具栏 - 侧边栏 - 内嵌工具栏

富?文本编辑器? - 浏览器?特性 富文本输入框

这里可以编辑
对内容进行操作 document.execCommand(‘bold’);

富?文本编辑器? - 技术类型 类型描述典型产品 L01、基于 contenteditable 2、使?用 document.execCommand 3、?几千~?几万?行行代码 早期的轻量量级编辑器? L11、基于 contenteditable 2、不不?用 document.execCommand,?自主实现 3、?几万?行行~?几?十万?行行代码 CKEditor、TinyMCE Draft.js、Slate ?石墨??文档、腾讯?文档 L21、不不?用 contenteditable,?自主实现 2、不不?用 document.execCommand,?自主实现 3、?几?十万?行行~?几百万?行行代码 Google Docs O?ce Word Online iCloud Pages WPS ?文字在线版

富?文本编辑器? - 不不同类型的优劣 类型优势劣势 L0技术?门槛低,短时间内快速研发可定制的空间?非常有限 L1站在浏览器?肩膀上,能够满?足 99% 业务场景?无法突破浏览器?本身的排版效果 L2技术都掌控在?自?己?手中,?支持个性化排版技术难度相当于?自研浏览器?、数据库

百度Ueditor配置步骤

百度Ueditor配置步骤 一、官网上下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示: _examples:编辑器完整版的示例页面 dialogs:弹出对话框对应的资源和JS文件 themes:样式图片和样式文件 php/jsp/.net:涉及到服务器端操作的后台文件,根据你选择的不同后台版本,这里也会不同,这里应该是jsp,php,.net third-party:第三方插件(包括代码高亮,源码编辑等组件) editor_all.js:_src目录下所有文件的打包文件 editor_all_min.js:editor_all.js文件的压缩版,建议在正式部署时才采用 editor_config.js:编辑器的配置文件,建议和编辑器实例化页面置于同一目录 二、部署UEditor到实际项目(UETest)中的步骤: 第一步:在项目的任一文件夹中建立一个用于存放UEditor相关资源和文件的目录,此处在项目根目录下建立,起名为ueditor。

第二步:拷贝源码包中的dialogs 、themes 、third-party 、editor_all.js 和editor_config.js 到ueditor 文夹中。其中,除了ueditor 目录之外的其余文件均为具体项目文件,此处所列仅供示例。 第三步:为简单起见,此处将以根目录下的index.aspx 页面作为编辑器的实例化页面,用来展示UEditor 的完整版效果。在index.aspx 文件中,首先导入编辑器需要的三个入口文件,示例代码如下: 1 2 3 编辑器完整版实例 第四步:然后在index.aspx 文件中创建编辑器实例及其DOM 容器。具体代码示例如下: 1 2 3 4 5 6 7 //下面是实例化 最后一步: 在/UETest/ueditor/ editor_config.js 中查找URL 变量配置编辑器在你项目中的路径。 1 2 //强烈推荐以这种方式进行绝对路径配置 URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/"; 新增编辑器容器拖动缩放功能,配置项为:scaleEnabled 、minFrameWidth 、minFrameHeight 控制大小 congig.js 文件中 //,initialFrameWidth:1000 //初始化编辑器宽度,默认1000 //,initialFrameHeight:320 //初始化编辑器高度,默认320

几种常用网页文本编辑器总结

文本编辑器应用总结 一.lhgeditor文本编辑器 lhgeditor组件文件结构: 1. lhgeditor.js:组件的核心JS文件 2. lhgeditor.css:组件的样式表文件 3. images:组件所需的图片都在此文件夹中 以上三个文件为组件所必须的三个文件,组件包中其它以“_”开头的文件为示例的演示文件,实际使用中不需要这些文件。当然框架核心文件lhgcore.js是每个组件都必须用到的文件,记得加载组件前先要加载此文件。 lhgeditor组件使用说明: 1. 在调用组件的页面加载lhgcore.j s和lhgeditor.js两个文件。 2. 在window.onload函数里加入J.editor.add(编辑器的id).init(); 例:

二.nicEdit文本编辑器 再引入三个js文件ueditor.all.js、ueditor.config.js、lang/zh-cn/zh-cn.js,一定是在以上代码之后引入。 在需要使用编辑器的位置,添加代码如下: 标签。 3)引入相关文件 4)创建编辑器 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

FCKeditor (jsp在线编辑器)配置总结

FCKeditor (jsp在线编辑器)配置总结 折腾了两天,从eWebEditor到CKeditor再到FCKeditor真是费足了劲了! 本人比较喜欢开源的,在网上狂搜一通最后被CKeditor强大的功能和华丽的界面吸引的五体投地~~,高高兴兴的下载了CKeditor,花费了半天的时间终于把CKeditor配置好了,结果一点图片发现连个上传图片的按钮都没有(~~~~(>_<)~~~~ ),原来还需要一个CKfinder插件。于是又兴冲冲的跑到官网上找CKfinder,找到最后却发现就是没有java版的!!!而且这个插件好像是要收费的,哎~真是郁闷死了。 不能用CKeditor那就用FCKeditor吧,呵呵,下面牢骚归正传: 一、首先到官网下载最新版本的 FCKeditor 2.6.5下载地址: https://www.360docs.net/doc/6811384233.html,/project/downloading.php?group_id=75348&filename=FCKeditor_2.6.5.zip FCKeditor.Java 2.6 要下的有fckeditor-java-demo-2.6.war (示例,我觉得下载这一个就够了) fckeditor-java-2.6-src.zip (源文件,如果你想看就下吧) fckeditor-java-2.6-bin.zip (我下了,但没有上) 二、(1)、把FCKeditor 2.6.5解压到WebRoot下 (2)、解压fckeditor-java-2.6-bin.zip,把文件夹中的fckeditor-java-core-2.6.jar以及lib中的所有jar 包拷贝到你的web程序的lib中,fckeditor-java-demo-2.6.war中的slf4j-simple-1.5.8.jar也要拷进去(注意:slf4j-api和slf4j-simple的版本一定要一致)。如果你觉得麻烦,那么就从fckeditor-java-demo-2.5.war 中直接将lib文件夹下的所有jar包复制到项目的lib中,我就是这么做的。 (3)、把fckeditor-java-demo-2.6.war 中的web.xml中的servlet的配置复制到你的web程序中web.xml 中。 ConnectorServlet net.fckeditor.connector.ConnectorServlet 1 ConnectorServlet /fckeditor/editor/filemanager/connectors/* (4)、把fckeditor-java-demo-2.6.war 中的fckeditor.properties复制到你项目的src中 (5)、通过它提供的标签库添加应用:

网站管理系统使用手册

前言: 本手册适用于师友网站群管理系统版本,根据客户需求,各模块的功能略有不同,所提供的界面图片仅供参考。 第一部分:常用操作 一、系统登录 从网站前台点击“管理登录”进入后台登录页面或直接从前台登录窗口,输入帐号和密码,点击“登录”进入系统。后台登录界面如下图示(图片仅供参考): Web方式登录窗口 二、系统界面 三、修改密码和个人资料 从系统操作主界面顶部右侧导航区点击“修改密码”和“个人资料”,打开修改密码窗口和修改个人资料的窗口。修改密码必须提供正确的原始密码。 修改登录密码界面 五、退出登录 从系统操作主界面顶部右侧的导航区点击“退出”,即可注销用户的登录信息并返回登录界面。 第二部分网站管理 一、站点管理 站点管理主要包括站点的创建、修改、删除、审核和站点的栏目管理。站点管理的主界面如下图所示: 1、创建新站点 从“站点管理”模块,点击“创建新网站”,打开创建新站点的编辑窗口。如下图所示:站点包括“主站”和“班级”网站两种类型,创建“班级”网站前,必须事先在系统管理的“班级设置”模块设置好学校的班级。 创建新站点需要指定网站的名称、网址、网站目录,选择该网站的管理员。各项目指定的内容及说明详见窗口的“使用说明”。 “本站是系统门户”只有系统管理员能够指定,并且整个系统中只能指定一个网站为“门户”,被指定为门户的网站可以接受其他网站的投稿。 “管理员”可以管理本站点下的所有栏目内容,并且可以进行站点栏目的管理。 2、修改站点信息 参见“创建新站点”功能。 3、发布与取消发布 只有发布的站点才能够接受投稿和管理。管理员可以根据需要对网站进行开通与关闭。 4、站点的删除 删除某一个站点,该站点下面的所有栏目及所有内容都将同时被删除,并且不能够恢复。请慎用此功能。对于已经有内容的站点,在不需要的时候可以先设置为“不发布”。 二、栏目管理

CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用

CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用 一、下载安装Ckeditor,并将其整合到项目中 1、什么是CKeditor?为什么要使用它? 我们在做门户网站或者公文系统时,客户经常要求在录入时能够更改字体样式、大小、颜色并具备插入图片的功能。而一般的TextBox无法满足我们的需求,此时就需要使用一种叫做富文本编辑器的东西,这类编辑器有很多,ckeditor就是其中一种,下面介绍其使用方法 2、如何下载 √ 进入官方网站https://www.360docs.net/doc/6811384233.html,/,点击Download进入下载页面 √ CKEDITOR支持多种编程语言及框架(如:java、https://www.360docs.net/doc/6811384233.html,、sharepoint等),我们选择https://www.360docs.net/doc/6811384233.html, √ 下载后解压,简单解释里面内容 3、下面讲如何将CKEditor整合到我们的应用中 √ 新建一个网站

√ 为了代码清晰,新建一个目录,起名JS,方便将ckeditor放到该目录下 √ 将解压后_Samples文件夹中的ckeditor目录拷贝到JS下

√ 新建网页,起名test_ckeditor √ 增加对ckeditor的引用 √ 调用,主要是通过对TextBox的格式化实现富文本的显示效果 √ 为了简便,我们引入JQUERY类库(一种使javascript更容易理解与编写的代码集合),从https://www.360docs.net/doc/6811384233.html,/下载

√ 将下载后的文件放到JS文件夹下 √ 引用jquery(通过将jquery类库拖放到title标签下) √ 页面上添加TextBox文本框(ID:TextBox1) √ 用ckeditor插件格式化TextBox1。在中添加如下代码 (注:以上代码表示当页面的所有元素加载完毕后用CKEDITOR.replace命令对TextBo x1这个文本框进行改造,让其看起来更炫) √ 按F5键预览,即可看到TextBox1被ckeditor格式化后的效果

细数几款免费好用的在线HTML编辑器

细数几款免费好用的在线HTML编辑器 先普及一下基本知识:什么叫在线HTML编辑器?说得简单点,在线HTML编辑器就是在网上发帖子、写博客的那个带编辑功能的框框,可以进行图文排版等操作。当年本菜鸟做网站的时候,曾经自己用javascript编写过一个比较简单的在线HTML编辑器,用于文本内容的排版。但是因为水平有限,很多功能都无法实现。后来有了eWebEditor,功能确实强大,但这个编辑器是个收费的软件,并且正因为功能强大,也就显得过重,一些轻量的场合不是太适用。那有没有既免费、又功能强大、还能适应轻量场合的在线HTML编辑器呢?答案肯定是有的。这首先要感谢这些年来有一批奉献精神的程序猿们不断推进共享软件的开发,让我们得以享受他们的成果。一、百度出品的UEditorUEditor是由百度web 前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。特别要说的是,头条号后台发布文章的编辑器就是用的UEditor!百度UEditorUEditor还有一个轻量版的,叫做UMeditor,简称UM。UM是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线HTML编辑器。主要特点是容量和加载速度上的改变,主文件的代码量为139k,而且放弃了使用传统的iframe模式,采用了

div的加载方式,以达到更快的加载速度和零加载失败率。UM的第一个使用者是百度贴吧,以经受贴吧每天几亿的pv 的考验,功能设计应当是最优化的了。当然随着代码的减少,UM的功能对于UE来说还是有所减少,但也有增加,比如拖拽图片上传,chrome的图片拖动改变大小等。百度UEditor界面二、xhEditor开源HTML编辑器xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化HTML编辑器,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。xhEditor完全基于Javascript 开发,可以应用在任何的服务端语言环境下,例如:PHP、ASP、https://www.360docs.net/doc/6811384233.html,、JA V A等。可以在CMS、博客、论坛、商城等互联网平台上完美的嵌入运行,能够非常灵活简单的和您的系统实现完美的无缝衔接。 主要特点:精简迷你:初始加载4个文件,包括:1个js(50k)+2个css(10k)+1个图片(5k),总共65k。若js和css文件进行gzip压缩传输,可以进一步缩减为24k左右。使用简单:简单的调用方式,加一个class属性就能将textarea变成一个功能丰富的可视化编辑器。无障碍访问:提供WAI-ARIA全面支持,全键盘精细操作,全程语音向导,提供完美无障碍访问体验,充分满足残疾人的上网需求。内置Ajax上传:内置强大的Ajax上传,包括HTML4和HTML5上传支持(多文件上传、真实上传进度及文件拖放上传),剪切板上传及远程抓

FCKeditor使用方法详解

FCKeditor使用方法技术详解 作者:深蓝色 QQ:76863715 本文PHPChina论坛首发 本文特为《PHP5和MySQL5 Web开发技术详解》一书编写 1、概述 FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor(如百度,阿里巴巴)。本文将通过与PHP相结合,从基本安装到高级的配置循序渐进介绍给广大PHPer。 FCKeditor官方网站:https://www.360docs.net/doc/6811384233.html,/ FCKeditor Wiki:https://www.360docs.net/doc/6811384233.html,/ 2、下载FCKeditor 登录FCKeditor官方站(https://www.360docs.net/doc/6811384233.html,),点击网站右上角“Download”链接。笔者编写本文时,FCKeditor当前最新的稳定版本是2.4.3,因此我们下载此版本的zip压缩格式文档。如图1所示: 图1:下载FCKeditor 2.4.3(最新稳定版)

注意:当点击“FCKeditor_2.4.3.zip”链接后,将跳转到https://www.360docs.net/doc/6811384233.html,网站上自动下载。如果您当前使用Linux或Unix系统,可以点击“FCKeditor_2.4.3.tar.gz”链接下载.tar.gz格式的压缩包。 3、安装FCKeditor 解压“FCKeditor_2.4.3.zip”文档到您的网站目录下,我们先假定您存放FCKeditor和调用脚本存于同一个目录下。目录结构如下图所示: 图2:网站目录结构图 fckeditor目录包含FCKeditor2.4.3程序文件。check.php用于处理表单数据。add_article.php 和add_article_js.html分别是PHP调用FCKeditor和JavaScript调用FCKeditor实例脚本文件。 3.1、用PHP调用FCKeditor 调用FCKeditor必须先载入FCKeditor类文件。具体代码如下。 接下来,我们需要创建FCKeditor实例、指定FCKeditor存放路径和创建(显示)编辑器等。具体代码如下所示(代码一般放在表单内)。 BasePath = './fckeditor/'; // 设置FCKeditor目录地址 $FCKeditor->Width='100%'; //设置显示宽度 $FCKeditor->Height='300px'; //设置显示高度的高度 $oFCKeditor->Create() ; // 创建编辑器 ?> 下面是笔者创建好的实例代码,您可将代码保存为add_article.php。

相关文档
最新文档