We Keep Coding

ace editor with tab-panel

Hi i am trying to use ace-editor with tab-panel. i can use separate ace editor for each editor-tabs. But if i didn't misunderstood, it is recommended to use one ace editor and create edit sessions for each tab.
My question is ;
I initiate ace editor like
var editor = ace.edit('someId');
so this initiates only one page by injecting ace containers on the element with id '#someId'
so how can i initiate a session in another tab without duplicating the ace.edit(''). My confusion is i only have one element with id 'someId' and
i need two of them tom be shown in separate tabs.

Ace can use id of an element or the element itself.
http://ace.c9.io/#nav=api&api=ace
You can use some class or other selector of tab
in jQuery it would be sth like
var editors = []; //let's have an array
$('some tab selector').each(function(index){
editors[index] = ace.edit(this);
});
Or add some id's to each tab.
Important id must be unique for page!

How to manipulate the DOM with Onsen UI

I'm a total newbie to Onsen UI and I managed to make my first little app (static that is) with a few pages, popovers, lists, etc.
But when I try to add dynamic stuff in there, it does not want to cooperate.
When I click my side menu, it calls menu.setMainPage and in the callback I want to modify the content of the list (lets say iterate a JSON request and add a ons-list-item for each of them). However, they do not look styled with Onsen UI icing.
I guess it's because the menu.setMainPage has already parsed the ons-page and showed it in the browser.
Is there a way to do a load page, update the dom, and then pass it to be displayed?
I have a simila problem with an popover that contains a list. I want to add items in that list, but my jQuery append never work. Same reason I suppose.
Thanks!

Sounds like you're not running ons.compile() on the dynamic elements. The custom elements must be compiled after they've been added to the DOM to get the correct style and behavior.
I made a short example to illustrate it:
ons.bootstrap();
var addItem = function() {
var $myList = $("#my-list"),
$item = $("<ons-list-item>").text(Math.random());
$myList.append($item[0]);
ons.compile($item[0]);
};
If you attach the addItem function to a click handler you can add items dynamically to an <ons-list>.
This is a running example on codepen:
http://codepen.io/argelius/pen/gbxNEg

Get html of a table in TinyMCE (using the table plugin)

I have a TinyMCE editor with the table plugin loaded (I'm using the TinyMCE Advanced Wordpress plugin). I have to get a selected table's HTML code (a table that you are currently editing - the on you have resize controls on). With normal text I can use tinyMCE.activeEditor.selection.getContent(), but this is not working when dealing with a table. What is the correct way of doing this?
Thanks.

You might use tinyMCE.activeEditor.selection.getNode();. If this is a table element you got your table and will be able to get the html using
var node = tinyMCE.activeEditor.selection.getNode();
var html = node.innerHTML;
// now you will only need to take care of the surrounding table element
// something like "<table>"+ html +"</table>"; maybe having a look at node.attributes

Hiding TinyMCE with jQuery

I have a TinyMCE textarea inside of #container
When I use $('#container').hide() and then $('#container').show(), tinyMCE throws:
Cannot read property 'selection' of undefined
I'm using the jquery plugin, so this is how I set it up:
$('#container textarea').tinymce({ /* options */ });
What should I be doing differently?

The correct command to use here is
// editor_id is the id of your textarea and
// tinymce will use this id to uniquely identify this editor instance
editor_id = $("#container textarea").attr('id');
tinymce.get(editor_id).hide();
to make it visible again use
tinymce.get(editor_id).show();

This question is about hiding and showing tinymce editor but if anyone came here about removing and re-adding tinymce editor without error then my solution can work for them.
To remove existing tinymce editor and add new needs clearance of tinymce.EditorManager.editors array. This solution works in both cases : 1. If you have only one editor and you want to remove and add it again. 2. If you have multiple editors and you want to remove some special editor and add it again.
console.log(tinymce.EditorManager.editors);
This will give you a view of the array and exact index of you desired editor which you want to remove. For example one sample output of above console can be:
Array[2]
0:B
1:B
length:2
textarea-1:B
textarea-2:B
_proto_Array[0]
This is the output of the console when i have two tinymce editors on textareas : #textarea-1 and #textarea-2 Lets suppose I want to delete #textarea-2 and re-add it then it can be done as follows:
tinymce.EditorManager.editors.splice(1, 1);//removing second element in array.
delete tinymce.EditorManager.editors['textarea-2'];//deleting respective textarea id from array
Then you can add it again simply using init:
tinymce.init({
selector:'#ts-textarea-2'
});
If you have only one textarea associated with tinymce editor lets say : #textarea-1 and you want to remove and re-initialize it then you can just empty tinymce.EditorManager.editors by :
tinymce.EditorManager.editors = [];
And then you can add using init command as explained above. Worked for me without any error.
I hope it helps

Instead of hiding it, try sending it off screen - something like:
$('#container').css('left', '-1000px');
EDIT/UPDATE:
You could also try removing TinyMCE from the textarea before you hide() the container, and then bring it back after you show(). But you'll need to give your textarea an #ID:
//To Enable
tinyMCE.execCommand('mceAddControl', false, $("#container textarea").attr('id'));
//To Disable
tinyMCE.execCommand('mceRemoveControl', false, $("#container textarea").attr('id'));

Apparently it was the animation. if I show()/hide() I'm fine, but when I try to animate in tinyMCE has an issue after I finish animating, possibly trying to set options once the textarea's display isn't none.

web - copy section to clipboard and remove certain elements

Ive got a method which will copy a section of html to the clipboard to allow pasting elsewhere.
It is usually a table of which will be the main content so it will be pasted into excel and keep its formatting, which is lovely.
What I want to do is remove certain elements from this section.
The main ones are checkboxes and textboxes - which cause excel to go really screwy, and for some reason you cannot delete them from excel - you just have to start a new sheet.
This is the method I am using to copy:
$('#CopyClipboard').click(function () {
var contentDiv = document.getElementById('copyablecontent');
var holdtext = document.getElementById('holdtext');
holdtext.innerText = contentDiv.innerHTML;
Copied = holdtext.createTextRange();
Copied.execCommand('Copy');
alert('Data copied to clipboard!');
});
(excuse the horrible mix of jquery and javascript).
So I have my 'contentDiv' variable, I want to parse that and remove all inputs, and possibly other elements too (I could give them all a css class 'doNotCopy' or something).
How can I do this?

you can use:
contentDiv.innerHTML.replace(/<input[^>]*>/g,"")
check the replace method here:
http://www.w3schools.com/jsref/jsref_replace.asp
you may have to adjust the regex for your needs