`
jiakechong
  • 浏览: 208199 次
社区版块
存档分类
最新评论

PHP环境下配置在线编辑器FCKedit

阅读更多
PHP环境下配置在线编辑器FCKedit


免费的FCKeditor2.6.3在PHP程序中的安装配置及使用方法,简单,看了就会

FCKeditor就不用多介绍了吧,一款强大的免费的web在线编辑器。本文将简单的讲下FCKeditor2.6.3在PHP程序中的安装配置方法,很简单的教程,相信你看了就会!首先到FCKeditor官方网站上下载FCKeditor的最新版本FCKeditor2.6.3多国语言版,当然你还可以看下官方的效果演示::http://www.fckeditor.net/demo。呵呵!很强大吧!

下载完成了之后解压到网站的根目录就算是安装了吧,重要的是配置它,才可以在程序中调用它。请跟我一起开始吧:

一、给下载下来的FCKeditor减下肥,因为安装包中有许多不需要的文件(当然也有别人精简好了直接下载下来就可以用的);
1、保留根目录fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml、fckeditor_php4.php、fckeditor_php5.php及fckeditor.php其他的文件都删掉;
2、删除目录/editor/_source(事实上,所有_开头的文件夹或文件都是可以删除的);
3、删除/editor/filemanager/browser/default/connectors/下除PHP目录的所有目录
4、删除/editor/lang/下的除了 en.js, zh.js, zh-cn.js三个文件的所有文件

二、启用中文语言包;
用Editplus打开FCKeditor目录下的fckconfig.js,修改第62行 FCKConfig.DefaultLanguage  = ‘en’ ;将en改为zh-cn,即FCKConfig.DefaultLanguage  = ‘zh-cn’ ;启用中文包;
注:在FCKeditor2.6.3中,默认的支持的语言即为PHP,所以不用修改第276,277行。如果需要支持其他语言,请修改这里。

三、启用PHP文件上传功能(注意:FCKeditor2.6.3与早期版本的filemanager目录不同)
打开fckeditor/editor/filemanager/connectors/php/config.php
启用文件上传:第30行找到:$Config['Enabled'] = false 改成: $Config['Enabled'] = true
设置上传存放目录:第34行找到:$Config['UserFilesPath'] = ‘/userfiles/’ 改成: $Config['UserFilesPath'] = ‘改你自己的路径’

四、使用实例
实例文件可以下载使用或者拷贝!
html代码:

   1. <?php
   2. @ $db = new mysqli('localhost','root','123456','mystudy_demo');
   3. if(mysqli_connect_errno()){
   4. echo "数据库出错";
   5. }else{
   6. echo "数据库链接成功";
   7. }
   8. //用$_POST['FCKeditor1']获取提交上来FCKeditor1中的数据,
   9. $fck = $_POST["FCKeditor1"] ;
  10. if ( $fck != "" )
  11. {
  12. $query = "insert into webedit values ('".rand()."','".$fck."')";
  13. $result = $db->query($query);
  14. if($result){
  15. echo "数据插入成功";
  16. }else{
  17. echo "数据插入失败";
  18. }
  19. //显示刚才输入的数据
  20. echo "你刚才输入的数据:".$fck;
  21. }
  22. ?>
  23. 
  24. <form action="" method="post">
      
      <?php
      include("fckeditor/fckeditor.php");//加载FCKeditor文件
      $oFCKeditor = new FCKeditor('con');//创建一个FCKeditor对象 ID为FCKeditor1
      $oFCKeditor ->BasePath = "/FCKeditor/";//设置FCKeditor路径
      $oFCKeditor ->Value = '这家伙很懒,什么都没留下...';//设置默认值
      //工具按钮设置
      $oFCKeditor->ToolbarSet='Basic';
      //设置它的宽度
      $oFCKeditor->Width='100%';
      //设置它的高度
      $oFCKeditor->Height='300px';
      $oFCKeditor->create();//创建。注意:若用到模板(如smarty)则$fck = $oFCKeditor->CreateHtml();然后把$fck抛给模板,当然你还可以使用更多的参数
      ?>
      
      <input type="submit" value="提交测试" /> </form>
  25.

      <font color=red size=4>输出打印结果:<?=$_POST["con"]?>

关于编辑器按钮配置请看这篇文章:免费的 FCKeditor 编辑器按钮设置详细说明

================================================

PHP环境下配置在线编辑器FCKeditor


    FCKeditor 是一个十分强大的网页文本编辑器,它支持多种脚本编程语言和支持多国语言.如果你还不知道或者你知道还不会配置这个的话,请你继续往下看.
我用是FCKeditot的版本是2.6,官方网站上去下载 http://www.FCKeditor.net/
本文介绍的是关于php的配置方法,其他语言略有不同.
假设网站的目录为: \FCKeditor

一:调用FCKeditor的两种方法
1:通过创建实例
   在这里只写调用它的代码了,网站的其他代码当然由你自己写了,把下面的代码加在应该加的地方.
<?php include_once("FCKeditor/fckeditor.php"); //引用FCKeditor.php这个文件
$FCKeditor=new FCKeditor(''welefen''); //创建FCKeditor对象的实例
$FCKeditor->BasePath=''FCKeditor/''; //FCKeditor所在的位置,这里它的位置就是''FCKeditor/'';
$FCkeditor->ToolbarSet=''Default''; //工具按钮设置
$FCKeditor->Width=''100%''; //设置它的宽度
$FCKeditor->Height=''300px''; //设置它的高度
$FCkeditor->Create(); ?>
2:通过iframe调用创建
   在你认为该加的地方加上 <INPUT id=content style="DISPLAY: none" type=hidden name="welefen"> <INPUT id=content___Config style="DISPLAY: none" type=hidden> <IFRAME id=content___Frame src="FCKeditor/editor/fckeditor.html?InstanceName=welefen&amp;Toolbar=Default" frameBorder=0 width=100% scrolling=no height=300> </IFRAME>

对上述两种方法的说明:


在上述两种方法中,你都看到了字符串''welefen'',你可能不知道是什么意思,现在我给你解释一下如果你要将文本编辑器中的内容在另外一个页面显示或者要将在它保存在数据库,你可以用 $_POST[''welefen'']或者用$_GET[''welefen'']来获取文本编辑器中的内容,具体是用post还是用get那要看你用的是什么传递方法了 当然你也可以把welefen改成你想要用的,如''content''.
如果你还不知道什么是ajax,那么这一段话你就不用看了. 当你用ajax的来获得内容的时候是不是发现得不到内容,如: <script>alert(document.form.content.value)</script>你会发现谈出的窗口没内容 那么我们可以通过下面的代码来获得它的内容: function getContentValue() { var oEditor = FCKeditorAPI.GetInstance(''content'') ; var acontent=oEditor.GetXHTML(); return acontent; }


二:配置一些文件

1:fckconfig.js的配置
   (1).工具按钮设置
查找FCKConfig.ToolbarSets["Default"],这里有很多按钮,下面我们将对他们详细介绍
EditSource 显示HTML源代码
StrikeThrough 删除线
Save 保存
Subscript 下标
NewPage 新建空白页面
Superscript 上标
Preview 预览
JustifyLeft 左对齐
Cut 剪切
JustifyCenter 居中对齐
Copy 复制
JustifyRight 右对齐
Paste 粘贴
JustifyFull 两端对齐
PasteText 纯文本粘贴
InsertOrderedList 自动编号
PasteWord 来自Word的粘贴
InsertUnorderedList 项目符号
Print 打印 Outdent 减少缩进
SpellCheck 拼写检查
Indent 增加缩进
Find 查找
ShowTableBorders 显示表格线
Replace 替换
ShowDetails 显示明细
Undo 撤销
Form 添加
Form动作
Redo 还原
Checkbox 复选框
SelectAll 全选
Radio 单选按钮
RemoveFormat 去除格式
Input 单行文本框
Link 插入/编辑 链接
Textarea 滚动文本框
RemoveLink 去除连接
Select 下拉菜单
Anchor 锚点
Button 按钮
Image 插入/编辑 图片
ImageButton 图片按钮
Table 插入/编辑 表格
Hidden 隐藏
Rule 插入水平线
Zoom 显示比例
SpecialChar 插入特殊字符
FontStyleAdv 系统字体
UniversalKey 软键盘
FontStyle 字体样式
Smiley 插入表情符号
FontFormat 字体格式
About 关于
Font 字体
Bold 粗体
FontSize 字体大小
Italic 斜体
TextColor 文字颜色
Underline 下划线
BGColor 背景色
这个默认的是包含了所有的工具按钮,不过到我们具体要用的时候,有的按钮并不需要,而且还影响速度.那么我们可以将我们不需要的按钮给删了.下面是我的配置,给大家一个参考,当然你可以根据你的喜好. FCKconfig.ToolbarSets["Default"] = [ [''EditSource'',''Save'',''NewPage'',''Preview'',''-'',''Cut'',''Copy'',''Paste'',''PasteText'',''-'',''Find'',''Replace'',''-'',''Undo'',''Redo'',''-'',''SelectAll'',''-'',''Link'',''RemoveLink'',''-'',''Image'',''Table'',''Rule'',''SpecialChar'',''Smiley''] , [''Bold'',''Italic'',''Underline'',''-'',''JustifyLeft'',''JustifyCenter'',''JustifyRight'',''-'',''InsertOrderedList'',''InsertUnorderedList'',''-'',''Form'',''Checkbox'',''Radio'',''Input'',''Textarea'',''Select'',''Button'',''-'',''FontStyleAdv'',''TextColor''] ] ;
如果在前台给用户回复一写帖子的话,还是没必要要上面的,这时你可以在加一个: FCKConfig.ToolbarSets["Basic"] = [ [''Bold'',''Italic'',''-'',''OrderedList'',''UnorderedList'',''-'',''Link'',''Unlink'',''-'',''About''] ] ;
这样的话,你在前台调用的时候就要用$FCKeditor->ToolbarSet=''Basic'',不能在为"Default"了.

   (2):语言的配置
查找FCKConfig.DefaultLanguage将它设置为''zh-cn''.

   (3):脚本语言的设置
查找var _FileBrowserLanguage和var _QuickUploadLanguage将他们设置为''php'', 默认是''asp'',如果这里不设置的话,图片将不能上传,这点很重要.当时我在用FCKeditor由于没配置这个,不能上传图片,而我同寝室的用 asp能上传图片,让我烦恼了好多天,最后终于找到是这个原因.

2:图片上传的配置
打开文件FCKeditor/editor/filemanager/browser/default/connectors/php /config.php 查找$Config[''Enabled''],将它设置为''true'' 查找$Config[''UserFilesPath''],将它设置图片的目录,这个目录是相对于主目录的 //例如:我写了一个blog,就可以设置为/blog/upload/
打开文件FCKeditor/editor/filemanager/upload/php/config.php 查找$Config[''Enabled''],将它设置为''true'' 查找$Config[''UseFileType''],将它设置上传文件的目录,最好与上面的图片目录相同
好了,现在所有的配置都已经完成了,现在你要做的只是删除一些不必要的文件了 只要包含''_''的目录名和文件名都可以删除,当然你用的是php,其他语言的一些目录也都可以删除,这样就减小了文件的大小.
FCKEDITOR的FCKeditor_2.6\fckeditor\_samples下有各种语言使用的例子
关键要注意设置BasePath正确,否则找不到文件.


文章出处:http://www.diybl.com/course/4_webprogram/php/phpjs/2008515/116129.html







/------------------------------特别说明:--------------------------------
--------------------------JS验证FCKeditor控件的值--------------------------------
--------------------------------------------------------------------------
<? php
  $oFCKeditor = new FCKeditor('FCKeditor1');//创建一个FCKeditor对象 ID为FCKeditor1
?>
1 在js里

   funciton check() {
   var value = FCKeditorAPI.GetInstance('FCKeditor1').GetXHTML(true); //取直
   
   //而不是 var value = Form1.FCKeditor1.value
   }

  2 以下是设值的办法

FCKeditorAPI.GetInstance(ClientID).SetHTML("字符串")

所以想要在FCKeditor中利用JS插入一段字符串可以这样做:

FCKeditorAPI.GetInstance('FCKeditor1').SetHTML(FCKeditorAPI.GetInstance(''FCKeditor1'').GetXHTML(true) + "插入的字符串")

}
分享到:
评论

相关推荐

    fckedit 编辑器

    2. **配置**:配置编辑器的基本设置,如路径、语言、允许的文件类型等,通常通过修改配置文件如`fckeditor.config.js`完成。 3. **调用**:在PHP页面中引入编辑器的JavaScript文件,通过创建实例来加载编辑器,如`...

    FCKedit两种使用方法

    2. **调整配置**:在FCKeditor的`fckconfig.js`文件中,你可以配置编辑器的行为,例如文件上传路径、允许的文件类型等。 3. **服务器端代码**:根据所选的服务器端语言,你需要编写处理文件上传、链接生成等业务...

    fckedit的使用

    FCKeditor(现称为FCKeditor,后文统一使用新名称FCKeditor)是一款功能强大的在线HTML编辑器,它为用户提供了一个直观且易于使用的富文本编辑环境。FCKeditor适用于各种Web应用程序,支持多种编程语言如ASP.NET、...

    针对PHP环境下Fckeditor编辑器上传图片配置详细教程

    在PHP环境中,FCKeditor是一款常用的富文本编辑器,它提供了方便的图片上传功能。本文将详细介绍如何配置FCKeditor以实现图片上传,并解决相关问题。 首先,要启用FCKeditor的图片上传功能,因为默认情况下,出于...

    fckeditor 2.6.3 PHP 精简优化版(附使用说明)

    **fckeditor 2.6.3 PHP 精简优化版**是一款强大的在线文本编辑器,主要用于在网页上实现类似Word的功能,让用户可以方便地在Web应用中编辑内容。此版本是针对原版进行的优化,提升了性能并解决了已知问题。 首先,...

    FCKeditor 一个应用很广泛的在线编辑器

    3. **fckedit(aspnet精简完整包)**: 这是为ASP.NET平台准备的FCKeditor的精简版,包含用于在.NET环境中集成编辑器所需的全部组件和示例代码。 4. **FCK**: 这个文件或文件夹可能包含更多关于FCKeditor的信息,比如...

    FCK在线编辑器源码及部署项目引用示例

    4.将以下代码添加到web.xml配置文件中: &lt;servlet-name&gt;Connector com.FCKeditor.connector.ConnectorServlet &lt;param-name&gt;baseDir &lt;param-value&gt;/upload/ &lt;param-name&gt;debug &lt;param-value&gt;true ...

    VS2010 FCKEdit使用方法

    FCKeditor 是一款开源的富文本编辑器,广泛应用于Web应用程序中,为用户提供类似桌面文字处理软件的编辑体验。在Visual Studio 2010 (VS2010) 中集成FCKeditor,可以提升开发者的编辑效率,为用户创建更丰富的交互...

    web 编辑器 三级联动 程序创建数据 demo

    在IT领域,Web编辑器是用于网页内容创作的重要工具,它们允许用户在浏览器环境中进行文本编辑、格式化和媒体插入等操作。FCKEdit(现称为CKEditor)是一款开源的JavaScript富文本编辑器,它提供了丰富的功能,如字体...

    FCKeditor_2.6.4.1包

    此外,还可以通过编程方式动态配置编辑器的行为。 6. **安全性考量** 虽然FCKeditor提供了丰富的功能,但使用时也需注意安全性问题,比如XSS攻击。因此,开发者在接收和处理用户提交的富文本内容时,应进行适当的...

    FCKeditor_2.5.zip

    - `fckconfig.js`:编辑器的配置文件,可以在这里调整默认设置。 - `fckeditor.html`:编辑器的启动页面,用于在网页中预览和编辑内容。 - `editor` 目录:包含编辑器的核心组件,如CSS样式、JavaScript文件、图片...

Global site tag (gtag.js) - Google Analytics