fckeditor编辑器调用方法

下面我们总结了常的语言开发中fckeditor编辑器的调用方法包括有asp教程,php教程,asp.net教程,网页特效等几种调用方法。

PHP页面：

/* 编辑器 */
include_once "../include/fckeditor/fckeditor.php";//把编辑器引进来
$editor = new FCKeditor('content');//表单项的名称
$editor->BasePath = "/fckeditor/";//编辑器所在目录
$editor->ToolbarSet = "Normal";//工具栏的名字，可以根据自己的需求加载其他的
$editor->Width = "95%";//宽度度
$editor->Height = "250";//高度
$editor->Value = $content;//初始值
$fckeditor = $editor->CreateHtml();//在要显示编缉器的地方输出变量$fckeditor的值就行了
$tpl->assign('fckeditor', $fckeditor);//模板赋值

HTML模板页面(我用的是smarty)
{%$fckeditor%}

一般php页面调用

content 是我定义的变量名
$content =$_POST["content"];
添加：
<INPUT name="content" id="content" type=hidden>
<IFRAME id="content" src="fckeditor/editor/fckeditor.html?InstanceName=content&Toolbar=Normal" frameBorder=0 width=100% scrolling=no height=300 ></IFRAME>
修改页面：
<INPUT name="content" id="content" type=hidden value="<?php echo $rows['content'];?>">
<IFRAME id="content" src="/fckeditor/editor/fckeditor.html?InstanceName=content&Toolbar=Normal" frameBorder=0 width=100% scrolling=no height=300 >
</IFRAME>

FCKeditor asp调用方法1

<!-- #INCLUDE file="FCKeditor/FCKeditor.asp" -->
<form action="sampleposteddata.asp" method="post" target="_blank">
<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.BasePath = "/FCKeditor/"
oFCKeditor.ToolbarSet = "Default"
oFCKeditor.Width = "100%"
oFCKeditor.Height = "400"
oFCKeditor.Value = "1234123123"
oFCKeditor.Create "Content"
%>

<input type="submit" value="Submit" />
</form>

FCKeditor asp调用方法2

<!--#include file="FCKEditor/fckeditor.asp" -->

<%
'多个控件使用一个编辑器
Set oFCKeditor = New FCKeditor
oFCKeditor.BasePath = "/fckeditor/"
oFCKeditor.ToolbarSet = "yongfa365"
oFCKeditor.Width = "100%"
oFCKeditor.Height = "100"
oFCKeditor.Config("ToolbarLocation") ="Out:xToolbar"
oFCKeditor.Value = ""
oFCKeditor.Create "txtContentHeader"
%>

<div id="xToolbar"></div>
<%
Set oFCKeditor = New FCKeditor
oFCKeditor.BasePath = "/fckeditor/"
oFCKeditor.ToolbarSet = "yongfa365"
oFCKeditor.Width = "100%"
oFCKeditor.Height = "400"
oFCKeditor.Config("ToolbarLocation") ="Out:xToolbar"
oFCKeditor.Value = ""
oFCKeditor.Create "txtContent"
%>

-------------------------------------------------------------------------------------------------------------
FCKeditor js调用方法1

<script src="FCKeditor/FCKeditor.js"></script>
<script type="text/javascript">
var oFCKeditor = new FCKeditor( 'Content' ) ;
oFCKeditor.BasePath = 'FCKeditor/' ;
oFCKeditor.ToolbarSet = 'Basic' ;
oFCKeditor.Width = '100%' ;
oFCKeditor.Height = '400' ;
oFCKeditor.Value = '' ;
oFCKeditor.Create() ;
</script>

FCKeditor js调用方法2

<script src="FCKeditor/FCKeditor.js"></script>
<script type="text/javascript">
<!--
function showFCK(){
var oFCKeditor = new FCKeditor('Content') ;
oFCKeditor.BasePath = 'FCKeditor/' ;
oFCKeditor.ToolbarSet = 'Basic' ;
oFCKeditor.Width = '100%' ;
oFCKeditor.Height = '200' ;
oFCKeditor.Value = '' ;
oFCKeditor.ReplaceTextarea() ;
document.getElementById("btnShow").disabled = 'true';
document.getElementById("btnShow").style.display = 'none';

}
//-->
</script>
<textarea name="Content"></textarea>
<input id=btnShow style="display:inline" type=button onClick="showFCK()">

