Is there a way to add a tag to the format dropdown that would wrap the text in <small></small> tags?
Editing config.js as follows causes a runtime error:
config.format_tags = 'small;p;h1;h2;h3;pre';
probably because <small> is not block level?
The reason of the runtime error is, that js can not find CKEDITOR.config.format_small.
You have to do two things:
Search for CKEDITOR.config.format_h6 in ckeditor.js and add CKEDITOR.config.format_small={element:"small"};. Then the error is gone, but you can not see the entry yet.
open the languagefile you want (e.g. en.js) and add "tag_small":"small text".
now CKEditor supports the small tag.
This works for me, I hope it works for you too.
If I want to add a custom section tag to format tags, this work for me:
1. Go to config.js, add
config.format_tags = 'h1;h2;h3;h4;h5;h6;section';
config.format_section = { element : 'section' };
2. Then open the languagefile you want (e.g. en.js) -> lang/en.js
search for "tag_pre":"Formatted", and add "tag_section":"Section".
If you're looking to wrap text in a certain tag, you can also achieve this with the Style dropdown as well.
First, configure your editor to allow styles at /admin/config/content/formats/manage/full_html. Replace full_html with whatever editor version you want to modify
Drag the Styles button to the active toolbar if it isn't already there
Add items to "Styles Dropdown" tab under CKEditor plugin settings
Each option takes the form css_selector | Human Visible Name so in your case, you'd add small.my_element_class | Super Special Small or something similar.
Instructions abbreviated from this post: https://www.axelerant.com/resources/team-blog/drupal-8-custom-styles-in-ckeditor
Related
I want to modify the "Format" dropdown for CKEditor within Mura, because I don't like the way Mura renames the headings. For example, an <h2> element is renamed to "Heading", and an <h3> element is renamed to "Heading 2". I get why they did this, because the <h1> is reserved for the page title, but it's confusing for content editors and accessibility.
I want to remove this renaming feature.
I believe the naming being used (like "Heading 1") is part of the CKEditor itself (reference).
As far as which HTML tag is actually used for those formats, Mura allows you to customize that. Look at the contentRenderer.cfc file under your theme's folder. Within that file they are setting variables that are used to customize the editor and page layouts. Specifically this section (reference):
// The following settings allow developers to change logical page structure.
// For example, some developers prefer H1 tags for their page titles,
// some prefer H2 tags - you can adjust this here:
this.headline='h2';
this.subHead1='h3';
this.subHead2='h4';
this.subHead3='h5';
this.subHead4='h6';
I'm not 100% sure but I think those settings are also used within the CKEditor in Mura.
I am using CKEditor 4.4.5.
Users use the text colour icon to change the colour of a word which works fine. When one checks the underlying HTML, it shows:
<p><span style="color:#FF0000">test </span></p>
However when clicks the "source" icon again to return to the standard non HTML view, the colouring has gone, although the underlying HTML is still correct. If you take this HTML and render it in a browser it will work correctly. So it seems that CKEditor is not able to render text colour correctly, unless freshly changed using the text colour icon.
We had customers thinking that the colour had not changed, and then trying to fix the issue in the HTML, which resulted in the total corruption of the HTML due to human error.
Is this a bug, or am I missing something?
Thanks.
As for CKEditor it might so happen that Advanced Content Filter will strip undesired tags / attributes.
If you don't have colorbutton plugin, CKEditor will strip this span (see standard demo).
You have 2 simple solutions:
Add colorbutton plugin.
Simply add to your config:
config.extraPlugins = 'colorbutton';
Add ACF proper rule.
config.extraAllowedContent = 'span{color}';
For more informations about ACF see Content Filtering (ACF).
I have some anchor tags that are in a WYSISWYG text editor. They are empty anchor tags with just id and title attributes. They look something like this:
<a id="test" title="test"></a>
They were put into the editor using just a basic text editor and then saved. When they are imported into the WYSISWYG text editor and then saved, those anchor tags go away. I know this isn't the correct way to use an anchor tag and I know I could manually go into the anchor tag and add a name attribute to fix this problem (something like this will fix the problem:
<a id="test" name="test" title="test"></a>
My problem is that these anchor tags already occur in probably over 100 places and for me to find out where all these places are would take way too long. Is there a setting in the config that I can set so that it will ignore these empty anchor tags? Based on the documentation, it seems that $removeEmpty field should do the trick but I have had no luck. I have tried many different versions of it:
"CKEDITOR.dtd.$removeEmpty['a'] = 0;", "CKEDITOR.dtd.$removeEmpty['a'] = false;", "CKEDITOR.dtd.$removeEmpty.a = 0;", "CKEDITOR.dtd.$removeEmpty.a = false;", etc.
I have also tried using the protectedSource config setting but that will just ignore anchor tags in the WYSIWYG text editor and then it looks like there are no anchor tags on the page. Anybody have some insight? There has got to be a way to override the settings and allow empty anchor tags.
You might try adding config.allowedContent = true; to your config.js file. But that turns off the advanced content filter.
A better way is to configure extraAllowedContent to specify that you want to allow anchor tags without any attribute restrictions, like so:
config.extraAllowedContent = 'a[*]';
More information:
config.extraAllowedContent - specifications for this configuration
Allowed Content Rules – how to write allowed content rules, which are used in several places including config.allowedContent, config.disallowedContent, and config.extraAllowedContent
In an Xpage running on Domino 9.0.1 I'm using a rich text control with some custom toolbar configuration using the control's "attr" property as it is described here: https://frostillic.us/f.nsf/posts/quick-and-dirty-ckeditor-toolbar-setup-for-xpages
I added the link toolbar template using
<xp:this.attrs>
<xp:attr name="toolbar">
<xp:this.value><![CDATA[[["Link", "Unlink", "Anchor"]]]]></xp:this.value>
</xp:attr>
</xp:this.attrs>
All three buttons are displayed fine, esp. I'm able to define an anchor link target.
But trying to reference the anchor target I find that the Link dialog is somewhat incomplete as I can't define my link to use a relative target on the same page. I tried entering a reference in the dialog's URL field as #myAnchorId, but that results in a link looking like this:
....
Here's an image of the dialog that pops up from my Xpage when I hit the "URL link" button:
And this is what the dialog looks like that I can test from the CKEditor Samples page:
I'm aware that the samples page uses CKEditor V 4, so the dialog is somewhat different, but even V 3.6 should be able to reference anchor links using the dialog.
I already looked up on the installed ckeditor's version; \DominoData\domino\html\ckeditor\version.txt says:
cke_version=3.6.6.2
cke_revision=20130606-1534
Question is: what's missing here? Do I have to somehow modify the dialog?
Oh my, finally got it to work; #IBM: this feature truly could use some proper documentation! I'll mark this answer as a community wiki.
Indeed a different dialog is used here, which btw appears to apply to all the dialogs in use with Domino's CKEditor implementation. The trick in my case is to use one of the custom toolbar items instead of the standard one; up to now I found three of those customized items:
use MenuLink instead of the standard Link item; this item
consists of two sub items ('URL Link' and 'Anchor Link'), each calling its own dialog version; the resulting toolbar definition then looks like this: ['MenuLink', 'Unlink', 'Anchor']
use MenuPaste instead of the standard Paste item; again, this
item consists of two sub items ('Paste' and 'Paste as text'), again
each calling its own dialog version
use LotusSpellChecker to add IBM's own spell checking feature, where CKE's standard spell checker isn't working
I found hints to those three custom items inside my local \DominoData\domino\html\ckeditor\config.js. Don't know if those are all custom items available to day.
EDIT:
IBM's Domino Designer Xpages User Guide mentions another means of customizing the toolbar; the section unfortunately is incorrect in describing the options for the toolbarType attribute: be aware that all named types must start with capital letters, e.g. Basic, Slim, Medium, Large, Full, while the also mentioned Lite type isn't working at all; mistyping or using a non-existing value results in the editor not being displayed at all.
The link dialog that you're using is not the default one, so you should check how to modify it or replace it with the default one.
Found a very similar question here: CKEditor classes being stripped
I am using CKEditor 4.2, and I have found it automatically changes content/formats.
For example I have a plugin which automatically creates a new page and a link to it in the text editor, if I create a new page called 'newPage' it creates this code:
<p> </p>
<p><a class="wiki_page_link" href="newpage">newpage</a></p>
This is shown when I click the source button on the CKEditor, now if I click it again, it shows the button again but it's different, AND if I click the source button to view the source code again it displays this code:
<p> </p>
<p>newpage</p>
Now I don't know why CKEditor has automatically changed the link, but now the link won't work. And this is occurring a number of times, for example if I add a new link using the same plugin then the original 'newPage' link is automatically changed. If I have an image of set n x m width and height then load the CKEditor then the width and height are discarded and the image is set to it's default size. If a title is set to be in the center and the CKEditor is used to change the page this centering is defaulted to the normal left of the page.
Any advice would be appreciated,
Thank you
I have finally found a solution to this. The reason it took me so long is because links like this:
CKEditor classes being stripped
to the CKEditor website always say you turn CKEDITOR.config.allowedContent to 'true' and it only provides examples to trying to turn off individual plugins, but I needed to disable it over the entire system.
To disable Advanced Content Filtering throughout the entire CKEditor - in the config.js file insert the line:
config.allowedContent = true;
Hope this helps someone else.