We Keep Coding

Ace Editor with TinyMCE textarea

I am trying to extend a "code view" and a "design view" within an application of mine. I am able to use either the code view (Ace Editor) or the design view (tinymce) with no issues. However I would want the two to work together and update the code on either side when developing. This would make me only have to POST one tag rather than doing two and may have issues down the road.
I created this fiddle to show what problem I am having.
In my fiddle I show a tinymce textarea, a regular textarea and a ace editor textarea. The tinymce and regular textarea share the same name and it's being called by Ace editor to update as I am typing. You can see the regular textarea works perfectly however, the tinymce textarea is not.
I believe the issue may be coming from the fact that TinyMCE is using an iFrame and updating the textarea behind the scenes but I am not exactly sure the best way to call that iframe in javascript.

I've tried to sync both, but due to some missing callbacks/events on tinyMCE, this is best I get. The content in ACE is only updating after blur on tinyMCE. There's currently no direct input event:
Fiddle forked
Code:
var editor = ace.edit("edit");
var textarea = $('textarea[name="test"]');
editor.getSession().setValue(textarea.val());
editor.getSession().on('change', function(){
textarea.val(editor.getSession().getValue());
// copy ace to tinyMCE
tinymce.get('test').setContent(editor.getSession().getValue());
});
editor.setTheme("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/theme-terminal.js");
editor.getSession().setMode("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/mode-html.js");
tinymce.init({
selector: ".test",
relative_urls: false,
apply_source_formatting : true,
setup : function(ed) {
ed.on('change', function(e) {
// copy tinyMCE to textarea
textarea.val(tinymce.activeEditor.getContent({format : 'raw'}));
// copy tinyMCE to ace
editor.getSession().setValue(
tinymce.activeEditor.getContent({format : 'raw'})
);
});
}
});

You should be setting ACE theme and mode this way:
editor.setTheme("ace/theme/terminal");
editor.getSession().setMode("ace/mode/html");

How to get the id attribute of textarea that replaced by TinyMCE editor

I am using TinyMCE in my project.I want to get the id attribute of the textarea that is replaced by TinyMCE.Once I get the id of that textarea, then how can I use that id for my jquery functionality like focus,blur,keyup etc. Please give me an example for focus event for that textarea (editor) just by alert something when someone press a key inside the textarea (editor)
I have been stuck with this issue for the last 4 days. So any help in this Please.
Thanks.

Not a final answer, but too many advices for a comment.
There's a jQuery package that "Contains special jQuery build of TinyMCE and a jQuery integration plugin".
Some information about event-handling: e.g. the focus event. Notice the tinymce.activeEditor-snippet.
If you've just one init for one textarea, you should know the selector:
tinymce.init({
// your textarea has the class "myeditor"
// access with jQuery: $('textarea.myeditor').anyFunction();
selector: "textarea.myeditor"
});
Maybe it helps you a little. Good luck!

Displaying dynamic text

I need to display some text but the text is going to change a lot and I need for it to be editable. I know I can use from input but is there any other way?

MDN has a nice example and MSDN - here for contenteditable
<div id="toEdit" contenteditable="true" onkeyup="doSomething(this.id);"></div>
doSomething function can manipulate the data (store/send whatever).

You can use ajax query and change the value of the text area.. using that.. hope this help

you can put a little button (or use even the text itself as a handler) so that when a user clicks, you add the input to change the text using ajax.

Counting Character of jwysiwyg text editor?

I am trying to set maximum character length for an jwysiwyg text editor.
I tried to use .keyup function. But its not working. I am using
dwr.util.getValue("jwysiwyg") //Its a dwr utility to get the value of an element.
to get the content of the text editor.
jwysiwyg is the id of text area. Its working.
But if i try to use the same id like,
$("#jwysiwyg").keyup(this.countChars);
Its not working.
Is there any other way to get the .keyup event of an text editor?

try
$("#jwysiwyg").keyup(function(){
return dwr.util.getValue("jwysiwyg").length; // or try ur code here this.countChars(if length doesnt work)
});

Small bug when selecting text on focus

i have a input[type=text] containing the short url for a post. i want to select the short url so users can easily copy the short url into clipboard. i used
$(".shorturl input").focus(function() {
this.select();
});
but i noticed the 1st time it works fine then the next time it will blick (i see the text selected then deselected). it seems when like it try to select a selected text and ends up deselecting?
then to enhance this, how can i copy text to the clipboard? hopefully without flash? i see jQuery plugins to copy text but they use flash.
my site using that is http://jiewmeng.tumblr.com

Try using the click event instead. It seems to work when focusing on the input using the keyboard as well, but I haven't tested it cross-browser:
$(".shorturl input").click(function() {
this.select();
});​
Demo at http://jsfiddle.net/mZSyh/
For the second part of your question, see How to copy text to the client's clipboard using jQuery?