CKEDITOR+CKFINDER的图片上传配置(C#/asp教程.net/php教程)

php

keditor的代码全部重写，但里面没有了上传功能，只是一个纯粹的文件在线编辑器，如果需要上传图片，还需要下载ckfinder。

首先去官方上下载源代码，然后分别解压缩在网站根目录里（默认ckeditor和ckfinder文件夹里，一般不需要改动）

在所需要的页面插入JS

<script type=”text/网页特效” src=”/ckeditor/ckeditor.JS”></script>

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

<form action=”Sroan.php” method=”post”>

<textarea  cols=”80″ id=”editor1″ name=”editor1″ rows=”10″></textarea>

<input type=”submit” value=”Submit” />

<script type=”text/javascript”>
var editor = CKEDITOR.replace(‘timu’);
CKFinder.SetupCKEditor(editor, ‘../ckfinder/’); //ckfinder总目录的相对路径.
</script>

再修改ckfinder/config.php 里CheckAuthentication函数，返回改为ture（默认为fasle）

这样就能够实现上传功能了。

如果上面的方法不行可以试一下

1. 下载安装 CKEditor:
http://ckeditor.com/
解压下载到的CKEditor放到网站的路径中即可
2. 下载安装 CKFinder:
http://ckfinder.com/download
解压下载到的CKFinder放到与CKEditor同一目录中即可
 
3. 在网页中使用 CKEditor 和 CKFinder:
CKEditor 实际是替换一个 textarea 标签，所以把textarea放到一个form中，当提交到php服务器端，使用$_GET['xxx'] 或者 $_POST['xxx'] 取得编辑好的数据。注意，因为 CKEditor 要替换 textarea，所以相应的javascript 代码"CKEDITOR.replace(xxxxxx)" 要放在 textarea 的后面。
最简单的方法，直接新建一个test.html文件（和ckeditor、ckfinder处于同一级目录）使用下面的例子修改一下即可。在浏览器里浏览test.html就可以在网页中看到 CKEditor 了，兴奋吧。
 
 
 
 
   CKEditor
 
 
 
 
 
4. 配置CKFinder进行上传图片，Flash等。
 
到这里，点击 "Image" 按钮，在弹出的窗口中的 "Upload" 标签中已经看到上传按钮了，但是在上传文件时失败。因为CKFinder还没有配置好。需要创建上传文件的目录和修改 ckfinder/config.php 里的三个地方:
a. 创建保存上传文件的目录，如upload
（把upload文件夹也放在和ckeditor、ckfinder处于同一级目录，三个目录都位于项目目录下）
其路径为 /upload/
[For Linux: 把其权限设置为php server可读写，最简单的是 chmod 777 upload 这样php server才有权限往里面保存文件.]
 
b. 找到配置文件（ckfinder/config.php）第32行，把 function CheckAuthentication () { return false; }
修改成 function CheckAuthentication() { return true; }
 
c. 找到第63行，把 $baseUrl 的值改成保存上传文件存目录的URL，
如 $baseUrl = '/项目名/upload/';（这里的地址要从项目目录开始的绝对路径，确定上传目录已经存在）
 
d. 找到第82行，删除 $baseDir = resolveUrl($baseUrl); 修改 $baseDir 为上传文件目录的绝对路径 ，（本地测试的时候要从磁盘的跟目录下开始，即C:/或者D:/的直接目录）
如$baseDir = '/Apache2/htdocs/ck/upload/'; （Apache2是D:/盘下的直接目录）
这 是因为resolveUrl($baseUrl)函数不能正常工作。
 
至此，可以使用 CKEditor 和 CKFinder 上传文件了。
 
对上面这个小例子中服务器端的b.php代码：
 
 
header("Content-Type:text/html; charset=utf-8");
$str = $_POST['editor1'];
echo $str;
?>
 
可以看到，在点击submit按钮后，服务器端收到了CKEditor中的内容，并使用echo输出，生成一个与CKEditor里面编辑的完全一样的内容。在服务器端可以把收到的内容保存到数据库教程中。然后再读出在相应的页面显示出来。

---------------------------------------------------------------------------------------------------------

fckeditor的上传图片中，有一个可以浏览服务器目录的功能，如果在后台，是可以开放使用的，如果是前台用户访问就不要使用这个功能。
不过浏览图片不是很方便，ckfinder 就很好的简单了这个问题
fckeditor的配制如下:
修改文件：
fckeditoreditorfilemanagerconnectorsphpconfig.php

// $Config['Enabled']改过true，允许上传

$Config

[

'Enabled'

]

 =

 true

 ;

//$Config['UserFilesPath'] 设置相对于根目录的上传目录，目前来说没有用，因为实际上传在下面的配制中

$Config

[

'UserFilesPath'

]

 =

 "/upload/"

;

//$Config['UserFilesAbsolutePath']  上传的图片位置,包括根目录

$Config

[

'UserFilesAbsolutePath'

]

 =

 '/public/upload/'

 ;

设置ckfinder的config.php

$baseUrl

 =

 '/upload/'

;

// 在CheckAuthentication 改为return true,这里可以加入自己的权限判断。

function

 CheckAuthentication(

)

{

 return

 true

;

}

程序代码中使用

 $fckeditor

 =

 new

 FCKeditor(

$fckname

)

 ;

 $fckeditor

->

BasePath

 =

 '/js/fckeditor/'

 ;

//$toolbar_set 设置工具栏 默认值: Default

 $fckeditor

->

ToolbarSet

 =

 $toolbar_set

;

// $width 宽度

 $fckeditor

->

Width

     =

 $width

;

// $height 高度

 $fckeditor

->

Height

     =

 $height

;

//皮肤文件的路径

 $fckeditor

->

Config

      =

  array

(

'SkinPath'

=>

$SkinPath

)

;

 $fckeditor

->

Value

      =

 $value

;

//在fckedior这前使用CKFinder

 CKFinder::

SetupFCKeditor

(

 $fckeditor

,

 "/js/ckfinder/"

)

 ;

 $fckhtml

 =

 $fckeditor

->

Create

(

)

 ;

下面为详细的c#配置方法

CKEditor和CKFinder的最新版可以到官方网站（http://cksource.com）上下载获得。
把以上两个资源放到网站的根目录： /CKEditor 和 /CKFinder (不区分大小写)
在页面使用 CKEditor：
        <textarea cols="80" id="prcontent" name="content" rows="50">hello world!</textarea>
        <script type="text/javascript">
            CKEDITOR.replace('content', { height: 200, width: 520 });
        </script>
CKEditor 本身不自带上传功能，所以需要配合CKFinder才可以实现上传
第一步：网站需要引用CKFinder的dll（目录：/CKFinder/bin/Release/CKFinder.dll）
第二步：配置CKEditor的config.js (目录：/CKEditor/config.js ) 在CKEDITOR.editorConfig函数里加上，不需要的功能可以去掉
    config.filebrowserBrowseUrl= '/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹
    config.filebrowserImageBrowseUrl= '/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹
    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按钮(标签)
配置完成后CKEditor 就带有上传功能了，但假如上传图片时，图片的文件是用原来图片的名字，想改为随机文件名呢，怎么办？接着看第三步。
 
第三步：修改CKFinder的源码。CKFinder自带有源码，目录：/CKFinde/_source
在VS里新建一个 现在的项目 指向CKFinde/_source/CKFinder.Net.sln
1) 打开/Settings/ConfigFile.cs文件
定位27行，添加一个属性：public bool RandomReName; //随机重命名
定位67行，给刚才的属性赋值：RandomReName = true; //默认值为true
保存关闭文件
2) 打开/Connector/Config.cs文件
定位62行，添加一个属性：
        public bool RandomReName
        {
            get { return Settings.ConfigFile.Current.RandomReName; }
        }
