How to add button in rte editor toolbar TYPO3 - ckeditor

I want to add button in rte editor toolbar. On clicking it automatically a specific image should be inserted in editor.
Here is an example image link https://ucarecdn.com/06a0c19f-1f75-4531-9210-e18409ee72b0/Capture.PNG

You will need to override the YAML configuration for this,
1) PageTsConfig: Typoscript settings
RTE.tt_content.types.textmedia.bodytext.preset = full
RTE.config.tx_news_domain_model_news.bodytext.preset = default
2) ext_localconf.php
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['my_preset'] = 'EXT:my_layout_extension/Configuration/RTE/Default.yaml';
Only you need to move Default.yaml to the 'EXT:my_layout_extension/Configuration/RTE' directoty. For more NITSAN Blog and typo3worx blog will help you.
Hope this makes sense!

Related

Is there any configuration available to show the toolbar on click of content section

i have added below configuration to hide the toolbar onload of ckeditor.
config.toolbarStartupExpanded = false;
is there any configuration or any workaround available to show the toolbar once the user clicks on the editing area and then hides it once user clicks out of the editing area.
You can try to use inline version of editor, it might be sufficient for you in this case.
Take a look into this sample how it works: https://cdn.ckeditor.com/4.7.3/full-all/samples/old/inlineall.html.
You need to remember to initialise editor with CKEDITOR.inline instead of CKEDITOR.replace. More about it you can find in documentation
Another option might be dynamically create and destroy editor, but this approach might be a little bit more laggy, for the user. Example how it works you can find here: https://cdn.ckeditor.com/4.7.3/full-all/samples/old/ajax.html

How to display CKEditor generate code properly?

When I edit the content in CKeditor, it looks well. but when I display the data on html page. the layout are reset by other css file. How to avoid this? Is it possible to disable show the content in CKeditor without toolbar?
The content.css solve my problem. Add the style to content.css .
ck editor is highly customizable. Go to your CKEditor Directory ckeditor\samples\index.html
Open this file
Click on ToolBar Configurator Button on top right Corner.
Switch to advanced mode. At top right corner there is a switch, toggle it to advanced mode.
Then build your toolbar.
Now click on 'Get ToolBar Config' Button.
Select and Copy the Configuration and Paste it into foll file:
ckeditor/config.js
For CSS issue: Try loading and calling the replace function at end of your html Page.

Custom Layouts are not saving after applying a layout to a page

I have created custom layouts in my custom theme.The layouts are appearing in Layouts tab in Edit mode. but when i apply a layout to a page and click on save, the layouts are not applying to page.Please help me to resolve this issue
Thanks in advance!!!!!
Check if there are any underlying errors in SystemOut.log file on your system. Also pls post the method (in detailed steps) using which you created the custom layout.
You can add a page layout to a page via the layout file itself through WebDav. Open your page in edit mode, open the edit page properties dialog, and click the Advanced tab.
Once on the Advanced tab, you can set the page layout template location using:
dav:fs-type1/path/to/layout/in/theme

Drupal 7 - Images from IMCE (+Wysiwyg) showing as [img]link[/img]

When I'm uploading images through TinyMCE image panel it is available in edit mode preview. But in view mode there is no image just [img]link/to/image[/img] metatags. What is wrong? I'd enabled filter "Convert Media tags to markup" but has no luck.
Using WYSIWYG editor with TinyMCE + IMCE + Media modules.
I found a solution:
go to yourdomain.com/admin/config/content/wysiwyg
click edit next to the editor you use , then expand "Buttons and Plugins" and Uncheck "BBCode" , then save,
This is worked for me, and I hope it helps you.

Change default icon of buttons on toolbar of CKEditor

How do I can change the default icon of button on toolbar of CKEditor my my owns?
Thanks.
If you need to modify one of the default icons (not a plugin's) you can modify skins\[name of your skin]\icons.png (suggested here)
Look into plugins folder - source code is there with links to images, just replace those with yours.

Resources