[从Symfony 5网站,我安装了有用的捆绑软件fosckeditor。 (CKEDITOR版本4)
一切正常,我在页面上看到CKEDITOR字段。现在,我想创建一个新的简单插件。
我认真地遵循了这个official guide,并在<symfony_root_dir>/public/bundle/fosckeditor/plugins/
中创建了一个名为'timestamp'的新插件,其中包含一些文件:
在plugin.js中,我添加以下代码:
CKEDITOR.plugins.add( 'timestamp', {
icons: 'timestamp',
init: function( editor ) {
alert('hello test ?'); // this alert appears when I load the page containing the CKEDITOR
editor.addCommand('insertTimestamp', {
exec: function (editor) {
var now = new Date();
editor.insertHtml('The current date and time is: <em>' + now.toString() + '</em>');
}
});
editor.ui.addButton('timestamp', {
label: 'Insert Timestamp',
command: 'insertTimestamp',
toolbar: 'insert'
})
}
});
并且,在<symfony_root_dir>/public/bundle/fosckeditor/config.js
中,我添加了:
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = ['timestamp'];
// same result if instead I add the custom plugin via a string : config.extraPlugins = 'timestamp';
};
对于这个简单的示例,我从另一个插件复制/粘贴了一个图标,这是时间戳图标文件:
最后,我重新加载页面(重新加载+清除缓存)。但是Ckeditor工具栏不会更改,自定义插件将无处显示
我试图将按钮添加到fos_ckeditor.yaml
文件中,如下所示:
# ...
fos_ck_editor:
# ...
default_config: main_config
configs:
main_config:
# ...
toolbar:
- {
items:
['timestamp']
}
styles:
# ...
但是我的自定义插件的按钮在我的Ckeditor工具栏中一直不见了...我没有在调试器浏览器中出现JavaScript错误,也没有在哪里弄错。.
尝试此配置:
app / templates / ckeditor.html.twig
{% extends "base.html.twig" %}
{% block body %}
<div class="ckeditor">
{{ form_start(form) }}
{{ form_row( form.content ) }}
{{ form_end(form) }}
</div>
{% endblock %}
app / src / Controller / TestController.php
<?php
namespace App\Controller;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use FOS\CKEditorBundle\Form\Type\CKEditorType;
class TestController extends AbstractController
{
public function index()
{
$form = $this->createFormBuilder()
->add('content', CKEditorType::class)
->getForm();
return $this->render('ckeditor.html.twig', [
'form' => $form->createView()
]);
}
}
app / public / bundles / fosckeditor / plugins / timestamp / plugin.js
CKEDITOR.plugins.add( 'timestamp', {
init: function(editor) {
editor.addCommand('insertTimestamp', {
exec: function (editor) {
var now = new Date();
editor.insertHtml('The current date and time is: <em>' + now.toString() + '</em>');
}
});
editor.ui.addButton('timestamp', {
label: 'Insert Timestamp',
command: 'insertTimestamp',
toolbar: 'mode,0', // toolbar group and index
icon: this.path + 'timestamp.png' // icon file (PNG)
});
}
})
app / config / packages / fos_ckeditor.yaml
twig:
form_themes:
- '@FOSCKEditor/Form/ckeditor_widget.html.twig'
fos_ck_editor:
default_config: test_config
configs:
test_config:
extraPlugins: ["timestamp"]
plugins:
timestamp:
path: "bundles/fosckeditor/plugins/timestamp/"
filename: "plugin.js"
屏幕截图:
相关链接: