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

 更新时间:2016年9月20日 18:59  点击:1796

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; 不推荐使用
}

CKEditor是新一代的FCKeditor,是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。而CKFinder是一个功能强大的ajax文件管理器。其简单的用户界面使得各类用户,不管是从高级专业人才,还是互联网初学者,都够直观、快速学习的学习使用它。

网址:
CKEditor :http://ckeditor.com/
CKFinder :http://ckfinder.com/
CKEditor 的使用
准备工作
1. 下载CKEditor并将其解压到Web根目录下
2. 精简目录:
_samples文件夹(示例文件,可以删除)
_source文件夹(源程序文件,可以删除)
changes.html(更新列表,可以删除)
install.html(安装指向,可以删除)
license.html(使用许可,可以删除)
CKEditor的配置(config.js文件)
详细api参数见:http://docs.cksource.com/ckeditor_api/,我的默认配置

代码如下:

// 自定义 CKEditor 样式
CKEDITOR.editorConfig = function(config) {
//配置默认配置
config.language = 'zh-cn'; //配置语言
// config.uiColor = '#FFF'; //背景颜色
// config.width = 400; //宽度
// config.height = 400; //高度
// config.skin = 'v2'; //编辑器皮肤样式
// 取消 “拖拽以改变尺寸”功能
// config.resize_enabled = false;
// 使用基础工具栏
// config.toolbar = "Basic";
// 使用全能工具栏
config.toolbar = "Full";
//使用自定义工具栏
// config.toolbar =
// [
// ['Source', 'Preview', '-'],
// ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ],
// ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
// ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', SpecialChar','PageBreak'],
// '/',
// ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'],
// ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
// ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
// ['Link', 'Unlink', 'Anchor'],
// '/',
// ['Format', 'Font', 'FontSize'],
// ['TextColor', 'BGColor'],
// ['Maximize', 'ShowBlocks', '-', 'About']
// ];
};

CKEditor 的应用
1. 在 asp教程x 页面或者 master 模板页 <head> 标签中加载 ckeditor.js:
  <!-- 载入 CKEditor JS 文件 -->
<script type="text/网页特效" src="ckeditor/ckeditor.js"></script>
2. 修改页面的page指令ValidateRequest="false"
<%@ Page Language="C#" ValidateRequest="false" %>
3. 在<body>标签中使用ckeditor:
<!-- 使用 ckeditor 必须定义 class="ckeditor" -->
<asp:TextBox ID="txtContent" class="ckeditor" TextMode="MultiLine"
Text='<%# Bind("info") %>' runat="server"></asp:TextBox>
4. 获取或设置编辑器中的内容
//获取编辑器中的内容
lblView.Text=Server.HtmlEncode( this.txtContent.Text);
//设置编辑器中的内容
//txtContent.Text = Server.HtmlDecode("<h1>设置内容</h1>");

CKFinder 的使用
准备工作
1. 下载CKFinder的Asp.NET版,将其解压到Web根目录下
2. 复制/bin/Release目录下的ckfinder.dll文件至站点bin目录
3. 精简目录:
_samples文件夹(示例文件,可以删除)
_source文件夹(源程序文件,可以删除)
CKFinder的配置
1. 打开 " ckfinderconfig.ascx ",为SetConfig方法中的 BaseUrl 指定默认路径,如:
// 以userfiles 为默认路径,其目录下会自动生成images、flash等子目录。
BaseUrl = " ~/ckfinder/userfiles/";
// NOTE:注意“ ~/ ”。


2. 与CKEditor集成
打开CKEditor目录中的config.js文件在function 函数中

代码如下:

// 自定义 CKEditor 样式
CKEDITOR.editorConfig = function(config) {
……
};


加入如下内容:

代码如下:

// 在 CKEditor 中集成 CKFinder,注意 ckfinder 的路径选择要正确。
config.filebrowserBrowseUrl = location.hash + '/ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = location.hash + '/ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = location.hash+'/ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
// config.filebrowserWindowWidth = '800';
// config.filebrowserWindowHeight = '500';

CKFinder的应用
1. 在工具栏中添加站点根目录bin目录中的ckfinder.dll控件
2. 拖放控件到Web页面
3. 修改CKFinder控件属性BasePath为ckfinder目录的相对路径
常见问题
1. 症状:因为安全原因,文件不可浏览。请联系系统管理员并检查CKFinder配置文件。
原因:未设置用户身份验证或者用户未登录。
语句:

代码如下:

public override bool CheckAuthentication()
{
return false;
}

解决:在CKFinder的config.ascx文件中修改public override bool CheckAuthentication() 加入用户身份权限验证方法。
2. 症状:未知错误
原因:设置不进行用户身份验证,但是 BaseUrl 路径不对。
语句:

代码如下:

public override bool CheckAuthentication()
{
return true ;
}

解决:在CKFinder的config.ascx文件中的public override void SetConfig() 修改

// 以userfiles 为默认路径,其目录下会自动生成images、flash等子目录。
BaseUrl = " ~/ckfinder/userfiles/";
// NOTE:注意“ ~/ ”。


