Develop Reference

fillEmptyBlocks config in CKEditor 4.6.2 does not help manipulate insertion of <br> tags in empty DIVs

Problem 1: I consume the following plugins as part of a customized build of the basic version of CKEditor 4.6.2 - basicstyles, dialogui, dialog, clipboard, button, toolbar, enterkey, floatingspace, undo, divarea. The empty DIV container blocks have <br> elements added by CKEditor which I am trying to prevent.
The config file looks like this -
CKEDITOR.editorConfig = function(config) {
config.title = false;
config.allowedContent = true;
config.fillEmptyBlocks = false;
// Toolbar groups configuration.
config.toolbar = ...
};
fillEmptyBlocks = false; did not prevent CKEditor 4.6.2 from inserting the <br> elements. I tried doing what https://stackoverflow.com/a/34849579 suggests by having all the line-break rules set to FALSE and I could not get around the problem.
I tried it with the whole basic version of CKEditor 4.6.2 and the released version of 4.5.11 and this still occurs in them. However, this problem does not exist in CKEditor 4.1.3 and 4.4.0. Am I missing something as part of a config or should I have any additional plugin to not have this issue with 4.6.2?
Problem 2:
Pressing backspace in an empty div block removes the div block from the DOM. This again happens with 4.6.2 and 4.5.11 and not on 4.1.3 or 4.4.0, is there a config that I could be missing?
Edited: <br> tags are being inserted despite having fillEmptyBlocks set to false in all the versions post CKEditor 4.4.7, it does not happen with 4.4.6. Looking at the release notes, http://dev.ckeditor.com/ticket/12735 is the change that has gone into 4.4.7 Is there another way to fix this then?

I have developed similar kind of WYSIWYG editor using CKEDITOR 4 where everything is working fine although I used ckeditor.replace
However, I uploaded it in the github. So, you can refer there and compare and fix your code if you want.
Click here for the github project.
Please ask me if you face any problems!!

Please try this code it is working for me:
For removing br on load
$('your_id').ckeditor();
CKEDITOR.on('instanceReady', function() {
$('div.application').find('br').remove(); // remove br tag added on empty divs
});
for removing &nbsp use this in destroy function:
for(CKname in CKEDITOR.instances) // delete multiple instances of ckeditor
{
CKEDITOR.instances[CKname].destroy(function(){
$("your_id").html(function (i, html) {
return html.replace(/ /g, ''); // remove
});
})
}

Add attributes to link in CKEditor 4 in Drupal

I want to add rel="nofollow" to all links in the CKEditor. I have read a lot of questions about it and also tried my best with the documentation. However I cannot get it working.
I am using Drupal 7 (Not the wysiwyg module, just the ckeditor module with cdn version 4).
Code that I have tried:
var editor = new CKEDITOR.editor();
CKEDITOR.on('instanceReady', function( ev ) {
editor.dataProcessor.htmlFilter.addRules(
{
elements :
{
a : function( element )
{
console.log(element.attributes);
if ( !element.attributes.rel )
element.attributes.rel = 'nofollow';
}
}
});
});
This code was what I found in other questions. In the documentation I can't find the addRules function, and if I put a breakpoint inside of the function, I see that it never gets called.
I would really appreciate some input!

Do you need to get it done through CKeditor's config? Because This can be configurated within the Drupal interface:
Configuration > Text formats > Choose the input format ex: Filtered HTML
check Limit allowed HTML tags
scroll down to the vertical tab Limit allowed HTML tags
check Add rel="nofollow" to all links

Getting the value from a TinyMCE textarea

I have a news editor for my site with which I am using TinyMCE. What I would like to be able to do is have a button (outside of the TinyMCE editor itself) that I can click to scan the textarea for any images, then list those images as options to use for a thumbnail image for said news article.
For an idea of what I mean, please see this link here: https://docs.google.com/leaf?id=0B05m73kzudwPNzUwZjkyNmItYjZkMy00NTdlLTlkNDctOGRhYThjMzNjNTM5&hl=en_US
My problem is that document.getElementById('NewsArticle').value is not returning anything when there is text in the textarea
The other potential problem is that whats shown in the textarea is not actual code, but images etc too so I wasn't sure it would even work in the first place, but since when the form is submitted the data[News][article] value is back into text, I thought there might be a chance.
If anyone knows how to get either the content or code for the tinyMCE textarea, or has a better solution, I'd be interested to hear

TinyMce has an api for accessing content from the editor.
This code will grab the html from the active editor:
// Get the HTML contents of the currently active editor
tinyMCE.activeEditor.getContent();
// Get the raw contents of the currently active editor
tinyMCE.activeEditor.getContent({format : 'raw'});
// Get content of a specific editor:
tinyMCE.get('content id').getContent()

