I'm having problems with removing tags from TimyMCE. (last version)
invalid_elements : 'br' or valid_elements : 'p/br'
This delete/replace the tag on ctrl+enter from html source but not from the DOM in the editor.
How can i prevent the use of invalid elements in the Editor DOM?
Simply said i want to prevent using a tag not only in the generated html source, but also in the Editor too.
What do you want to have happen when someone presses shift+enter if you don't want the <br> to be used? You can capture any keydown event in the editor and then choose what you want to do instead.
This TinyMCE Fiddle captures the keydown event and simply ignores shift+enter. You can certainly do something different if needed.
http://fiddle.tinymce.com/vogaab/1
EDIT: Based on your comment I updated the fiddle:
http://fiddle.tinymce.com/vogaab/2
...in this version I modify the event to make the event.shiftKey attribute false and then let the event finish as normal. I no longer get a <br> but instead get a <p> tag whether I use enter or shift+enter
Related
I am working on a chrome extension that lets users pre-configure action sequences.
I noticed that document.execCommand('undo') doesn't work in TinyMCE.
However tinyMCE.execCommand('undo') works fine.
Is there a way to make document.execCommand('undo') work directly in TinyMCE?
Any text or images or other items added to the editor creates an event in the separate, TinyMCE DOM. This is why document.exeCommand('undo'); won't affect added content and returns 'false' in the console.
To see this in action, I contrasted TinyMCE with a standard textarea and content editable section, and tried out the commands in the console: the document.execCommand returns 'true' when run in the console for undoing content in the textarea and contenteditable. But it does return 'false' for TinyMCE.
(As for a way to make document.execCommand run in TinyMCE, I'm not sure it is possible.)
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.
I have changed the onclick(for li element) using the inspect element. In onClick I have called a function it was invoked twice.
Here is my sample code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function a(val)
{
alert(val);
}
</script>
</head>
<body>
<ul>
<li onClick="a(1)"> 1 </li>
</ul>
</body>
</html>
I assume you are using Google Chrome. This is a bug/problem with the Inspect Element feature.
If you use Inspect Element to change or remove the onclick handler of an element, it doesn't work as expected. The new Javascript code is ADDED as a new handler to the existing list of the onclick handlers, rather than replacing the existing handler of the old code.
This is incorrect and a bug, because Inspect Element allows user to replace the code, and it looks like it's replaced - but hidden from the user, it's actually appended as a new handler - so the result is not what it would seem like.
If the code or the onclick attribute is deleted, the JS code is still executed as it remains registered as a handler.
This is highly misleading and makes the Inspect Element nearly useless for debugging event handler JS bugs.
To try it out:
Right-click any element and click Inspect element (or Inspect).
Add or modify its onclick handler to alert('stack');.
Again, modify the onclick handler to alert('overflow');.
Now, click the element to fire the handler.
You may think that you will just get one alert with the word overflow. But you will actually get two alerts, one with stack and another with overflow. This means the code alert('stack'); is still in the handler, even though it's not visible on the DOM tree.
There is no permanent fix for this problem. The following workarounds may help. Reporting it to Google may encourage them to fix it in a future version of the browser.
Workarounds
Use Mozilla Firefox. The behavior of Inspect Element in Firefox is as expected - the browser really replaces the old handler instead of adding a new handler to the list.
If you need to use Google Chrome, do the following:
With the element selected in the Developer Tools window's Elements tab, click the Event Listeners tab (this is on the other pane which may appear below or on the right side).
Make sure that the Ancestors checkbox is unchecked.
If your element already has an onclick handler, you should be able to see a click event handler listed. If you don't see anything, try clicking Refresh button (next to Ancestors checkbox).
If you still don't see it, close the Developer Tools and right-click the element in the page and click Inspect to open it again.
Click the rightward arrow next to the click event handler. It will open and you will get a list of all the registered handlers (listed with the tag#id.class notation).
In the DOM tree (top pane or left pane), double-click and edit the onclick handler code and confirm it by pressing Enter.
In the Event Listeners tab, click Refresh button again. You will see that a new handler has been added.
Hover over the handlers and you will see a Remove button appearing on each of them. Click this button on each handler until only one remains.
The order doesn't matter - you can start at the bottom, the top or even go randomly - internally, the Remove button removes handlers in the order they were added.
If there's only one handler left, you can be sure that's your latest code - it doesn't matter which handler was left.
To change the onclick code again, repeat steps 5 to 7.
I notice this bug as well. While working on my project this week with ajax calls.
Having a button like this:
<button id="mybutton" type="button" onclick="sendMessage('12345')"></button>
If you go into the inspector and edit '12345' to 'abcde'. Then clicking the button will cause the button to fire twice. Once as '12345' and once as 'abcde'.
To solve the double sending you can attach the event listener with an ID rather than using html's onclick. So instead use something like:
$("#mybutton").click(function(){
sendMessage('12345');
});
This will not suffer the same double sending bug.
However, anything you edit on the inspector will not do anything now, it will be disregarded.
I actually created a new inputtype to use TinyMCE, but I saw problem, to make thing simple, I tested with existing "textarea" input type, and found I cannot make it work neither.
so I could have html like below
<div class='editable'>
<p>this is a <b>test</b></p>
</div>
when I make it editable as textarea and then click to edit, I expect to see code like below in the textarea
<p>this is a <b>test</b></p>
instead I see string with all tag stripped, I was told to use loadurl to get the content from backend when it is editted, I did that, which works fine.
But now I have another problem, if I click to edit and then click cancel, the stripped text shows, not the string with tags, any idea what is that? what happens to jeditable reset? where it stores the original text when user click edit and then restore it after user click cancel?
I have a TYPO3 which strips any <p> tags from content I create when the RTE editor is enabled for the field in question before it saves it in the DB. And it seems I cannot find a way to disable this behavior with a TypoScript. As soon as I disable the RTE editor I can save <p> tags and they get correctly rendered in the frontend. They also get correctly rendered in the frontend when I simply add them directly in the database in the tt_content table in the bodytext field.
When I switch to the edit source mode of the RTE I see all <p> tags in place. Before and after a save (also they never make it to the DB) so it looks like they get converted to (linux) line breaks or something and get converted back to <p> tags when the editor loads them in the backend. But those line breaks of course have no effect to in the frontend.
I thought this behavior would be controlled by RTE.default.proc but everything there looks good to me (p is already in the allowed tags and there is no clue why it could be stripped). I've also tried to disable the RTE.default.proc.entryHTMLparser_db and RTE.default.proc.exitHTMLparser_db as I wouldn't mind it if the HTML content as you see it in the edit source mode of the RTE (so with RTE still enabled!) would not be touched at all - in fact I would prefer it - but this had no effect. On the other hand when I add tags to the allowed tags which weren't there before (like <button>) this works so the things I try to add to RTE.default.proc aren't ignored in general.
So how can I stop TYPO3 from stripping my <p> tags from RTE content or touching it at all? I'd prefer a solution with TypoScript but meanwhile I would also be happy about an ugly hack in a sys extension as long as it works...
I'm not sure if this is a bug or not but the solution to my problem lies in p.rmTagIfNoAttrib = 1. At least in my TYPO3 version (v6.1.7 and nearly only built in extensions) I cannot find this setting in the preset TypoScript of the page or the RTE editor so I'm guessing it defaults to 0. In my logic 0 means false so I'd say the default would read as "remove tag if there is no attribute?: no!".
However TYPO3 seems to work after its own logic. Adding the following statement to the page TS sloves my problem and <p> tags are preserved:
RTE.default.proc {
entryHTMLparser_db {
tags {
p.rmTagIfNoAttrib = 1
}
}
}
The reasons for this behavior are explained in the TYPO3 manual:
Many of the transformations performed back and forth in the TYPO3 backend date back to when it was a challenge to incorporate a RTE in a browser. It was then sometimes needed to fall back an a simple <textarea> where rich text had to be presented in a simple enough way so that editors could work with it with no visual help.