保存关闭文件
3) 打开/Connector/CommandHandlers/FileUploadCommandHandler.cs文件
定位64行，添加一句判断代码：
                        if ( Config.Current.RandomReName)  //使用随机名
                            sFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." + sExtension;

保存关闭文件
4) 重新生成项目，把/ckfinder/_source/bin/Debug/CKFinder.dll覆盖/ckfinder/bin/Release/CKFinder.dll或者网站项目去掉之前加入的引用再重新从CKFinder.Net项目里的Dll
最后一步：打开/ckfinder/config.ascx
定位42行，添加一属性：（其实这个加不加都可以的，因为之前有设置默认值，但使用原名时一定要设置为false）
        //上传完毕后使用随机文件名
        RandomReName = true;

保存关闭
好了，到此已经配置成功了，CKEditor 可以有上传功能了。其它的功能的设置，有空再继续研究~
还要提醒一句：CKEditor 和 CKFinder 文件夹里有很多不需要的东西，例如名字带有下划线前辍的，.net项目不需要php,asp的。
如果上传文件出现错误：因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件.
需要修改config.ascx文件中
public override bool CheckAuthentication()
{
reture false;
}
修改为:
public override bool CheckAuthentication()
{
// 窗体验证时用
 return Request.IsAuthenticated;
//reture true; 不推荐使用
}

