Develop Reference

Get iframe element of current CKEDITOR instance

CKEditor 4 or above
I have a CKEDITOR instance that I can access without problem parent.CKEDITOR.instances[instance_id]
I want to add bootstrap file to the head of the iframe generated by CKEDITOR (kind of hack, because normal way to add optional css file was not working).
I tried to get the iframe head and to inject the bootstrap file, but it fails always.
Any Suggestion?

If you are using classic editor with contents in iframe then please use contentsCss configuration setting to add extra CSS to editor contents area. It is important to refresh the cache with Ctrl+F5. If for some reason changes are not applied and path to CSS file is correct (you are not getting 404 in browser dev-tools console) then you might want to try clearing cache according to this link.
If you really need to get to the iframe, you can use below technique. It gets you the div with editor id you need and it finds iframe for it. This is good if you have couple of editors or iframes on a single page.
document.getElementById('cke_'+ your_textarea_id ).getElementsByTagName('iframe')[0].contentWindow

I found it finally, I post it here so maybe it will be helpful for someone in the future.
I just added the bootstrap file to the body tag (it is a bad practice but it works).

How can I target a div on my HTML page with Javascript to change the contents of an element?

I've got an interesting question. I'm running Squarespace # buscadprimero.caminoglobal.org
and need to target the top-right button on the navigation (Ingresar, which means login) to bring up a Javascript form provided to me via embed code. The code itself works fine when included as a code block in the body of a page, but Squarespace only allows navigation buttons at the top to be hyperlinks. There's nowhere for me to add code to the button itself, being that it is a largely consumer platform and works great for straightforward application until you try to change the way it works.
They make an allowance for custom code via a "code injection" menu that adds whatever code you want to the HTML header of the page, so I've been trying to target this div, which does not have an id but who's class is external, with Javascript to replace its contents with an onclick listener to bring up this form. Tracking?
Here's my embed code, which like I said is fine:
<script>// <![CDATA[
!function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.host+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);
// ]]></script>
I've been trying document.getElementsByClassName("external").innerHTML; but when set to a var that returns undefined. New to Javascript but not afraid to learn. I'd like to figure out how to properly target the div, first of all, and then replace its contents (which currently is a link to my 404 page) with a Javascript function that activates on click. Thanks for the guidance!

I've tested the following on your site in Chrome, and have successfully changed the content. The page contained multiple ".collection" elements, so i select only the last one:
JavaScript / jQuery
$("#mainNavigation .collection").last().html("<a href='/newlink'>Test</a>");

