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.
Related
I'm using Full HTML filter, with CKEditor. The following filters are enabled:
Align images
Caption images
Track images uploaded via a Text Editor
Collapsible text blocks
Note that Limit allowed HTML tags and correct faulty HTML is NOT enabled.
when I add a style attribute to a table element in Ckeditor using the Source view, specifically "width=75%", it is stripped when the page is rendered. When I edit the page again and go to Source view, the style tag is there.
What is stripping it on render?
I believe inline styles are removed by default for security reasons. But, there has been a lot of discussion about this issue on Drupal.org over the past few years. If you're looking for a workaround and accept the risk, here are two approaches I have found:
How to fix: CKEditor is removing style attributes. Drupal 8.
Refactor Xss::attributes() to allow filtering of style attribute values
Fair warning: I have not personally implemented either of these.
Inline style is stripped by default with Basic HTML formatter. Unless you have a specific reason why you don't want to turn on Limit allowed HTML tags I highly recommend that you do because it gives you a lot of control over what tags you and others can use in the wysiwyg. In addition, it allows you to add a "Styles" button with pre-configured styles so you don't have to insert inline CSS code repetitively.
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
there are tutorials on the web about gow to create index.html, css file and template.xml that contain placeholders. ok, i got it, it's simple. but i need a template that has some different views. for example:
-all pages have a topmenu, header, left sidebar, mainarea and a footer but:
-first page has no header .topmenu after which sidebar, mainarea and footer comes.
-second page has sidebar moved from left to right
-third page has four blocks (blocks for special offers) instead of mainarea.
as far as i can see, i need to create three standalone templates with unique set of placeholders for each template. because i can't see the way to change laarge mainarea placeholder with four placeholders for offers blocks on some pages. dynamically.
is there if-statements in joomla templates to simply determine a document id to view four placeholders instead of mainarea. or to not show header on the main page (f.e. doc. id="mainpage")
but i want it to be selectable like:
-this page has first case of that template (index_1.php)
-and that page has a second case of the same template (index_2.php)
like a selectbox.
is that possible?
I will make this an answer as opposed to a comment since I believe it will do what you are looking for.
Once your articles are setup and your links to them are established (the site has the info on it you're looking for), you can create the modules containing the data that you want shown from time to time.
Go to the module manager - on the right you should see 'module assignment' or something along the lines of 'display this module on the following pages'; you can then pick which pages you want the module to show on. You can specify all pages, none, specific pages, however you want.
This will enable you to show them only where needed however you like.
You can ALSO do this programatically inside the module (if you do custom HTML and use an extension like Sourcerer to add PHP to the module) with PHP should you want a little more flexibility, but just choosing the pages to show on should work for what you're doing.
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
I am Using CKEditor in my application where the users can write blogs, create pages etc..,
Source mode is disabled for the editor. Writing xml in the editor's text area is not retained after saving the content. I clearly see that the content got HTML Encoded and the same is supplied as input to the CKEditor's textarea.
Works as designed. Whatever you enter into the WYSIWYG area, will get HTML encoded. How would you want to behave it differently?
If you want a text editor for writing XML, maybe the answers to this question are useful: Textarea that can do syntax highlighting on the fly?
I too want CKEditor to support XML tags, but I understand that you can't just type them into the main window - anything typed here is assumed to be actual content, not tagging, and therefore gets encoded.
What I'd like to do is define a list of styles that cause a tag of my choosing to be used, e.g. if the user chooses the 'example' style, CKEDitor does <x>content</x>. Unfortunately I haven't had much success with this, despite hacking the dtd.js file.
My current solution is to define a list of styles but map them to a standard HTML tag, then put my desired XML tag name in as an attribute. I'll then need to write some XSLT that transforms the data later.
CKEDITOR.stylesSet.add('myStyles',
[{
name: 'Example sentence',
element: 'span',
attributes: {'class': 'example', 'data-xmlTag': 'x'}
}];
config.stylesSet = 'myStyles';
element specifies a standard HTML tag – I use <span> if I want the XML to be inline and <div> if I want it to be block level. The data-xmlTag attribute says what XML tag I actually wanted to use (x in this case). The class allows me to define some styles in CSS and means I can group several XML tags under one class name. To define some CSS:
config.contentsCss = CKEDITOR.basePath+'tagStyles.css';