关于浏览器get post请求方式的分析

1.浏览器的请求方式
   浏览器的请求方式有很多，最典型的就是get和post方式，但你是否知道其实还有几种方式，只是我们不经常用！options,head,put,delete,trace,至于为什么现在不经常用这些方式，我想是因为get和post就可以满足我们大多数的需求吧！
2.get和post的区别
这个问题似乎大家讨论了很久，而且面试题中也时常出现这类题，但他们的最大区别到底在哪里呢
其实最主要的区别在于
get  请求用于从服务器获取信息
post请求用于改变服务器的状态
当然还有其他的不同
(1) get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到
    post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址
(2)get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制
(3)post的安全性比get高？有些人认为应为get方式请求时因为数据是加载url后面的，所以安全性不高，但其实很多工具都可以看，如firebug，所以安全性是相对的。
3.什么时候用get，什么时候用post
这就是根据他们的最大的区别来使用了
这里有一个概念叫idempotent(幂等)，对于单目运算，如果一个运算对于在范围内的所有的一个数多次进行该运算所得的结果和进行一次该运算所得的结果是一样的，那么我们就称该运算是幂等的。如abs运算就是幂等的
对于一个请求，在服务器端没有变化的情况下，相同的请求不管请求多少次，得到的数据应该是相同的，这就是幂等的，也就要用get方式，一般就是用于向服务求获取数据。当你要改变服务器状态的时候，比如对数据库教程进行增删改操作时，你就应该用post方式了
4.乱使用get和post的后果
其实现在互联网里的很多网站都没有遵循使用规范，乱用get和post，比如用<a>标签请求一个action，达到修改服务器状态的目标,因为他们没有意识到危险
直到2005年google发布了GWA（google web accelerator），这个工具是一个客户端代码，他会预先扫描用户浏览的的页面，找出其中的连接，并读取连接后面的页面并缓存，从而达到提高浏览页面速度的目的
也许你现在想到了，但我们用<a>标签的时候，如果用于请求一个action改变服务求状态的时候，那就太糟糕了，gwa会请求所有<a>标签，然后请求action！比如一个购物网站。用一个<a>的连接来把物品加入购物车，那当用户访问的时候，GWA会把所有的物品加入你的购物车
5 建议
（1）.使用表单和按钮（非超链接）来执行会改变服务器状态的操作，表单用post提交
  (2).使用确认页面
    其实最核心的一个就是:把所有具有破坏性的action放在一个post请求的后面

 

<appsettings >

    <add key="fckeditor:basepath" value="~/fckeditor/"/>

    <add key="fckeditor:userfilespath" value="/website1/uploadfiles/"/>

  </appsettings>

var _filebrowserlanguage    = 'asp教程' ;   // asp | aspx | cfm | lasso | perl | php教程 | py

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

<%@ register assembly="fredck.fckeditorv2" namespace="fredck.fckeditorv2" tagprefix="fckeditorv2" %>

<fckeditorv2:fckeditor id="onlinkeditor" runat ="server" ></fckeditorv2:fckeditor>

 