Thanks to the great help of #Arg0n, I've now got a working login form that appears in the top-right-most button of my site. Using:
$(function() { $("#mainNavigation .collection").last().html("<span id='cc-login'>Ingresar</span>"); });
as the function to replace the contents of the div in question, I inserted <span id='cc-login'>Ingresar</span> as the call to the provided embed code:
<![CDATA[ !function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.ho‌​st+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventLi‌​stener("load",n,!1):e.attachEvent("onload",n)}(window,document); // ]]>
Turns out that a little jQuery was helpful in accessing the desired div, and setting its html contents was a bit beyond my area of expertise.
Many thanks to the StackOverflow community for helping me learn about targeting page elements with Javascript to procedurally manipulate its contents.

Edit Image/Image Details - Replace button missing

I have a strange problem. I am dynamically populating content into Wordpress' tinyMCE editor. Part of this content is a placeholder image, that the user can then replace. The issue is when I click the 'pencil' icon to edit, I am not given the "Replace" button like I would any other images.
This is what I see: http://imgur.com/Bjoencj
This is what I expect, and works on images imported from the media library: http://imgur.com/fra3PfX
Notice, the replace button is present in the second example. I guess because the image is hard-linked and wordpress has no way of knowing if the image exists in the media library. How can I dynamically import an image so this functionality is present?

Are you inserting the placeholder image with the setContent function?
http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.setContent
Perhaps you can try adding the placeholder image to your media library.

wymeditor - formatting headings in stylesheet

I'm trying to use within wymeditor the same styles that are on my website. Unfortunately this editor is barely documented, so I don't really know how to do it.
The documentation implies something like you can use a stylesheet where you define everything in some form, and it will be parsed and used in the editor. I could do this, but only with the classes (second box on the right panel). The documentation gives an example, but only for the classes, not for the containers. There's a link to a full stylesheet, but it's a dead link, and the stylesheet used in the examples only define classes and no containers.
So how would I make for example a red h1 in the editor? Or at least in the preview.
I would be really glad if someone linked or gave a full example of a stylesheet where containers like h1 and p are also formatted and used in editor. If this is not possible, what are other ways to do it?
EDIT:
I could inject CSS to the iframe with postInit:
postInit: function(wym) {
var $head = $(wym._box).find('iframe').contents().find("head");
$head.append($("<link/>", {
rel: "stylesheet",
href: costumIframeCss,
type: "text/css"
}));
}
Now the only thing that I need is to do a similar thing to the preview dialog. Maybe with the postInitDialog(wym,wdw). I don't really know how yet. The big problem there is that I need to differentiate the preview dialog from the other dialogs.

Update:
I saw that you have access to dialog window as wdw, when using postInitDialog. Thats cool. The way you did it (looking at your update) the same you you can for Diaolog too
Look at the following image. I debugged the Preview dialog, as it opens.
Look at line no. 41
Following what you did to the editor, the same can be done to the Preview
At line no. 41, you can get the head and append the style in the same way
var $head = $(wdw.document.body);
$head.append($("<link/>", {
rel: "stylesheet",
href: customPreviewCss, // CSS for Preview Dialog
type: "text/css"
}));
Initial Answer:
As I understand, you want the styles to take effect while you are editing. Ideally, for making an h1 red in color while editing (or any such customization), you have only the following options:
Use the proper classes, as explained by the documentation - The very
purpose of an editor is this. Customization should be done on top of
what is there
Edit the default stylesheet which you have linked or
is loaded when editor is active (you can check that using inspect
element) This is explained below
I see that when you are using the editor, it loads in an iframe. An iframe has its own styles. Now, inspect the element. In your case its an h1, but I am using the p tag from the example
See that it loads the styles from another file - wymiframe.css, line no. 51 for a p tag
So if you want to change or add your own styles, go to that file. (If you hover own it, you get the file path, or right click and open in new tab and check from the address bar)
Add or edit the style of h1 there. Done.
Also, you can go to the respective html file in the wymeditor/iframe/default folder. Add your custom link to your own css file. In this file, do all desired customization :)
Hope it helped !

As you see those are just the samples. You can't use that as an editor online. You 'll have to download that and try using it.
http://files.wymeditor.org/wymeditor-0.5/examples/
The above shows the list of examples. In that you have tried with the first link.
To download it go to this link.
http://www.wymeditor.org/download/
Select the recent stable versions for less flaws.
Hope this helps.
And as you have asked it works very well in the preview, when submitting nothing is getting reflected.
To achieve that in the preview, click on the HTML icon that is present at the second last position.
Write your own code, clicking on preview gets your result in a new pop up window.

Paste Image Into TinyMCE Editor

I am looking at ways to Paste an Image into TinyMCE editor, I have been googling it for a while, but couldn't find any related answer.
I can append an <img> with src content to the Editor(when i paste the image on the page other than inside the editor).
I am not able to paste it inside the Editor. I am using Javascript and jquery. Has anyone got an idea, how i could do this.

Enable paste_data_images
Setting paste_data_images to "true" will allow the pasted images,
while setting it to "false" will disallow pasted images.

You can't do that. TinyMCE and any other editor out there are giving you the functionality of creating rich text content. Displaying an image requires an URL and there is no URL to the image on your machine.
You need to upload the image to a server. You need to be able to access that image through a link. That link is what you insert into TinyMCE.