Use below syntax, which will remove unwanted character from your input textarea....
(((tinyMCE.get('YourTextAreaId').getContent()).replace(/( )*/g, "")).replace(/(<p>)*/g, "")).replace(/<(\/)?p[^>]*>/g, "");

Try
window.parent.tinymce.get('contentID').getContent();
For some reason, the stock-standard tinymce.get() call didn't work for me, so I tried this and it works. :)

var temp = tinymce.get('textAreaName').save();
console.log(temp);
OR
var temp =tinymce.get('textAreaName').getContent();
console.log(temp);

Probably you have something like
<form>
<textarea id="myArea">Hello, World!</textarea>
</form>
you should simply add as follows
<form method="post">
<textarea id="myArea" name="value">Hello, World!</textarea>
<input type="submit">
</form>
and you can catch the data with PHP under myArea var.

Reset TinyMCE box

I am using TinyMCE editor. I want to clear the content inside the editor box with some button click present on my form.
Can you let me know how to do so?

This can be easily done (no need to use the slow jQuery tinymce build) using the following code as onclick-action of your button:
// 'content' is tinymce default,
// but if your textarea got an ID that is the one you need!
var my_editor_id = 'content';
// set the content empty
tinymce.get(my_editor_id).setContent('');

From the TinyMCE jQuery Plugin documentation, can be easily found from the page you linked:
// Will change the contents of an textarea with the ID "someeditor"
$('#someeditor').html('Some contents...');
// Will change the contents all text areas with the class tinymce
$('textarea.tinymce').html('Some contents...');
// Gets the contents from a specific editor
alert($('#someeditor').html());
Try setting it to empty string, might be just what you need.

If you are interested in clearing the content of the editor you can use:
tinymce.get('#editorId').setContent(''); // like others have suggested
However, if you'd like to reset the content and menu buttons etc. - essentially resetting the editor altogether you might consider using:
tinymce.get('#editorId').init();

Sets the specified content to the editor instance, this will cleanup the content before it gets set using
the different cleanup rules options.
tinymce.activeEditor.setContent('');

$('#name_of_your_textarea').val('');

Injecting JavaScript into head element of website using Fiddler

I was thinking of using Fiddler for the following purpose...
I have a JavaScript based service I want to demonstrate to potential clients. In order to show them what their website could look like if they install (i.e. include) my script, I want to set up Fiddler on my PC, so that when fetching the client's website, the
<script type="text/JavaScript" src="myscript.js"></script>
line will be included in the HTML <head> section.
Can this be easily done with Fiddler? Could someone point me to where I may find the documentation covering that, if it is?
Thanks!
----Update----
For the time being I have resorted to using a BHO to add my script to the page. I use execScript(), upon onDocumentComplete, to run a simple piece of JavaScript which appends the .js file I need to the page. But EricLaw's pointers and jitter's answer seem like the way to go for a more complete (and elegant) way to do what I need.
If someone is interested I could upload the BHO code here.
-Thanks!

Open fiddler -> Menu Rules -> Customize Rules (or hit Ctrl+R)
The CustomRule.js file opens. Scroll down until you find the line
static function OnBeforeResponse(oSession: Session)
This is where your code goes. Here you can change the server response before the browser sees it.
The following code sample shows how to include a custom piece of jQuery code which replaces the Unanswered link in the horizontal menu with a link which serves as short cut to Unanswered jQuery Questions
I first show you the jQuery code I want to include
<script type='text/javascript'>
$(function() {
var newLink = 'Unanswered jQuery';
$('div#hmenus div.nav:first ul li:last a').replaceWith(newLink);
});
</script>
Now the fiddler code (based on code found in CustomRules.js and code samples from the FiddlerScript CookBook)
//is it a html-response and is it from stackoverflow.com
if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "html") &&
oSession.HostnameIs("stackoverflow.com")) {
// Remove any compression or chunking
oSession.utilDecodeResponse();
var oBody = System.Text.Encoding.UTF8.GetString(oSession.responseBodyBytes);
// Match the jQuery script tag
var oRegEx = /(<script[^>]*jquery.min.js"><\/script>)/gi;
// replace the script tag withitself (no change) + append custom script tag
oBody = oBody.replace(oRegEx, "$1<script type='text/javascript'>$(function() {$('div#hmenus div.nav:first ul li:last a').replaceWith('Unanswered jQuery');})</script>");
// Set the response body to the changed body string
oSession.utilSetResponseBody(oBody);
}
I think you should now able to hackyourself together a piece of code which fits your problem.
Example
// Match the head end
var oRegEx = /(<\/head>)/gi;
// replace with new script
oBody = oBody.replace(oRegEx, "<script type='text/javascript' src='http://url/myscript.js'></script>$1");

if you use jQuery you can add js on the fly. I would probably think you can have a method which would include/exclude your script based on some query param. This is how you would include JS with jQuery
$.getScript('someScript.js',function(){
//Do something here after your script loads
});

Haven't tried it, but how about GreaseMonkey for IE?