I'm working with the TinyMCE editor. I'm trying to remove an empty tag when the user submits content via an Ajax request. The TinyMCE editor preserves empty tags if the user doesn't insert content in the editor area.
<div> </div>
How can I check if the editor has no content via jQuery? Furthermore, I want to remove empty tags present at the end of the content editor: for example when the user inserts a newline at the bottom, because TinyMCE translate newlines into:
<div> </div>
It is also possible in TinyMCE to convert newlines:
<div> </div>
into
<div class="custom_empty"></div>
I wouldn't use a regular form and submit in this case, but get the tinymce editor content using the ed.getContent() - tinymce API function when a special submit button gets pushed.
You then have the chance to cleanup your tinymce editor content by yourself.
Here is some example code i use to do some character replacements due to the fact that we had to use an own font and replace some special chars when they are inside the editor:
content = content.replace(/\u2192/g, '\t').replace(/\u00a0/g, '\u0020').replace(/\u202F/g, '\u00a0').replace(/\u2007/g, '\u2005').replace( new RegExp("\ufeff", "g"), "").replace(/\u00ad/g, '');
In your use case you might consider using a regex to detect empty tags (or tags with a &bnsp ) and replace them with an empty sting.
Related
tinymce use prism as default for highlighting code. it wraps sample codes in <pre><code>sample code</code></pre> tags.
<pre><code>
<div> this is a container </div>
</code></pre>
if i need to put a div tag inside this block (for learning purpose) , tinymce will clean it up itself once loading content next time i try to edit that saved content and my div tag will be removed because it is not valid html syntax . how can i preserve my content ?
only wrap content in htmlentities() before hit tinymce
as written here
I came across a curious problem when attempting to insert HTML edited by a Javascript editor (CKEditor) into some div. In the HTML to be inserted, double-quotes are replaced by the HTML entity " which works fine.
EXCEPT if the " appears in an inline style - then jQuery removes the entire inline sytyle.
I don't want them to be removed. I do prefer to keep the HTML entities if possible. The question is why does this happen? Any workaround?
In below example, I insert a text which should make the span red with regular quotes and with HTML-entity escaped quotes in an inline style.
The first line (div1) makes the span red, div2 is not red at all.
window.onload = function() {
$('#div1').html('<span style="color:red;">This text "here" is red</span>, while this is not.' );
$('#div2').html('<span style="color:red;">This text "here" is red</span>, while this is not.' ); }
See JSFiddle/L7cq2pfd here
jQuery inserts this as style=""color:red;"" - convert " to " with replace(/"/g, '"') before inserting as HTML :
$('#div2').html('<span style="color:red;">This text "here" is red</span>, while this is not.'.replace(/"/g, '"') );
http://jsfiddle.net/kb709s27/
Why? The automatically rendering of a " to " is a browser feature, not a javascript feature. jQuery seems to parse the inserted HTML and tries to correct malformed attributes. If you insert
$('#div2').html('<span style=color:red>');
then jQuery corrects this and inserts <span style="color:red">. In your case jQuery only see a malformed attribute and therefore tries to correct it, wrapping "color:red;" into quotes.
HTML textareas can recognize line breaks (enter button) and i can save the element's text value into database. Then i can get those data, set it on any textarea, i still have line breaks (no problem until here).
CKEditor textarea puts <p> or <br /> after line breaks. When i remove these tags, CKEditor cannot recognize there's a line break.
Purpose : I'm using a word counter plugin with CKEditor, so i need to use CKEditor as like a textarea. I need the plain text value.
I tried these so far :
CKEDITOR.instances.editor1.document.getBody().getText()
Yes i can get the text value correctly, i put this value on DB, but when i reload my page, the line breaks are gone. Because ckeditor works only with html tags ?
config.autoParagraph = false;
This one just removes the <p> tag at the beginning of the content.
I need plain text+line breaks that's it. Any suggestions ? Or should i write down my own classes ?
Array.prototype.map
.call(CKEDITOR.instances.editor1.document.getBody().$.childNodes,
function(item){
return item.innerText;
})
.join("\n");
Just a crazy answer to convert <p> blocks to a string separated by \n
I use wysihtml5 editor on my site and I would like to have the following functionality - if user inserts text with special characters they are transformed to html entities.
For example, user inserts:
"Sample text, sample text, sample text ©"
I need to transform it to:
"Sample text, sample text, sample text ©"
I didn't find any information related to special symbols in editor docs. One of the method I think about is to create listener for paste event and process special characters at this step.
Could you advice what is the best way to add this functionality to the editor?
you can use a RegExp character range to replace() them using a dynamic function:
strNew=strOld.replace(
/([\u00A0-\u00FF])/g,
function(j,a){
return "&#" + parseInt(a.charCodeAt(0), 16) + ";" ;
}
);
live demo : http://pagedemos.com/27w7n4n58qpk
this could be applied from the string you get back from your editor, or i guess, on the innerHTML of the editor's contenteditable tag.
My site has user generated content. I noticed that if the user has quotes in some text and later I displayed that text in an HTML attribute, the layout would get screwed up in IE.
Hello
However, if I had generated the same anchor with Javascript (Prototype library), the layout would not be screwed up in IE:
$$('body').first().appendChild(
new Element(
'a', {
title: 'user "description" of link',
href: 'link.html'
}
).update('Hello')
);
Why is this so? The JS and the plain HTML versions both have the same intended result, but only the JS doesn't screw up IE. What's happening behind the scenes?
BTW, I do strip_tags() and clean XSS attacks from all user input, but I don't strip all HTML entities because I use a lot of form text input boxes to display back user generated text. Form elements literally display HTML entities, which looks ugly.
You need to escape all output that is user-specified (using entities). The DOM-methods do that automatically.
I don't know how you are processing the user generated content, but you could use a replace function to clean up the input something like string.replace("\"", "")
The answer to your question: 'Why is it so' is because in your JavaScript example set the title attribute with single quotes. So the double quotes in the user generated string are already escaped.
In you A tag example, single quotes around the text you use in the title attribute may be a way to solve the rendering problem.
However, Your HTML attributes should be in double quotes, so you would be better off using entities, as suggested by #elusive in his answer.