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.
Related
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).
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
I’m trying to display the menu title text (example “Home”) in the header area of my Joomla 2.5 website.
Joomla’s default (when activated) is to place it in the Component area.
I’m not sure the best way to accomplish this. By default Joomla wraps the menu title with an H1 tag but doesn’t wrap it with a div and class.
The ways I’ve thought might be best to do this are:
Somehow wrap all menu titles with a div and class so I could reposition them up into the header with css .
Add some php code to my template. Something like:
php
$menuTitle = $this->params->get(‘fieldNameOfMenuTitle’);
php
echo = $menuTitle;
Any ideas, suggestions, or answers would greatly appreciated
Thanks
Never found an exact answer but found a work around.
Used a modified version of the below demo/plug-in to create a custom field (named it: "Title that displays on the Web Page") in the articles menu. By default, the table that is created and displayed in the web page is in the component area and is wrapped in a w/ a class. Repositioned the with CSS up into the header/banner area.
http://docs.joomla.org/Adding_custom_fields_to_the_article_component
I'm working on a Joomla website with a slider in it. I'm using {loadposition slider1}, to get the slider (slider 1) in an article. There is a text link beneath the slider. Now I'd like the page to load another slider (slider 2), in the position of slider 1 when someone hovers over the text link. So visitors hovering the link will see slider 2 in stead of slider 1 when hovering the link.
Can I do this by using javascript? I haven't been able to find a solution. I hope someone can help me with this problem. Thanks in advance.
In Joomla! the {loadposition slider1} tag in articles is processed by a content plug-in when an event is triggered. Usually onContentPrepare or similar event. The important part of this is that it's all done on the server before it reaches the users browser.
As it's processed in the article there is no way to call the server again and request just slider 2...
To swap in your slider2 would require the browser to already have it available. To achieve this you could have {loadposition slider2} in a <div> or other element in the article that is set to display:none. eg.
<div id="slider2" style="display:none;">{loadposition slider2}</div>
NB. this is not necessarily good html...
This means when the browser receives the article html, it contains the element it's just hidden, then you can use the your javascript to hide slider1 and show slider2 when the user hovers over the link.
I've added the "html"-button to TinyMCE on an EZ Publish site so that the users can write custom html into the xmlblock-field. But html-code with div-, img- and other tags get stripped when the user saves. If I use the ''-tag I assume that the html-code inside will be rendered as viewable html-code on the web page, instead of actual html-content.
How can I enable html-editing in the ezoe?
This is what I'm trying:
Click the html-button in TinyMCE.
Write html-code:
<div style="text-align:left; width:496px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_fottoey" src="some url.jpg" width="496" height="249" alt="" />
</div>
Click "Publish". When viewing the page it has no trace of the html-code from step 2.
I've tried to add the following to my override content.ini.append.php:
[literal]
AvailableClasses[]
AvailableClasses[]=html
as per http://acidre.com/blog/ez-publish-saisir-du-contenu-directement-en-html/ but that doesn't help.
Update:
It works now with the changes that I made to content.ini.append.php. This change adds "html" as a literal option and gives you a new icon in the editor, which Nicolas pointed me to (looks like a sheet of paper and is on icon row 2, first section before the Omega-icon.
When you add the html-source in the purple edit field, the editor will create links if it discovers that you've pasted inn urls. These links are blue in the editor. You must break these links with the "Break link"-icon to the far right on icon row 1. There should be no blue hyperlinks in the editor when you save. If you've managed this, the published page should display your custom html nicely :)
The usual way of enabling literal HTML in eZ Online Editor (based on TinyMCE) in eZ Publish is to uncomment the
AvailableClasses[]=html
configuration directive in an override of content.ini. A bit more of information here : http://share.ez.no/forums/setup-design/custom-tag-stop-while-running/comment64177.
Then, the literal tag should be available to editors through the literal button in TinyMCE (this button looks like a text sheet). The dropdown proposed in the pop-up menu shows 'html'.
Allowing raw html requires a few editorial guidelines and full trust in editors, but i am sure you are aware of this.
Cheers,
Nicolas