In the context of a custom CMS, I have replaced the default 'Link' and 'Image' buttons with my own dialogs and commands to be able to link to existing CMS pages and files by selecting them from my custom dialogs.
In older versions of CKEditor, there was no ACF, so this was no problem.
In 4.1+, if I do not include the original 'Link' and 'Image' buttons, the results from my new buttons get filtered by the ACF. The plugins themselves work just fine, but I can't figure out how to get the ACF to automatically allow links and images.
* I AM NOT INTERESTED IN DISABLING THE ACF *, I just want the plugins to behave.
Example toolbar configuration that allows my buttons (LinkContent, ImageSelect, and FileSelect) to work:
{ name: 'links', items : [ 'Link', 'LinkContent', 'Image', 'ImageSelect', 'FileSelect' ] }
If I use the following, the content from my buttons is filtered out:
{ name: 'links', items : [ 'LinkContent', 'ImageSelect', 'FileSelect' ] }
In my plugin definitions, I have added what I thought was the appropriate ACF settings. In my ImageSelect plugin file:
CKEDITOR.plugins.add('imageselector', {
init: function( editor ) {
editor.addCommand( 'imageselectorDialog', new CKEDITOR.dialogCommand ( 'imageselectorDialog', {
allowedContent: 'img[alt,!src]{width,height}',
requiredContent: 'img',
exec: function( editor ) {
...
Would love to find out how to correct this without having to include the default buttons alongside my own.
Okay, so my solution is actually correct. As has been the case with most CKEditor frustrations, the reason it looked incorrect is because CKEditor tends to be very persistent with its caching (* not actually cached by CKEditor -- see comments below).
After my changes were pulled into someone else's checkout, the plugins worked perfectly.
Lesson -- Completely clear your cache with EVERY change when trying to debug CKEditor problems.
EDIT -- clarified that caching is not done by CKEditor because someone complained.
Related
In order to have the full power of the TCA's showitem for configuring the back-end form for a plugin, I define it as a new CType, instead of a new list_type of the list CType.
I do this by registering it with addPlugin instead of the default method outlined in the official extension guide, using registerPlugin. In ext_tables.php:
TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPlugin(
[
// Label.
'LLL:EXT:my_ext/Resources/Private/Language/locallang.xlf:pi1.name',
// Plugin key.
'myext_pi1',
// Icon.
'pi1'],
'CType',
'my_ext'
);
Then I can just use, in Configuration/TCA/Overrides/tt_content.php:
$GLOBALS['TCA']['tt_content']['types']['myext_pi1'] = [
'showitem' => " ... "]
to configure it's back-end form display as I want.
But now, after successfully adding the plugin on a page from the back-end, when I try to view it from the front-end, I get the error:
ERROR: Content Element with uid "284" and type "myext_pi1" has no rendering definition!
It's not doing the usual: loading the controller action assigned to the plugin in ext_localconf.php with ExtensionUtility::configurePlugin (in ext_localconf.php).
Does anybody know what could I do to make it work?
The point in this case is, that the element does not just "act as if it were a custom content element", but it actually IS a custom content element.
So you will have to provide at least a basic configuration via
tt_content.myext_pi1
If you registered a plugin properly it might be enough to just copy the plugin configuration to the tt_content entry
tt_content.myext_pi1 < plugin.myext_pi1
I installed the TinyMCE editor on top of a fresh Connections 6.5.1 installation. While syntax highlighting using the codesample plugin is enabled out of the box, it works only for certain languages. I found the codesample_languages, which were overriden like described in this article.
externalPlugins: [{
name: "codesample",
url: "/connections/resources/web/tiny.editors.connections/tinymce/plugins/codesample/plugin.min.js",
settings: {
codesample_global_prismjs: true,
codesample_languages: [
{ text: 'ASP.NET (Core)', value: 'aspnet' },
{ text: 'Apache', value: 'apacheconf' },
{ text: 'Bash', value: 'bash' },
{ text: 'C#', value: 'csharp' },
{ text: 'C++', value: 'cpp' },
{ text: 'CSS', value: 'css' }
]
}
}
]
Now its possible to select them in the editor. But they don't work because the embedded PrismJS from the editor only support extend, insertBefore, DFS, markup, xml, html, mathml, svg, css, clike, javascript, js, c, csharp, cs, dotnet, cpp, java, markup-templating, php, python, py, ruby, rb.
So I loaded the missing plugins from a cdn, e.g. the batch plugin. Including it in header.jsp doesn't work because the Prism namespace is not initialized. In the footer.jsp it seems to have no effect, assuming that PrismJS is already initialized.
Customizing the webresource archive
PrismJS seems to be fetched from https://cnx65.internal/connections/resources/web/tiny.editors.connections/render/prism.js so I extracted tiny.editors.connections_4.2.1.1.jar in /opt/IBM/shared/provision/webresources, modified resources/render/prism.js and re-packed those folter:
[centos#cnx65 webresources]$ zip -r tiny.editors.connections_4.2.1.1.jar resources/render/
After restarting Common and Wiki (the application where I'm testing TinyMCE), there is still no syntax highlighting for Bash. Altough when I'm navigating to https://cnx65.internal/connections/resources/web/tiny.editors.connections/render/prism.js, I see the Bash plugin code which I have inserted. To see which languages are avaliable, I append
console.log(Object.keys(Prism.languages))
at the end of the file. This gave me an array containing bash. So the plugin is avaliable, but why doesn't TinyMCE show syntax highlighting?
PrismJS was not the problem: Connections changed the way how they use PrismJS. In the past, they just append the class so that we need to include prisms css/js files in the rendered page (e.g. header/footer.jsp). But it seems that since 6.5.1 (CR1), the TinyMCE editor calls PrismJS when a code block is changed. After pressing save, the editor places the entire parsed highlighted HTML with inline css in its HTML.
As a consequence, it's not enough to reload the rendered page in read mode because it was rendered before the lighlight plugin was added. The highlighting works when we click on edit and make a double click in the code block. Then click save in the code modal and also in the wiki page. Now it works:
Highlight in the editor, too
I found out that resources/render/prism.js is responsible for the readonly view, but not the editor itself. If we only add the plugin there, we get no highlighting in the edit view
To fix this, we need to edit resources/tinymce/tinymce-bundle.min.js inside the TinyMCE archive. Add the plugin JS code in the plugins section. For example, before Prism.languages.csharp=.... Now add the modified file to the archive
[centos#cnx65 webresources]$ sudo zip -r tiny.editors.connections_4.2.1.1.jar resources/tinymce/tinymce-bundle.min.js
and restart common + the application you're using (e.g. Wikis). Now the highlighting works both in the readonly view as well inside the editor:
I am using the theme gravstrap for Grav CMS.
I want to make a single page website, like in this example :
http://gravstrap.diblas.net/gravstrap-theme-simple-page-example
I looked at the brief blog post explaining how to do it and also at the source code example on the project git repo.
I am having a hard time to undertand what to do exactly because what the blog-post says seems quite different than what I see in the example (especially how to link pages to menu items with the id thing).
I finally got it working :
Create a page with the template page_navbar_interne, create sub-pages as modular, each sub-page will be section.
By default sections will be ordered by the names of the folders. You can hardcode the order by adding this in the Frontmatter (expert mode) :
title: Single page website
published: true
slug: single-page-slug
content:
items: '#self.modular'
order:
by: default
dir: asc
custom:
- _header
- _mySection2
- _myOtherSection
To display the menu to navigate to the sections, you have to use navbar2 instead of navbar1, in the header module.
[g-navbar id="navbar2" name=navbar2 fixed=top centering=none brand_text="…" render=false]
[g-navbar-menu name=menu0 alignment="center" onepage=true attributes="class:highdensity-menu"][/g-navbar-menu]
[g-navbar-menu name=menu1 icon_type="fontawesome" alignment="right" ]
[g-link url="…" icon_type="fontawesome" icon="…"][/g-link]
…
[/g-navbar-menu]
[/g-navbar]
I've special requirement on my project and I need help. I am using TYPO3 8.7.8. I've a custom extension to render tag labels in frontend. We can add the tags as TCA record in backend storage folder. In the TCA record, you can tag name. My requirement is, when I save the TCA record I want to create a TYPO3 page automatically with the same name as tag in a specific position. Everytime when I add a TCA record, I need to create corresponding page automatically. Is this possible? I can use hook while saving TCA. But is there any function to create pages automatically?
After automatic page creation, I want to insert a plugin content element in that page with a specific flexform value automatically. I know this is a strange requirement, but I would like to know if it is possible or not.
Exactly, you'd trigger a hook on saving and then as next step you can use the data handler to generate the new page (and possible content).
To create the page and content, use something like the following data structure
$data = [
'pages' => [
'NEW_1' => [
'pid' => 456,
'title' => 'Title for page 1',
],
],
'tt_content' => [
'NEW_123' => [
'pid' => 'NEW_1',
'header' => 'My content element',
],
],
];
Then call the datahandler with that structure:
$tce = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('TYPO3\\CMS\\Core\\DataHandling\\DataHandler');
$tce->stripslashes_values = 0;
$tce->start($data, []);
$tce->process_datamap();
Find out more in the docs at
https://docs.typo3.org/typo3cms/CoreApiReference/ApiOverview/Typo3CoreEngine/Database/Index.html#data-array
and
https://docs.typo3.org/typo3cms/CoreApiReference/ApiOverview/Typo3CoreEngine/UsingDataHandler/Index.html
Are you sure you need additional pages?
In general your problem sounds like you need one page where the plugin is inserted and where the plugin in dependency of an url-parameter (which can be converted with realurl into a path segment) shows only information depending of the selected record (tag).
If no tag is selected you can output a list with all available tags as a menu to navigate to all possible tags.
With a little effort (less than writing a hook like intended) you can add all tags to your menu.
I am using CKEditor as a back end editor on my website. It is driving me round the bend though as it seems to want to change the code to how it sees fit whenever I press the source button. For example if I hit source and create a <div>...
<div class="myclass">some content</div>
It then for no apparent reason strips the class from the <div>, so when I hit source again it has been changed to...
<div>some content</div>
I presume this irritating behaviour can be turned off in the config.js, but I have been digging and cant find anything in documentation to turn it off.
Disabling content filtering
The easiest solution is going to the config.js and setting:
config.allowedContent = true;
(Remember to clear browser's cache). Then CKEditor stops filtering the inputted content at all. However, this will totally disable content filtering which is one of the most important CKEditor features.
Configuring content filtering
You can also configure CKEditor's content filter more precisely to allow only these element, classes, styles and attributes which you need. This solution is much better, because CKEditor will still remove a lot of crappy HTML which browsers produce when copying and pasting content, but it will not strip the content you want.
For example, you can extend the default CKEditor's configuration to accept all div classes:
config.extraAllowedContent = 'div(*)';
Or some Bootstrap stuff:
config.extraAllowedContent = 'div(col-md-*,container-fluid,row)';
Or you can allow description lists with optional dir attributes for dt and dd elements:
config.extraAllowedContent = 'dl; dt dd[dir]';
These were just very basic examples. You can write all kind of rules - requiring attributes, classes or styles, matching only special elements, matching all elements. You can also disallow stuff and totally redefine CKEditor's rules.
Read more about:
Content filtering in CKEditor – why do you need content filter.
Advanced Content Filter – in deep description of the filtering mechanism.
Allowed content rules – how to write allowed content rules.
I found a solution.
This turns off the filtering, it's working, but not a good idea...
config.allowedContent = true;
To play with a content string works fine for id, etc, but not for the class and style attributes, because you have () and {} for class and style filtering.
So my bet is for allowing any class in the editor is:
config.extraAllowedContent = '*(*)';
This allows any class and any inline style.
config.extraAllowedContent = '*(*);*{*}';
To allow only class="asdf1" and class="asdf2" for any tag:
config.extraAllowedContent = '*(asdf1,asdf2)';
(so you have to specify the classnames)
To allow only class="asdf" only for p tag:
config.extraAllowedContent = 'p(asdf)';
To allow id attribute for any tag:
config.extraAllowedContent = '*[id]';
etc etc
To allow style tag (<style type="text/css">...</style>):
config.extraAllowedContent = 'style';
To be a bit more complex:
config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';
Hope it's a better solution...
Edit: this answer is for those who use ckeditor module in drupal.
I found a solution which doesn't require modifying ckeditor js file.
this answer is copied from here. all credits should goes to original author.
Go to "Admin >> Configuration >> CKEditor"; under Profiles, choose your profile (e.g. Full).
Edit that profile, and on "Advanced Options >> Custom JavaScript configuration" add config.allowedContent = true;.
Don't forget to flush the cache under "Performance tab."
Since CKEditor v4.1, you can do this in config.js of CKEditor:
CKEDITOR.editorConfig = function( config ) {
config.extraAllowedContent = '*[id](*)'; // remove '[id]', if you don't want IDs for HTML tags
}
You can refer to the official documentation for the detailed syntax of Allowed Content Rules
if you're using ckeditor 4.x you can try
config.allowedContent = true;
if you're using ckeditor 3.x you may be having this issue.
try putting the following line in config.js
config.ignoreEmptyParagraph = false;
This is called ACF(Automatic Content Filter) in ckeditor.It remove all unnessary tag's What we are using in text content.Using this command in your config.js file should be turn off this ACK.
config.allowedContent = true;
Please refer to the official Advanced Content Filter guide and plugin integration tutorial.
You'll find much more than this about this powerful feature. Also see config.extraAllowedContent that seems suitable for your needs.
Following is the complete example for CKEDITOR 4.x :
HTML
<textarea name="post_content" id="post_content" class="form-control"></textarea>
SCRIPT
CKEDITOR.replace('post_content', {
allowedContent:true,
});
The above code will allow all tags in the editor.
For more Detail : CK EDITOR Allowed Content Rules
If you use Drupal AND the module called "WYSIWYG" with the CKEditor library, then the following workaround could be a solution. For me it works like a charm. I use CKEditor 4.4.5 and WYSIWYG 2.2 in Drupal 7.33. I found this workaround here: https://www.drupal.org/node/1956778.
Here it is:
I create a custom module and put the following code in the ".module" file:
<?php
/**
* Implements hook_wysiwyg_editor_settings_alter().
*/
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
if ($context['profile']->editor == 'ckeditor') {
$settings['allowedContent'] = TRUE;
}
}
?>
I hope this help other Drupal users.
I found that switching to use full html instead of filtered html (below the editor in the Text Format dropdown box) is what fixed this problem for me. Otherwise the style would disappear.
I would like to add this config.allowedContent = true; needs to be added to the ckeditor.config.js file not the config.js, config.js did nothing for me but adding it to the top area of ckeditor.config.js kept my div classes
Another option if using drupal is simply to add the css style that you want to use. that way it does not strip out the style or class name.
so in my case under the css tab in drupal 7 simply add something like
facebook=span.icon-facebook2
also check that font-styles button is enabled
I face same problem on chrome with ckeditor 4.7.1. Just disable pasteFilter on ckeditor instanceReady.This property disable all filter options of Advance Content Filter(ACF).
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.pasteFilter.disabled = true;
});