TYPO3 8.7.11前端复用后台CKEditor的可行性问询

当然可以！在TYPO3 8.7.11里，你完全能在前端复用后台那套CKEditor，而且根本不用额外安装插件——后台已经把所有资源和配置都准备好了，咱们直接拿来用就行，完美实现前后端编辑器体验一致。

1. 先搞定资源引入 #

后台的CKEditor核心文件都存在系统自带的rte_ckeditor扩展里，直接在你的前端表单模板里引入就行：

<!-- 引入CKEditor核心JS -->
<script src="/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/ckeditor.js"></script>
<!-- 引入编辑器基础样式 -->
<link rel="stylesheet" href="/typo3/sysext/rte_ckeditor/Resources/Public/Css/ckeditor.css">

如果你的TYPO3装在子目录里，记得把路径前缀调整成你的实际安装路径哦。

2. 复用后台的编辑器配置 #

后台的CKEditor配置（比如工具栏按钮、格式选项这些）都是通过系统TSconfig或者全局设置定义的，咱们可以直接调用TYPO3的API把这套配置拿到前端来用：

• 首先在你的控制器或者模板里，用PHP代码获取后台配置：

// 实例化编辑器控制器，获取后台配置
$editorController = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(
    \TYPO3\CMS\RteCKEditor\Controller\Backend\EditorController::class
);
// 获取HTML格式的编辑器配置
$ckeditorConfig = $editorController->getConfiguration(['format' => 'html']);

• 然后把配置转成JSON，传递到前端模板里初始化编辑器：

<script>
// 把PHP传递的配置转成JS对象
var frontendEditorConfig = <?= json_encode($ckeditorConfig) ?>;
// 替换你的前端textarea元素（把ID改成你表单里的textarea ID）
CKEDITOR.replace('user-form-editor', frontendEditorConfig);
</script>

3. 让编辑内容样式和后台完全一致 #

光有编辑器还不够，得让前端编辑区的内容样式和后台一模一样，这时候需要引入后台的内容样式文件：

<!-- 引入后台基础样式 -->
<link rel="stylesheet" href="/typo3/sysext/core/Resources/Public/Css/backend.css">
<!-- 引入CKEditor内容区域样式 -->
<link rel="stylesheet" href="/typo3/sysext/rte_ckeditor/Resources/Public/Css/contents.css">

加上这两个样式后，前端编辑时看到的字体、段落、列表等样式就和后台完全同步了。

一些小提醒 #

• 如果需要给前端编辑器做个性化调整（比如去掉某个工具栏按钮），可以在获取到$ckeditorConfig后，直接修改数组里的参数，再转成JSON传给前端就行。
• 确保你的前端textarea元素在CKEditor初始化代码执行前已经加载到DOM里，不然会找不到元素哦。
• 这个方案完全适配TYPO3 8.7.11版本，因为rte_ckeditor是这个版本默认的富文本编辑器扩展，没有兼容性问题。

内容的提问来源于stack exchange，提问作者Chi