FCKeditor|Smarty编辑器|PHP项目实战整合教程

FCKeditor与Smarty整合的核心逻辑：先理清楚“数据流”

要解决整合问题，得先搞明白这俩工具的“分工”：FCKeditor是帮用户输入富文本内容（比如商家简介里的加粗、图片、换行），Smarty是把这些内容“贴”到模板里展示给用户看。两者的矛盾，本质是“数据从哪里来，到哪里去”的规则冲突——FCKeditor有自己的文件路径、内容格式规则，Smarty也有自己的模板渲染、变量转义规则，要是不把这些规则对齐，肯定出问题。

我去年踩的第一个坑，就是“路径冲突”。朋友的项目里，FCKeditor的文件上传路径设的是“/uploads/”（相对站点根目录），但Smarty的模板文件存在“/templates/shop/”子目录里。结果用户在FCKeditor里上传一张图片，路径是“/uploads/20230512.jpg”，但Smarty渲染模板的时候，会把模板里的相对路径当成从“/templates/shop/”出发——也就是说，图片路径变成了“/templates/shop/uploads/20230512.jpg”，自然找不到文件。那时候我盯着浏览器的404错误看了半小时，才反应过来是路径的“相对基准”不一样：FCKeditor的相对路径是相对于站点根目录，而Smarty模板里的相对路径是相对于模板文件所在目录。后来我把FCKeditor的BaseURL改成了绝对URL（比如“http://localhost/uploads/”），这样不管模板在哪，图片路径都是绝对的，直接指向站点根目录的uploads文件夹，问题才解决。

再比如“内容转义”的坑——FCKeditor的内容是带HTML标签的（比如

、），而Smarty默认会把变量里的HTML标签转成实体字符（比如把

变成

）。我第一次整合的时候，直接把FCKeditor的内容存进数据库，然后用Smarty的{$shop_intro}渲染，结果页面上显示的全是“

商家简介

”这种乱码。后来查Smarty文档才知道，这是Smarty的“自动转义”功能在起作用——它本来是为了防止XSS攻击，但富文本内容需要保留HTML标签，所以得关掉这个功能。不过不能全局关（不然其他变量有安全风险），最好的办法是给富文本变量加nofilter修饰符，比如{$shop_intro nofilter}，这样Smarty就会原封不动地渲染HTML标签了。

其实 整合的核心就是“让FCKeditor的输出，符合Smarty的输入要求”——要么调整FCKeditor的配置（比如路径、内容格式），要么调整Smarty的规则（比如转义、模板路径），把两者的“数据流”打通。

实战：从0到1整合的“三步法”，我帮3个项目用过都有效

光讲逻辑不够，直接给你一套能落地的步骤——这是我帮朋友的本地生活平台、美食博客、企业官网三个项目验证过的，只要跟着做，90%的问题都能解决。

第一步：给FCKeditor做“定向配置”，解决“路径”和“上传”问题

下载FCKeditor的PHP版本（官网：https://fckeditor.net/nofollow，注意选“PHP”版本），解压后放到项目根目录，比如命名为“fckeditor”文件夹。然后，修改FCKeditor的核心配置文件fckeditor/config.php，重点改3个地方：

改完配置后，在PHP页面里初始化FCKeditor——比如商家简介编辑页edit_shop.php：

<?php 
require_once('fckeditor/fckeditor.php');

// 初始化FCKeditor，name属性是“shop_intro”（对应表单提交后的$_POST['shop_intro']）
$oFCKeditor = new FCKeditor('shop_intro');
// BasePath是FCKeditor文件夹的相对路径（相对于站点根目录）
$oFCKeditor->BasePath = '/fckeditor/';
// （可选）设置编辑器高度
$oFCKeditor->Height = 400;
// 生成编辑器的HTML代码
$oFCKeditor->Create();
?>

这一步要注意：BasePath必须是相对于站点根目录的路径——比如如果FCKeditor文件夹在根目录下，就是“/fckeditor/”；如果在子目录“libs/fckeditor”里，就是“/libs/fckeditor/”。要是写错了，FCKeditor会显示不出来，浏览器控制台会报“404 Not Found”错误（找不到fckeditor.js）。

第二步：PHP里“正确传递”数据，兼顾“安全”和“兼容”

用户在FCKeditor里输入内容后，点提交按钮，PHP要做两件事：安全存储和传递给Smarty。

富文本内容里可能有、这样的危险标签（会导致XSS攻击），也可能有SQL注入的风险，所以得先过滤再存储。我一般用两个工具：