3. 症状:访问带有CKFinder的页面时报错“HTTP 错误 404 - Not Found”
解决:修改CKFinder控件的BasePath属性为ckfinder目录的相对路径


总结上面的教程,我们再来看一下详细的配置方法并且可以配置图片上传及安全配置

CKEditor:
1.解压CKEditor到webRoot目录,在应用页面加载其ckeditor.js ;
2.页面textarea:

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

CKFinder:
3.解压CKFinder到webRoot目录(最好与CKEditor同级),在应用页面加载其ckfinder.js ;
4.页面script:(最好textarea之后)


if (typeof CKEDITOR == ‘undefined’) {
document.write(’加载CKEditor失败’);
}
else {
var editor = CKEDITOR.replace(’editor1′);
CKFinder.SetupCKEditor(editor, ‘../ckeditor/ckfinder/’); //ckfinder总目录的相对路径.
}

整合:
(把俩js加载到同一文件其实就已经基本整合好了,还需要修改的配置如下)
5.打开ckfinderconfig.php教程,修改$baseUrl = ‘(上传附件的存放路径)’; //以webRoot为起始的绝对路径,其目录下会自动生成images、flash等子目录;默认是在webRoot的根目录下,注意修改。

至此配置完毕,如果需要自定义界面,可进行以下的高级修改:

6.在ckeditorconfig.js中的CKEDITOR.editorConfig里加入以下需要自定义的配置代码:

//字体.
    config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial; Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;';

    //工具按钮.
    config.toolbar=
        [
        ['Source','-','Save','NewPage','Preview','-','Templates'],

        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],

        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

        ['Form','Checkbox','Radio','TextField','Textarea','Select','Button',

            'ImageButton','HiddenField'],

        '/',

        ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],

        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

        ['Link','Unlink','Anchor'],

        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar',

            'PageBreak'],www.111cn.net

        '/',

        ['Styles','Format','Font','FontSize'],

        ['TextColor','BGColor'],

        ['Maximize','ShowBlocks','-','About']

    ];

    //宽度
    config.width = 500;

    //高度
    config.height = 400;

    //皮肤
    config.skin='v2';

安装CKFinder后才能有上传功能:


第二步:设置CKFinder的上传功能


由于本次CKEditor全新改版,没有提供文件上传功能,所以选择整合CKFinder是个不错的选择
需要修改一下CKEditor插件文件夹下的JS源码,以image插件为例(Flash及Files同理):
Code

//将下边的代码做一些修改
//{type:'button',id:'browse',align:'center',label:m.lang.common.browseServer,hidden:false,filebrowser:'info:txtUrl'}]}]},
//2009-07-13 将浏览服务器按钮置为显示状态 (hidden: false),增加onClick函数,用于打开ckfinder页面,紧接着上面的代码添加
{ type: 'button', id: 'browse', align: 'center', label: m.lang.common.browseServer, hidden: false, filebrowser: 'info:txtUrl', onClick: function() { var finder = new CKFinder(); finder.BasePath = '../ckfinder20090716/'; finder.SelectFunction = SetFileField; finder.Popup(); } }]}]},


在方法体外增加下边的函数
//用于取回 ckfinder 返回的图片地址并对路径文本框和预览图片进行赋值
function SetFileField(fileUrl)
{
   //获取主Div下的所有文本框控件
    var inputStr = document.getElementById("cke_txtContent_dialog").getElementsByTagName("Input");
    for(var i=0; i<inputStr.length; i++)
    {
        if(inputStr[i].type=="text")
        {
            //第一个输入框控件是图像路径,得到ID,设置新的图片路径
            CKEDITOR.document.getById(inputStr[i].id).setValue(fileUrl);
            break ;
        }
    }
    CKEDITOR.document.getById('previewImage').setAttribute('src', decodeURI(fileUrl));
}


第三步:CKFINDER上传问题:出现“因为安全原因,文件不可浏览. 请联系系统管理员并检查CKFinder配置文件“


整合后会出现“因为安全原因,文件不可浏览. 请联系系统管理员并检查CKFinder配置文件“

The Solution:

1. There is no write access for the default upload folder $baseUrl = '/userfiles/'; in ckfinder/config.php.
对于目标文件夹$baseUrl = '/userfiles/';没有写入权限

2. This is maybe because the Return value of Funcation CheckAuthentication() is always FALSE by default in ckfinder/config.php. Change the Validation Condition according to your condition, not recommend to set the return value to true directly.
因为出于安全考虑ckfinder/config.php文件中的CheckAuthentication()函数默认返回值是false, 需要手动修改验证条件, 不建议直接返回true

 

下面我们总结了常的语言开发中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()">

关于浏览器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请求的后面

fckediter:
效果图:
 
用法
首先去网上下载fckediter,然后按着这四步来:
1.复制fckeditor到网站跟目录下
2.复制fredck.fckeditorv2.dll到bin目录下,再添加引用
3.配web.config和fckconfig.js
  (1)apps教程ettings中添加
<appsettings >

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

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