<script type="text/网页特效" src="jscripts/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript">

        tinymce.init

    (

    {

        mode: "textareas",

        theme: "advanced"

    }

    );

  

    </script>

<textarea name="content" style="width:100%">

fckeditor 的配置方法
 
首先把下回来的ckfinder放到fckeditor（就是你原来放fck的目录下，ckfinder必须有fck才可以用哦，她属于fck的一庞大插件）的饿editor目录下，然后把ckfinder目录里的bin下的ckfinder.dll拷贝到网站目录bin下。然后开始设置配置：打开ckfinder目录下的config.ascx文件
修改地方有：
1、设置访问权限

public override 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 );
        return true;//(增加这句，如果你需要设置打开ckfinder访问权限可以在这里设置哦，我这里就不考虑权限了直接打开。)
        //
        // ... where session[ "isauthorized" ] is set to "true" as soon as the
        // user logs on your system.

        //return false;//（注释这句，默认这句未被注释）
    }

2、设置文件访问目录

引用内容

baseurl = "/ckfinder/userfiles/";

这是上传文件的地址，也是ckfinder浏览文件的位置了。我们设置成

baseurl = "/fckeditor/editor/ckfinder/userfiles/";//这个路径可以自己设

3、设置生成缩略图

        thumbnails.url = baseurl + "_thumbs/";
        thumbnails.dir = "";
        thumbnails.enabled = true;
        thumbnails.maxwidth = 100;
        thumbnails.maxheight = 100;
        thumbnails.quality = 80;

具体干啥应该看参数名称就知道了吧。。。
文件后面的代码是设置上传文件类型和大小等等，大家看参数应该都可以明白，这里略过。
4、修改原fck配置文件以结合fck和ckfinder。
打开/fckeditor/目录下的fckconfig.js，到最下面：

fckconfig.linkbrowser = true ;
fckconfig.linkbrowserurl = fckconfig.basepath + 'ckfinder/ckfinder.html' ;
fckconfig.linkbrowserwindowwidth    = fckconfig.screenwidth * 0.7 ;        // 70%
fckconfig.linkbrowserwindowheight    = fckconfig.screenheight * 0.7 ;    // 70%

fckconfig.imagebrowser = true ;
fckconfig.imagebrowserurl = fckconfig.basepath + 'ckfinder/ckfinder.html?type=images' ;
fckconfig.imagebrowserwindowwidth  = fckconfig.screenwidth * 0.7 ;    // 70% ;
fckconfig.imagebrowserwindowheight = fckconfig.screenheight * 0.7 ;    // 70% ;

fckconfig.flashbrowser = true ;
fckconfig.flashbrowserurl = fckconfig.basepath + 'ckfinder/ckfinder.html?type=flash' ;
fckconfig.flashbrowserwindowwidth  = fckconfig.screenwidth * 0.7 ;    //70% ;
fckconfig.flashbrowserwindowheight = fckconfig.screenheight * 0.7 ;    //70% ;

fckconfig.linkupload = true ;
fckconfig.linkuploadurl = fckconfig.basepath +'ckfinder/core/connector/asp教程x/connector.aspx?command=quickupload&type=files' ;
fckconfig.linkuploadallowedextensions    = ".(7z|aiff|asf|avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xml|zip)$" ;            // empty for all
fckconfig.linkuploaddeniedextensions    = "" ;    // empty for no one

fckconfig.imageupload = true ;
fckconfig.imageuploadurl = fckconfig.basepath + 'ckfinder/core/connector/aspx/connector.aspx?command=quickupload&type=images' ;
fckconfig.imageuploadallowedextensions    = ".(jpg|gif|jpeg|png|bmp)$" ;        // empty for all
fckconfig.imageuploaddeniedextensions    = "" ;                            // empty for no one

fckconfig.flashupload = true ;
fckconfig.flashuploadurl = fckconfig.basepath + 'ckfinder/core/connector/aspx/connector.aspx?command=quickupload&type=flash' ;
fckconfig.flashuploadallowedextensions    = ".(swf|flv)$" ;        // empty for all
fckconfig.flashuploaddeniedextensions    = "" ;                    // empty for no one