We Keep Coding

TinyMCE - can it have no editable areas?

I tried TinyMCE (documentation) and CKEditor and they both require this kind of code for initialization:
tinyMCE.init({
selector: '.some-div-with-text-inside',
inline: true,
fixed_toolbar_container: '.toolbar',
valid_elements: '*[*]',
setup: function(editor) {
// something that happens on setup
}
});
So, basically some selector is required and all DIVs with .some-div-with-text-inside class will become TinyMCE's editable areas. The editor will appear in .toolbar container.
==========================
What I would ideally like to achieve is an editor that is not attached to any DIV or TEXTAREA and whose functions (like "bold text", "create a link") would work on any content editable area in the document as long as there is some selection made. With Rangy exactly this is possible. See demo: http://rangy.googlecode.com/svn/trunk/demos/cssclassapplier.html
In TinyMCE v3 something like this was available:
$(function(){
tinyMCE.init({ mode: "none", theme: "simple" });
tinymce.execCommand("mceAddControl", false, "myEditableDIV");
});
But mode: "none" no longer exists in v4 and the second line became tinyMCE.execCommand("mceAddEditor", false, "myEditableDIV"); now but when there are multiple editable DIVs added this way then editor appears multiple times inside .toolbar. I'm wondering if there's any way to prevent that?
I just need 1 editor for all current and future DIVs with contenteditable. Some DIVs may be added or removed from the document. I went through every option in their documentation and I couldn't make it work.

I think that you can't edit DIV or Textarea without attaching tinyMCE, but here is one trick that you can make - you can HIDE the editor toolbars and show them only when you focus the current DIV or textarea. To achieve this you can use this function:
editor.on('focus', function(e) {
and here show the toolbars
});

Unable to get/set contents of tiny mce editor

I am using Tiny MCE editor version : 3.5.7
I am using multiple instances of text editor on same page with unique IDs and I have wrapped these editors in a div to show and hide these editors. Everything was working fine. Now I want to clear the contents of the editor when user hide it (so that when it is displayed again the previous contents are removed). I tried to do it using tinyMCE.get('editorId').setContent(''), it works fine only once.... I mean once I have used the above function than I am unable to set or even get the contents of that editor instance. The structure that I have used is as follows:
<div id="parentDIV">
<div id="1_editor">
</div>
</div>
tinyMCE.init({
mode: "exact",
max_char: "2000",
elements: "1_editor",
// Setting up ToolBar
theme: "advanced",
theme_advanced_layout_manager: "SimpleLayout",
theme_advanced_buttons1: "bold,italic,underline, strikethrough, separator,justifyleft, justifycenter,justifyright, justifyfull, separator,bullist,numlist,separator,fontselect ,fontsizeselect",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
});
To show and hide the editor I doing something like this:
$('#parentDIV').hide();
$('#parentDIV').show();
Can anyone help please?

I am not totally sure why this happens. One option is if an editor gets moved around the dom. For you it might be a better way to shut down your editors explicitly then to just hide them.
To shut down an edtor instance use:
tinymce.execCommand('mceRemoveControl',true,'editor_id');
To reinitialize use
tinymce.execCommand('mceAddControl',true,'editor_id');

TinyMCE source code only

How can I work with TinyMCE in source code only? TinyMCE converts any data to HTML and shows it. I need to use BBCode without converting, source code only. I couldn't find any info about it in Google.

I suppose you want to use TinyMCE like phpBB post form. i.e. click on Bold and it shows [b]text[/b] and not the formatted text in bold.
As far as I know, you can't do this with TinyMCE through settings. You will need to write your own functions.
tinyMCE.init({
theme_advanced_buttons1 : "mybold",
setup : function(ed) {
ed.addButton('mybold', {
title : 'bold',
image : 'img/example.gif',
onclick : function() {
// Add you own code to execute something on click
ed.focus();
ed.selection.setContent("[b]" + ed.selection.getContent() + '[/b]');
}
});
}
});
Cool for two or three codes. A pain in the ass and long code if you are going to do it for every bbcode.
If you are not going to use none of TinyMCE advantages, you are better off writing your own code to manipulate <textarea> and avoid loading TinyMCE JS. It would be lighter.

Adding TinyMCE on the fly

I am using the TinyMCE editor. I have a div element. When an edit link is clicked, I would like to replace it with a TinyMCE editor. I added the mceEditor class in the javascript file that will get executed when the edit link is clicked.But it is not working. TinyMCE editor works when I have a textarea during page load. Can someone please tell me how to do it. Thanks.
<textarea id='answer' rows='25' cols='100' class='span-15 mceEditor'></textarea><br />

I added it using tinyMCE.execCommand('mceAddControl',false,'elementId') and removed it using tinyMCE.execCommand('mceRemoveControl',false,'elementId')

Version 4 of tinymce now uses tinymce.execCommand('mceAddEditor', false, 'elementId'); and tinymce.execCommand('mceRemoveEditor', false, 'elementId');

Active JavaScript(jQuery) inside TinyMCE iframe window

It has been hours already trying to find out if jQuery (or any javascript) can actually work inside the TinyMCE editor as it's the most powerful and customizable utility in its class. Search by search i understood what's the deal with .tinymce({ cleanup: false, extended_valid_elements: 'script[type|src]' });
but instead of CDATA sections around the code i now get and still no success.
Is that possible or it's a restriction in order to prevent conflicts with TinyMCE interface.

Use this modal code to access element inside tinymce using jquery
tinymce.activeEditor.$("#element_id").attr({'alt' : alternate , 'align' : align , 'title' : title});