Add documentation for text editor customizations

alexander-schranz commented 7 years ago

This is requested sometimes but iframes and images are not recomended by sulu in the texteditor it should use blocks with different types instead, but here are some example how to extend the CKeditor.

You need to register your AppBundle as AdminBundle and add the code to your main.js file here: https://gist.github.com/alexander-schranz/2c1c46b5772ea9143774931fd3d92608#file-main-js-L19

1. Example: Add new toolbar button:

app.sandbox.ckeditor.addToolbarButton('list', 'Blockquote', 'quote-right');

2. Example: Add custom styles

http://docs.ckeditor.com/#!/guide/dev_howtos_styles:

CKEDITOR.addCss([
    '.bold { font-weight: bold; }',
    '.italic { font-style: italic; }'
].join(''));

CKEDITOR.stylesSet.add('default', [
    {'name': 'Fett', 'element': 'span', 'attributes': {'class': 'bold'}},
    {'name': 'Kursiv', 'element': 'span', 'attributes': {'class': 'italic'}},
    {'name': 'Fett und Kursiv', 'element': 'span', 'attributes': {'class': 'bold italic'}}
]);

app.sandbox.ckeditor.addToolbarButton('my_styles', 'Styles', 'header');

3. Example: Add CKEditor Core plugin

app.sandbox.ckeditor.addPlugin('colorbutton');
app.sandbox.ckeditor.addToolbarButton('colorSection', 'BGColor');
app.sandbox.ckeditor.addToolbarButton('colorSection', 'TextColor');

Available plugins can be found here: https://github.com/sulu/sulu/tree/1.6.28/src/Sulu/Bundle/AdminBundle/Resources/public/js/vendor/husky/vendor/ckeditor/plugins

4. Example: Add External Plugins:

CKEDITOR.plugins.addExternal('youtube', '/bundles/app/ckeditor/youtube/plugin.js', '' );
app.sandbox.ckeditor.addPlugin('youtube');
app.sandbox.ckeditor.addToolbarButton('embedSection', 'Youtube');

For all Examples:

After the button is added the admin need to add the new button in the UI the the exist User role (Settings -> User Role -> -> Texteditor )

Issues:

Clindbergh commented 2 years ago

It would be very helpful if this could be extended and updated with the current release. The documentation for js code part is helpful, but can be found elsewhere (e.g. stackoverflow, CKEditor docs). What I find lacking is where to place the code and additional steps (e.g. building). Thank you.

alexander-schranz commented 2 years ago

This code is for the old 1.6 Version. We currently have not yet a documentation for it in 2.x but we happy if somebody like to contribute it. There is for 2.x a example demo Pull Request: https://github.com/sulu/sulu-demo/pull/77 if you are not sure how to implement it there.

sulu / sulu-docs