举个完整的例子（save_shop.php）：

<?php 
// 
连接数据库（PDO方式）
$dsn = 'mysql:host=localhost;dbname=myproject;charset=utf8';
$username = 'root';
$password = '123456';
try {
 $pdo = new PDO($dsn, $username, $password);
 $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
 die('数据库连接失败：' . $e->getMessage());
}
// 
获取FCKeditor的内容
$raw_content = $_POST['shop_intro']; // 注意：这里的name要和FCKeditor的name属性一致
// 
用HTML Purifier过滤危险标签
require_once('htmlpurifier/HTMLPurifier.auto.php');
$config = HTMLPurifier_Config::createDefault();
// （可选）允许上传的图片格式（默认已经允许jpg、png、gif）
$config->set('HTML.Allowed', 'p,strong,em,img[src|alt],a[href|target]');
$purifier = new HTMLPurifier($config);
$clean_content = $purifier->purify($raw_content); // 过滤后的安全内容
// 
存储到数据库（预处理语句）
try {
 $stmt = $pdo->prepare("UPDATE shops SET intro = intro WHERE id = id");
 $stmt->bindParam(':intro', $clean_content);
 $stmt->bindParam(':id', $_POST['shop_id']); // 假设从表单获取商家ID
 $stmt->execute();
 echo '保存成功！';
} catch (PDOException $e) {
 echo '保存失败：' . $e->getMessage();
}
?>

这里要注意：HTML Purifier的配置可以根据需求调整——比如要是你想允许用户插入视频，可以加iframe[src|width|height]到HTML.Allowed里，但要注意限制视频源（比如只允许YouTube、B站的链接），避免安全问题。

把数据库里的内容取出来，传递给Smarty——比如商家详情页shop_detail.php：

<?php 
// 
初始化Smarty
require_once('smarty/Smarty.class.php');
$smarty = new Smarty();
// 设置模板目录（模板文件存放在这里）
$smarty->setTemplateDir('./templates/');
// 设置编译目录（Smarty会把模板编译成PHP文件，存放在这里）
$smarty->setCompileDir('./templates_c/');
// 设置缓存目录（可选，开启缓存能提高性能）
$smarty->setCacheDir('./cache/');
// 开启缓存（可选，生产环境 开启）
// $smarty->caching = Smarty::CACHING_LIFETIME_CURRENT;
// 
从数据库取内容
$shop_id = $_GET['id']; // 从URL获取商家ID（比如http://localhost/shop_detail.php?id=1）
$stmt = $pdo->prepare("SELECT intro FROM shops WHERE id = id");
$stmt->bindParam(':id', $shop_id);
$stmt->execute();
$shop = $stmt->fetch(PDO::FETCH_ASSOC);
$clean_content = $shop['intro']; // 已经过滤过的安全内容
// 
把内容赋值给Smarty变量
$smarty->assign('shop_intro', $clean_content);
// （可选）赋值其他变量，比如商家名称
$smarty->assign('shop_name', $shop['name']);
// 
渲染模板（使用shop_detail.tpl模板文件）
$smarty->display('shop_detail.tpl');
?>

这一步要注意：Smarty的目录设置——setTemplateDir是模板文件的存放目录（比如./templates/），setCompileDir是编译后的模板缓存目录（需要有写入权限，不然会报错）。要是你用Composer安装Smarty，路径可能是vendor/smarty/smarty/Smarty.class.php，记得调整require_once的路径。

第三步：Smarty模板“精准渲染”，确保内容显示正确

最后一步是修改Smarty模板文件（比如templates/shop_detail.tpl），重点就一句话：给富文本变量加nofilter修饰符。

模板文件的内容大概是这样的：

{$shop_name}
 <!-
富文本内容渲染：必须加nofilter >


 {$shop_intro nofilter}




为什么要加nofilter？因为Smarty默认会转义HTML标签——比如把
商家简介
转成
商家简介，这样页面上显示的就是纯文本，没有格式。加了nofilter之后，Smarty就会原封不动地渲染HTML标签，富文本的格式（比如加粗、换行、图片）才能正常显示。

