We Keep Coding

CKEditor: How to insert anchor tag into document?

On the surface this should be easy:
CKEDITOR.instances[Object.keys(CKEDITOR.instances)[0]].insertHtml( html );
...where html is a string of an actual HTML tag. Sadly, however, this doesn't work. When I click the button on my page that calls this code, nothing happens. It doesn't appear anywhere in the document at all, not even in Source mode.
I tried using insertElement:
var element = CKEDITOR.dom.element.createFromHtml( html );
CKEDITOR.instances.editor1.insertElement( element );
...and all it did was stick a little red flag in the document that was nothing; if I saved the document and reloaded it, it was gone.
The goal is to insert:
<a name="something"></a>
But the only thing that works is insertText() and that turns it into "safe" text, i.e. the < and > turn into lt; and gt;.
Help please? :)

I guess you used the code from the CKEDITOR Documentation (https://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertElement)
You probably ran into an issue, which says, that empty anchors show
a little red flag in the editor
(https://dev.ckeditor.com/ticket/14689). Unfortunately there seems to
be no way of CKEDITOR from doing this.
Empty Links are removed from
CKEDITOR automatically. You can add data-cke-survive="true" so these
links aren't removed,
Regards

ckeditor setdata only using some of the HTML Loaded [duplicate]

I have been using CKEditor for some time and it has worked great. I've pretty much gotten rid of any problems that ive had but this one i cant seem to figure out. When i add inline attributes to elements for instance style = "color: #ff0;" on a <p></p> tag they are stripped out when i switch from wysiwyg to source view. No saving or submission is done and ckeditor is has been added to my site which is my own script. Any ideas as to what would cause this. All of the search results i can find correspond to this happening in Drupal but Drupal seems to be the problem not the editor in all instances. Thanks again!

It feels like you're using CKEditor 4.1+ that comes with Advanced Content Filter (ACF). If so, you need to specify config.allowedContent and configure it to get your things working. You may also be interested in config.extraAllowedContent.
See this answer for more details.

For anyone looking for a simple sample on how to enabled additional markup in CKEditor without disabling ACF completely, here is a short snippet:
CKEDITOR.replace( 'editor1', {
extraAllowedContent: 'style;*[id,rel](*){*}'
} );
extraAllowedContent here enables the <style> element, allows two additional attributes (in square brackets) for all (* is a wildcard) already allowed elements, allows usage of any class names (*) for them and allows usage of any inline styles {*}

hi you can stop ACF easily . by default your configaration is---
function ckeditor($name,$value='',$height=300){
return '<textarea name="'.addslashes($name).'">'.htmlspecialchars($value).'</textarea>
<script>$(function(){CKEDITOR.replace("'.addslashes($name).'",{});});</script>';
}
just add this in the curly brackets:
allowedContent: true
now your configuration will be:
function ckeditor($name,$value='',$height=300){
return '<textarea name="'.addslashes($name).'">'.htmlspecialchars($value).'</textarea>
<script>$(function(){CKEDITOR.replace("'.addslashes($name).'",{allowedContent: true});});</script>';
}

I faced the same issue and below answer solved my problem:
config.allowedContent = true;
config.extraAllowedContent = '*(*);*{*}';
config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';

I had the same problem, that ck was stripping not only some attributes, but whole elements when pasting a block element, inside a block element (div with some attributes pasted inside a p) while using this method:
editor.insertHtml(html);
what solved the problem was using this workaround instead:
editor.insertElement(CKEDITOR.dom.element.createFromHtml(html));

Is there anyway to stop CKEditor 4 from filtering my anchor tag attributes?

CKEditor 4 attribute filtering is stripping any occurrence "href" from anchor tags put into the editor. I have a plugin which creates links that contain some "custom" attributes. A link looks something like this:
Some Link
The CKEditor returns the link in this form when I call getData():
<a href="#" document->Some Link</a>
Is there a way to instruct CKEditor to stop filtering link attributes? Does anyone happen to know where in the source this regex is so I can fix it?
Thanks!

I've just checked this link on CKEditor 4.1 - the output is:
<p>Some Link</p>
Since 4.1 the document-href is stripped because it is now allowed in the editor. You have to add an Advanced Content Filter rule - e.g.:
config.extraAllowedContent = 'a[!href,document-href]';
And then it would work in 4.1. Before 4.1 it should work by default, without setting anything.
However there's a bug in CKEditor's HTML parser. It does not parse correctly sth-href attributes on links so a result is a sth- attribute.
For now I advice you to change the name of this attribute to data-url or whatever else without href ending.
I created a ticket: https://dev.ckeditor.com/ticket/10298

try setting this in config file.
config.allowedContent = true;
also if its getting filtered on insert then you can try this:
//var yourAnchor = 'Some Link';
editor.insertHtml(yourAnchor, 'unfiltered_html');

jQuery - Trouble adding a class to a hyperlink using 'each'

I have some Javascript that finds all of the hyperlinks in a page that contain 'google' for example and changes the beginning of the url to another url.
I am trying to add a class to this affected link, however I am getting a lot of 'undefined' errors in the JS console. I have tried alert($(this).innerHTML)) which showed the contents of the hyperlink - clases and whatnot. But for some reason I cannot append a class. I have also tried using this.className += " socks". That also causes an undefined error. I think I am missing something simple!
Also is there a way of using a regex in the search, I am newish to Javascript.
Here is my code:
$("a[href*='google']").each(function(){
this.href = this.href.replace('http://www.google.co.uk','http://www.ask.com');
this.href = this.href.replace('http://www.google.com','http://www.ask.com');
$(this).addClass("socks");
});
Thanks very much for any help!

There is no error with this code that i can see:
http://jsfiddle.net/p7Sgj/
See this.

try
$("a[href*='google']").each(function(){
var href = $(this).attr('href');
href.replace('http://www.google.co.uk','http://www.ask.com');
href.replace('http://www.google.com','http://www.ask.com');
$(this).attr('href', href);
$(this).addClass("socks");
});
instead of using this.href. I guess your code doesn't reach the addClass part...
Also, use firebug (in case of firefox) or chrome developer tools (in case of chrome) for debugging. You can simply set a breakpoint, add watches, etc...
(In that case, make sure you use a so-called non-minified version of jQuery for easier debugging)

If your HTML code is
Hello
World
And your CSS is
.socks {
color:#f00;
}
Then your code should be working fine.
http://jsfiddle.net/k93TZ/2/
Working here.
It might be your html or css code.

Finding an iframe in TinyMCE textarea entered code

Some people post the html of blog post that they want to share on our site. However, iframes are not permitted on our site, so I want to check the entered code that none were entered into the TinyMCE editor.
I am running a validation javascript on submission and it has the following code:
if (ErrorFound == 0)
{
if (tinyMCE.get("entryText").getContent().indexOf("<iframe") != -1)
{
alert("iframes are not accepted on this site as they can be used maliciously, please remove the offending code.");
document.frmBlogEntry.entryText.focus();
ErrorFound = ErrorFound + 1
}
}
What am i doing wrong? as when this is executed it is ignored. It must be something obvious that I am missing.
Would really appreciate your help.
Many thanks in advance,
Paul

By default the TinyMCE Editor cleans the output from the editor .... this link shows the default list of elements allowed
http://www.tinymce.com/wiki.php/Configuration:valid_elements
the iframe tag is not on that list of valid elements (the default one) - i would suggest that its being removed by the editor itself ....

I solved it by assigning getContent() to a variable first and then checking the indexof, was just a javascript problem.. nothing related to tinymce. Many thanks