Topic on Extension talk:CodeEditor

How to set the content of the textbox?

9
He7d3r (talkcontribs)

If I go to https://en.wikipedia.org/wiki/Special:MyPage/common.js?action=edit and type $('#wpTextbox1').val('NEWCODE') in the console:

  • The code is replaced by "NEWCODE" if CodeEditor is disabled
  • Nothing happens if CodeEditor is enabled

What should be used to set the content of the textbox if CodeEditor is enabled? I know from en:Special:Diff/617061684 that we can get the contents by using

  • $( '#wpTextbox1' ).data( 'wikiEditor-context' ).$textarea.textSelection( 'getContents' ) or
  • $( '#wpTextbox1' ).textSelection( 'getContents' )

But I have no idea what to use to set the content...

Mxn (talkcontribs)
var editor = $(".ace_editor");
editor[0].env.document.setValue("// This is awesome!");
editor[0].env.editor.selectAll();
TheDJ (talkcontribs)

This would allow you to use the Surface of the ace editor directly yes. It is the interface that our textSelection plugin ought to be talking to really....

He7d3r (talkcontribs)
TheDJ (talkcontribs)

Yeah, the textSelection plugin basically abstracts away browser differences when it comes to dealing with text areas. The CodeEditor plugin uses a totally different text surface. You should see #wpTextbox1 here more as the form value, then a input field in the case of CodeEditor. It has a basic implementation of textSelection API, which allows it to 'communicate' it's value trough the text area object, but it uses a totally different text surface to draw the value.

The textSelection plugin is not fully implemented however (neither for textareas nor for CodeEditor). Notably the 'setContents' method is missing, which would be used for what you describe. But ou can select and then insert characters in the selection (encapsulateSelection allows this).

Some links: https://git.wikimedia.org/blob/mediawiki%2Fcore.git/HEAD/resources%2Fsrc%2Fjquery%2Fjquery.textSelection.js#L58 https://git.wikimedia.org/blob/mediawiki%2Fextensions%2FCodeEditor.git/c9499815539390beff23527dc968465c30d4ec92/modules%2Fjquery.codeEditor.js#L522

We ought to improve this at some point. The textSelection plugin is a remnant of the iframe wikicode highlighting experiment of the 2010 WikiEditor that got cancelled, so it hasn't seen too much action since then. It's currently only used for special character insertion.

He7d3r (talkcontribs)

For future reference: the setContents function was implemented in gerrit:149529.

However I didn't figure out how to use it as a solution for the initial problem. None of these work if CodeEditor is enabled:

  • $( '#wpTextbox1' ).textSelection( 'setContents', 'TESTING' )
  • $( '#wpTextbox1' ).data( 'wikiEditor-context' ).$textarea.textSelection( 'setContents', 'TESTING' )
Reply to "How to set the content of the textbox?"