对了，我上个月帮美食博客整合的时候，还遇到过“FCKeditor的图片在HTTPS下不显示”的问题——后来查了才知道，是因为项目用了HTTPS，但FCKeditor的BaseURL用了HTTP，浏览器拦截了不安全的请求。解决办法也简单：把BaseURL改成协议相对路径（比如//localhost/uploads/），这样不管是HTTP还是HTTPS，都会自动适配。
现在你要是动手试的话，大概率能一次成功——要是遇到问题，先查这几个点：FCKeditor的BaseURL是不是绝对URL？Smarty变量有没有加nofilter？文件上传路径是不是服务器绝对路径？这些都是我踩过的坑，解决了就通了。对了，要是觉得FCKeditor有点老，也可以试试CKEditor（它是FCKeditor的升级版），整合逻辑一模一样，只是配置文件位置变了而已——比如CKEditor的配置文件是ckeditor/config.js，而FCKeditor是fckeditor/config.php。
你要是按这些步骤试了，不管成功还是遇到新问题，都可以在评论区告诉我——我去年踩过的坑比这篇文章的字还多，说不定能帮你搭把手。 整合这种事，踩过坑的人讲的经验，比看文档管用10倍。

富文本内容存进数据库之前，最关键的是把“危险”的东西拦下来，不然轻则页面乱掉，重则整个数据库被黑。我一般会做两层过滤，先说说第一层——防SQL注入。你想啊，用户在FCKeditor里输入的内容，比如商家简介里可能有个单引号“'”，要是直接把内容拼到SQL语句里，比如“INSERT INTO shops (intro) VALUES ('$content')”，这单引号会把SQL语句的引号提前闭合，后面要是跟着“DROP TABLE”这种命令，数据库直接就崩了。所以必须用PDO的预处理语句，先写好带占位符的SQL（比如“INSERT INTO shops (intro) VALUES (:intro)”），再把用户输入的内容绑定到占位符上——数据库会把这些内容当成纯文本，不会执行里面的任何SQL命令，这样就把注入风险堵死了。
 
再来说第二层，过滤危险的HTML标签。富文本内容本来就带HTML，比如
、这些是正常的，但要是有人故意写个alert('偷你cookie')，或者，这内容存进数据库再渲染出来，用户打开页面就会中弹——要么弹警告框，要么跳转到钓鱼网站。这时候就得用HTML Purifier这个工具，它是专门干“净化HTML”的，像WordPress、Drupal这些大系统都在用。它的好处是能保留正常的富文本格式（比如你加粗的文字、插入的图片），但会把、这种危险标签直接删掉。比如用户输入的内容里有“alert(1)我是商家简介”，经过HTML Purifier处理后，就只剩“我是商家简介”，但如果是“
我是商家简介
”，处理后这些正常标签都会保留——既安全又不破坏原来的格式，正好符合富文本的需求。

整合后FCKeditor上传的图片不显示，怎么办？
首先检查FCKeditor配置文件（fckeditor/config.php）中BaseURL是否设为绝对URL（如http://localhost/uploads/）或协议相对路径（如//localhost/uploads/），解决Smarty模板因相对路径基准不同导致的路径错误。同时确认BaseDir（服务器文件存储绝对路径）有写入权限，且图片确实上传至对应目录。最后检查Smarty模板中是否直接使用FCKeditor输出的绝对路径，无需额外拼接。
 
Smarty渲染FCKeditor内容时出现HTML实体字符（如
），怎么解决？

这是Smarty默认“自动转义”功能导致的，需给模板中的富文本变量添加nofilter修饰符（如{$shop_intro nofilter}），让Smarty跳过HTML标签转义，保留FCKeditor的原始格式。注意不要全局关闭自动转义，避免其他变量的安全风险。
 
富文本内容存储前需要做哪些安全处理？
需做两层过滤：

防SQL注入：用PDO预处理语句绑定参数，避免直接拼接SQL；

过滤危险HTML：用HTML Purifier库（WordPress等系统常用），保留正常富文本格式（如
、），过滤、等危险标签。这样既能保证内容安全，又不破坏富文本结构。
 
能用FCKeditor的升级版CKEditor替代吗？整合逻辑一样吗？
可以。CKEditor是FCKeditor的官方升级版（功能更全、界面更现代），整合逻辑完全一致——核心都是“打通编辑器输出与Smarty输入规则”。只需调整配置文件位置（CKEditor的配置文件是ckeditor/config.js，FCKeditor是fckeditor/config.php），其他步骤（路径配置、变量传递、安全过滤）均通用。
 
项目用了HTTPS，FCKeditor的图片显示不了怎么办？
将FCKeditor的BaseURL从HTTP协议（如http://localhost/uploads/）改为协议相对路径（如//localhost/uploads/），浏览器会自动适配HTTPS环境，避免“混合内容（HTTPS页面加载HTTP资源）”被拦截。同时确认SSL证书有效，且图片路径未被CDN或反向代理修改。

YUANLEISVIP

收藏 链接