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
Related
Several questions in one here but I suspect will all have the same answer.
Using the CKEditor in a CakePHP project where the content being edited is to make the html part of an email.
Most email applications don't fully support HTML net alone true HTML5.
An example of which is to center text in an email paragraph you use either <p align=center> or <center></center>
In the CKEditor when in source mode editing if do a <p align=center> and save it (or just toggle the source edit mode) it removes the align=center because in HTML5 that's no longer valid.
How can I allow this in the CKEditor?
Can I enable HTML4 validation instead of HTML5?
I also have a table in the template where half of it is edited in a field(textbox) called Header (the header of the email template) and another field called footer.
In the Header I want <table><tr><td>
In the Footer I want </td></tr></table>
Then my message content is placed in the TD cell between the header and footer.
However the CKEditor won't allow me to have an HTML TAG and not its closing TAG.
Any ideas on how to make this happen as well?
Regards
Ian
To change the HTML that it's accepted by CKEditor, adjust its ACF settings. The simplest way is to allow everything:
config.allowedContent = true;
That won't solve the halve tables part.
For that you can try to use config.protectedSource, defining a rule for both the opening and closing parts, but taking care to add also something there that allows you to target only that table and not any other table that might be in the content.
(Of course the best solution would be to but that table outside the editor when you create the mail with all the parts)
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
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.
I wanted to change the breadcrumbs starting point from Home to My title. I edited the file /magento/app/code/core/Mage/Catalog/Block/Breadcrumbs.php but it doesn't seem to be working. Is XML playing a role in that?
thanks
Your best option is to use Magento's translate feature. Notice how the text in Breadcrumbs.php is wrapped with ->__('text') which instructs Magento to see if there is a translation for text for the current module. If you turn on Translate Inline in System>Config>Admin>Developer, you will be able to edit the text on the page (after refreshing, click the red box then the little book icon). This will then be entered into the database in the core_translate table and replaced in future page renders.
As a general rule, you should never edit files in app/code/code as you will break future upgrades and patches.
turn on Translate Inline in System>Config>Admin>Developer, you will be able to edit the text on the page (after refreshing, click the red box then the little book icon)