</appsettings>
  (2)在fckconfig.js中找到fckconfig.defaultlanguage=en,修改为zh-cn。接着设置你所使用的语言
var _filebrowserlanguage = 'asp教程' ; // asp | aspx | cfm | lasso | perl | php教程 | py

var _quickuploadlanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
4.使用
<%@ register assembly="fredck.fckeditorv2" namespace="fredck.fckeditorv2" tagprefix="fckeditorv2" %>

<fckeditorv2:fckeditor id="onlinkeditor" runat ="server" ></fckeditorv2:fckeditor>
 tiny_mce:
首先看一下tiny_mce的效果图:
 
用法:
tiny_mce有自己的网站,先去官网下载文件,使用步骤也是很简单的:
1:在页面引用tiny_mce.js文件
<script type="text/网页特效" src="jscripts/tiny_mce/tiny_mce.js"></script>
2:在页面注册tinymce.init
<script type="text/javascript">

tinymce.init

(

{

mode: "textareas",

theme: "advanced"

}

);



</script>
3:最后使用就可以了:
<textarea name="content" style="width:100%">
 
[!--infotagslink--]

相关文章

  • ASP.NET购物车实现过程详解

    这篇文章主要为大家详细介绍了ASP.NET购物车的实现过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
  • 使用PHP+JavaScript将HTML页面转换为图片的实例分享

    这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19
  • php抓取网站图片并保存的实现方法

    php如何实现抓取网页图片,相较于手动的粘贴复制,使用小程序要方便快捷多了,喜欢编程的人总会喜欢制作一些简单有用的小软件,最近就参考了网上一个php抓取图片代码,封装了一个php远程抓取图片的类,测试了一下,效果还不错分享...2015-10-30
  • C#从数据库读取图片并保存的两种方法

    这篇文章主要介绍了C#从数据库读取图片并保存的方法,帮助大家更好的理解和使用c#,感兴趣的朋友可以了解下...2021-01-16
  • Photoshop古装美女图片转为工笔画效果制作教程

    今天小编在这里就来给各位Photoshop的这一款软件的使用者们来说说把古装美女图片转为细腻的工笔画效果的制作教程,各位想知道方法的使用者们,那么下面就快来跟着小编一...2016-09-14
  • Python 图片转数组,二进制互转操作

    这篇文章主要介绍了Python 图片转数组,二进制互转操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
  • 利用JS实现点击按钮后图片自动切换的简单方法

    下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
  • 在ASP.NET 2.0中操作数据之七十二:调试存储过程

    在开发过程中,使用Visual Studio的断点调试功能可以很方便帮我们调试发现程序存在的错误,同样Visual Studio也支持对SQL Server里面的存储过程进行调试,下面就让我们看看具体的调试方法。...2021-09-22
  • jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮

    jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮...2013-10-13
  • js实现上传图片及时预览

    这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
  • Photoshop枪战电影海报图片制作教程

    Photoshop的这一款软件小编相信很多的人都已经是使用过了吧,那么今天小编在这里就给大家带来了用Photoshop软件制作枪战电影海报的教程,想知道制作步骤的玩家们,那么下面...2016-09-14
  • python opencv通过4坐标剪裁图片

    图片剪裁是常用的方法,那么如何通过4坐标剪裁图片,本文就详细的来介绍一下,感兴趣的小伙伴们可以参考一下...2021-06-04
  • 使用PHP下载CSS文件中的图片的代码

    共享一段使用PHP下载CSS文件中的图片的代码 复制代码 代码如下: <?php //note 设置PHP超时时间 set_time_limit(0); //note 取得样式文件内容 $styleFileContent = file_get_contents('images/style.css'); //not...2013-10-04
  • 微信小程序如何获取图片宽度与高度

    这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
  • ASP.NET Core根据环境变量支持多个 appsettings.json配置文件

    这篇文章主要介绍了ASP.NET Core根据环境变量支持多个 appsettings.json配置文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22
  • PHP swfupload图片上传的实例代码

    PHP代码如下:复制代码 代码如下:if (isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) { $upload_file = $_FILES['Filedata']; $fil...2013-10-04
  • 记一次EFCore类型转换错误及解决方案

    这篇文章主要介绍了记一次EFCore类型转换错误及解决方案,帮助大家更好的理解和学习使用asp.net core,感兴趣的朋友可以了解下...2021-09-22
  • ps怎么制作图片阴影效果

    ps软件是现在很多人比较喜欢的,有着非常不错的使用效果,这次文章就给大家介绍下ps怎么制作图片阴影效果,还不知道制作方法的赶紧来看看。 ps图片阴影效果怎么做方法/...2017-07-06
  • C#中图片旋转和翻转(RotateFlipType)用法分析

    这篇文章主要介绍了C#中图片旋转和翻转(RotateFlipType)用法,实例分析了C#图片旋转及翻转Image.RotateFlip方法属性的常用设置技巧,需要的朋友可以参考下...2020-06-25
  • OpenCV如何去除图片中的阴影的实现

    这篇文章主要介绍了OpenCV如何去除图片中的阴影的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-29