Im using TinyMCE richtext editor on Umbraco website. but when i tried to add any section tag and save, it will remove it automatically.
Eg : <section class='cls'>test content</section>
Anyone knows how to prevent it ?
i've tried => extended_valid_elements: 'section[!class]' also not working for me
Allow the section tag with class attribute by going to config/tinymceconfig.config.
Look for validElements setting and include "section[class]".
You might also need to retouch and re-save your web.config in order for new settings to take effect.
Related
I am working on making one of the AEM website of my client accessible. For the same, I want "aria-label" attribute should be added(value can be provided in authoring dialogue) to the anchor tag, when the target selected is "New tab".
Could not find much around it, following link describes we can customize the rtePlugin/linkPicker. But could not figure out my problem. Any help/guidance
http://experience-aem.blogspot.com/2017/06/aem-63-touch-ui-rte-rich-text-editor-color-picker-plugin-inplace-dialog-edit.html
Option 1) Reuse Alt Text/title from otb anchor link. No need to customize dialog. When Alt Text is authored otb will populate title like this <a title="Google" href="htttps://www.google.com">Google Link</a>
,
You will then need to Write a Link Transformer to copy title into aria-label. The rewriter will look for anchor tags; if title is present, copy into a new attribute aria-label and rewrite the anchor. If link rewriter is difficult, you can also rewrite the rte text from a sling model while saving the RTE text. Use a Jsoup parser to parse HTML, rewrite by copying title to aria-label and write back into JCR.
Option 2) Adding new text box for aria-label to dialog. You can refer to this blog post. But this option is needed only when Alt text is different from aria-label which I wonder why. Usually aria-label and titles are same and option 1 above will suffice.
So Finally was able to add aria-label attribute with some troubleshooting. Moreover the steps in the links mentioned above are same. Want to add additional details which I faced issue with
Adding new field
Follow the steps mentioned in the blog
After adding the field as mentioned in the blog the newly added attribute will get filtered by AEM. You will see the following error in error.log file
Error : "26.09.2017 12:40:42.804 INFO [0:0:0:0:0:0:0:1 [1506447642680] GET /content/we-retail/language-masters/en.html HTTP/1.1] org.apache.sling.xss.impl.HtmlToHtmlContentContext AntiSamy warning: The a tag contained an attribute that we could not process. The rel attribute had a value of "bookmark". This value could not be accepted for security reasons. We have chosen to remove this attribute from the tag and leave everything else in place so that we could process the input."
Solution: Declare the attribute in the AntiSamy configuration file in CRXDE Light.
Note : make the following changes in /apps/cq/xssprotection/config.xml (overlaying /libs/cq/xssprotection/config.xml), for Sightly/HTL its /libs/sling/xss/config.xml
Copy /libs/cq/xssprotection/config.xml to /apps/cq/xssprotection/config.xml.
Open /apps/cq/xssprotection/config.xml.
In the common-attributes section, add the following target attribute declaration.
<attribute name="aria-label>
<regexp-list>
<regexp value="[a-zA-Z0-9-_\$]+" />
</regexp-list>
</attribute>
Find the tag declaration by searching the term <tag name="a".
Add the line below in the list of attributes:
<attribute name="aria-label" />
Save the file. Now, the link will open in a new window if the option is selected.
I tried removing the p tag from RTE of AEM(6.2) by adding the property removeSingleParagraphContainer :true in rte text node.It removes the p tag from first paragraph but as soon as we enter the next paragarph the p tag gets added.It seems the component needed to be customized from out of box.
Is there any other way can we achieve this.
The functionality which I require is that no tag should get added until users selects a specific formatter tag from paraformat.
Thanks for the Help!
I've struggled with this issue once upon a time. As far as I know there is no way to do it with configuration. You'll need custom code to get rid of these <p>'s.
One thing I can advise is that it's far easier to do it from within your code once already reading the property from JCR - then tweaking the aem component not to add it.
This is the default behaviour of RTE OOTB. removeSingleParagraphContainer is for backward compatibility and not the behaviour you are expecting.
By default, pressing Enter will add a <p> tag but if you press Shift+Enter (at least on Mac, not sure on Windows) you will get a <br> tag which is probably what you are expecting.
The only way to change the behaviour is to overlay the RTE control.
Tinymce editor is not rendering editor properly when the content is something like
<textarea><p><sample data></p></textarea>
i.e. <sample data>.
When I initialize a TinyMCE editor here, I dont see anything as it looks like it assumes <sample data> is an HTML tag.
Please assume I have tinymce.js loaded and I initilize using tinymce.init.
Is there a fix for this? Please let me know if it is a server side fix, or is there a tinymce.init option I could give to fix this problem.
PS: It does look like this is an HTML Entity encoding related issue but I am hardly an expert in this area.
Have a look at the tinymce config parameter entity_encoding.
If this does not work you may use this workaround
// save content
var saved_content = document.getElementById('id_of_my_textarea').innerHTML;
// init the editor
tinyMCE.execCommand('mceAddControl', false, 'id_of_my_textarea');
// after tinymce is fully initialized do
// you should use the tinymce configuration parameter "setup" rather than this code here
tinymce.get('id_of_my_textarea').setContent(saved_content);
Glad to see a lot of posts about tinymce but there's nothing here that helps me with my current problem.
What I am trying to do is work out how to add "code" to my text with tinymce.
Something like this
Does anyone know how I can do this.
Help would be appreciated.
Mandy
You will need to add pre to the tinymce init setting valid_elements
You need to add to the editor the Code Sample plugin to your editor.
This is the example code to include the plugin from the TinyMCE website.
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "codesample",
toolbar: "codesample"
});
The codesample plugin uses http://prismjs.com/ to embed the code samples within the editor and works out of the box. That is, when a user copies valid code syntax into the editable area the code will be automatically formatted according to Prism default CSS rules.
You need to add prism.js and prism.css to your page for syntax highlighting to work.
Then you will get the code sample button in your editor interface.
Here you can find the Documentation about.
How can I disable tinyMCE?
I'm not trying to make tinyMCE not exist, just trying to disable the field temporarily using PrototypeJS's Form.disable.
Is there a particular way to mark a field disabled for editing?
One option is to use the plugin 'noneditable'
Or you could investigate the 'mode: exact' setting and only setting it on the exact id of the form field you want to control.
Your use case isn't really clear, so hope the above tips work.