Wade IDE extension - Write into textarea
tupper

Hi all,

I just watched the tutorial and think the extension feature is really great! 

What I would like to do is to print some code into the textarea which is currently selected. E.g. the textarea for some function of my sprite.

I tried the following:

var div = document.createElement('div');
div.innerText = 'Insert Code';

document.getElementById('topBar').appendChild(div);
$(div).button().click(function()
{
  document.getElementById("#event_editor > textarea").value = "code";
});

Instead of "value" I also tried "innerHtml". But it seems nothing happens. I got the selector via the Chrome developer tool.

All 8 Comments
Gio

That's a css or jQuery style selector. You would need to use it with jQuery however be aware that it will potentially target more than one textarea

$("#event_editor > textarea").val("code");

 

foxcode

To expand on what Gio has said.

document.getElementById()

can only take in an id name. So if you have a text area, you could set an id either in javascript theArea.id = "myTextArea" or in html id="myTextArea"

This should work, but to be sure you have it right, try console.log(document.getElementById(putTheIdHere));

It should print a dom element in console, if it fails to do this, the element does not exist or is not yet part of the document.
 

$("#event_editor > textarea").val("code");

Regarding this, gio is correct that the selector you use "#event_editor > textarea" is a css selector. If you want to use it, you need to use the code Gio suggested, however you have to make sure it only returns one result. If there is more than one text area, it would return them all.

 

If you still have problems, give us a shout

tupper

Thank you.
I tried it the "getElementById()" way and did the following (inspired by this code): 
 

var div = document.createElement('div');
div.innerText = 'Insert Code';

document.getElementById('topBar').appendChild(div);
$(div).button().click(function()
{
  var myTextArea = document.getElementById('event_editor').getElementsByTagName('textarea')[0];
  
  console.log(myTextArea); // This prints a <textarea> piece of html code on the console. When highlighting the code, the textarea in the IDE is highlighted (see the screenshot). This seems to indicate that (at least) the correct textarea is selected?    
  
  myTextArea.value = "code"; // No errors thrown, but nothing happens
  myTextArea.val("code"); // This yields: Uncaught TypeError: myTextArea.val is not a function (because no JQuery is used in this way of getting to the textarea?)
});


Please refer to the comments in my code. Here is the screenshot:
 

foxcode

High tupper, you are correct that val() is a jquery function. While a textArea can have a value, I actually think they work differently to an input field.

 

Instead of myTextArea.value =

try

myTextArea.textContent = 

UPDATE

I just tried value and it worked for me... Think we need Gio in here

 

SECOND EDIT

You could still try jquery .val so long as you get text area using getElementById. $(myTextArea).val("code");

tupper

hi foxcode

$(myTextArea).val("code")

does not throw an error, but nothing seems to happen as well

as an alternative I could try to show my code in an javascript overlay

Gio

Hi tupper

First of all, that textarea isn't just a normal textarea - it's a pretty special text area with syntax higlighting, code autocomplete, syntax error checking, etc.

Therefore you can't just set a value like you would for a normal textarea, and the code to change its contents needs to be a bit more complex.

If you really need to change that content, you would do it like this:

document.getElementById('event_editor').aceInitialized.setValue('hello world');

However it may be better for you to create a new div, open it in a separate dialog, and show the content in there.

var myOwnDiv = document.createElement('div');
myOwnDiv.textContent = 'hello world';
$(myOwnDiv).dialog();

or something along those lines... what the best way is, really depends on what you're trying to achieve.

tupper

Thank you, this made it work! I'll let you when I will have finished the extension :]

By the way, an undo feature in the IDE would be really usefull! (STR+Z)

Gio

Yeah Undo is definitely on the list of things to do... quite a big job unfortunately, but it will happen eventually!

Post a reply
Add Attachment
Submit Reply
Login to Reply