Extension talk:CodeEditor

Jump to navigation Jump to search

About this board

Documentation Update & additional Namespaces

DesignerThan (talkcontribs)


maybe someone with knowledge of this extension can update the Documentation? As I had to find out, the config Variables have no effect anymore. That would be great. Also it would be nice to have an option, to add additional namespaces where the extension should work i. e. Templates ...

DesignerThan (talkcontribs)

I got it working in the Template Namespace. The problem was, that the content model was on "wikitext". That is changeable over the Pageinformation link in the tools. There the content model needs to be changed to "Sanitized CSS", this option is only available if the Extension is activated.

Reply to "Documentation Update & additional Namespaces"

How to get the code editor on regular pages?

Summary by Kghbln

Works as expected: "Provides a syntax-highlighting code editor for site & user JS, CSS and Lua pages" // No code editor on regular wiki pages, i.e. wiki pages with the "wikitext" content model.

Kghbln (talkcontribs)

I have the following configuration:

wfLoadExtension( 'CodeEditor' );
wfLoadExtension( 'WikiEditor' );
$wgDefaultUserOptions['usebetatoolbar'] = 1;

I get the code editor on pages with a content model out of the box if it is e.g. "json", "css" etc. How do I get this code editor on pages with the content model "wikitext"?

From the very basic docu I understand that I should get some extra button for the wiki editor however I cannot find it.

Not sure what to do. A hint is appreciated. Thanks.

I am on MW 1.31.x

Kghbln (talkcontribs)

Ok, I guess I can self answer: "Provides a syntax-highlighting code editor for site & user JS, CSS and Lua pages".

Rail01 (talkcontribs)


I recently found out that Ace editor has settings menu available under ctrl + , keyboard shortcut where users can switch between editor themes available by default and other options, but none of these is then preserved neither as a preference or at least in browser storage.

Can this be changed? Or at least can you tell me whether it's possible to alter these settings using JavaScript?

Thank you.

Small update: I managed how to alter some Ace session settings with codeEditor.config hook, but this isn't really a solution. Session instance only handles some basic settings such as tab size and whether to wrap text what is useful but doesn't replace actual extension's support for Ace settings manager.

Second update: I figured it out

Reply to "Settings preservation"

Change CodeEditor font to monospaced

3Qvery (talkcontribs)

How to change CodeEditor font?

I expect monospaced font. However, CodeEditor showed me proportional font (normal sans-serif font). But WikiEditor showed me is monospaced font. In setting, it is also monospaced font.

The worst thing is that, if I click some place at CodeEditor, the cursor indicator (the vertical bar) will show on the exactly monospaced font place. So that, if I use mouse to select some text, it showed to me and actually it selected are not same. I have to change back to WikiEditor to edit some text, but it is not available to input the tab in WikiEditor. So it is not convenient.


Whatamidoing (WMF) (talkcontribs)
Reply to "Change CodeEditor font to monospaced"

How to set the content of the textbox?

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!");
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?"
נועם ימיני (talkcontribs)

CodeEditor supports lua on pages in the "Module" namespace.

however, many times you'd like to test your module on a subpage of your user page before publishing it, like you often do with templates and articles. The Extension TemplateSandbox already support testing modules with names from the form "User:myusername/Module:modulename", but when you try to edit a page in that name, you have to do it with the regular wiki editor.

That problem does not exist with js and css pages because they are being identified by their extension, not their namespace.

I think that code editor should be available in modules that are subpages of a user page.

I have also opened a ticket in https://phabricator.wikimedia.org/T217508


נועם ימיני (talkcontribs)

I have suggested a code change in scribunto extension in the foregoing phabricator ticket.

It worked to me, I believe it should enter to the extension code.

Reply to "CodeEditor on lua subpages"

JS errors in browser console (Chrome)

Kellewic (talkcontribs)

I have Syntax Highlighting working and Scribunto working, but this extension throws the following errors in the browser console (not sure why). Using MediaWiki 1.30.0. If I comment CodeEditor from LocalSettings.php the errors go away:

VM116:125 This page is using the deprecated ResourceLoader module "jquery.ui.widget".
VM116:165 This page is using the deprecated ResourceLoader module "jquery.ui.position".
This page is using the deprecated ResourceLoader module "jquery.ui.core".
Please use "mediawiki.ui.button" or "oojs-ui" instead.

jQuery.Deferred exception: $button.data(...) is not a function TypeError: $button.data(...) is not a function
    at Object.updateButtonIcon (<anonymous>:506:280)
    at Object.updateCodeEditorToolbarButton (<anonymous>:506:345)
    at Object.setupCodeEditorToolbar (<anonymous>:505:837)
    at Object.$.wikiEditor.extensions.codeEditor (<anonymous>:516:172)
    at jQuery.fn.init.$.fn.wikiEditor (<anonymous>:36:196)
    at HTMLDocument.<anonymous> (<anonymous>:516:2260)
    at mightThrow (URL/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=0ocu5xa:49:598)
    at process (URL/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=0ocu5xa:50:269) undefined

Do I need to update some JS somewhere? Thanks.

TheDJ (talkcontribs)

What releases of the extensions WikiEditor and CodeEditor are you using ? It might be that they are not the same, and honestly we are bad at keeping compatibility of extensions between the various releases.

Kellewic (talkcontribs)

WikiEditor - 0.5.1

CodeEditor - (229be94)13:40, May 9, 2018

2605:A601:C65:AF00:DBDE:7B53:66F:54FA (talkcontribs)

I ran into this issue too. I had to re-download WikiEditor from the extension page on this site and re-install it. The version that came with my copy of mediawiki claimed to be 0.5.1, but reinstalling the extension still fixed the issue.

Reply to "JS errors in browser console (Chrome)"
Njardarlogar (talkcontribs)

More of an Ace editor question perhaps: how does one reference captured regex groups? \1 does not work.

Mxn (talkcontribs)

Ace is written in JavaScript, so it uses $1 to refer to captured groups. Per this document, $& is also available, as is $$ for a literal dollar sign. It doesn't look like &` and &' are available.

Reply to "Regex group capture"
Nikerabbit (talkcontribs)

The page seems to be missing some steps:

  • WikiEditor is required, but that isn't sufficient
  • One must also set $wgDefaultUserOptions['usebetatoolbar'] = 1;

Hopefully this note saves someone time I spend figuring this out :)

Kghbln (talkcontribs)

Thanks for the note. I have updated the documentation accordingly. Lucky me that I always have WikiEditor installed with this preference so I did not run into this.

Reply to "Installation"
Loman87 (talkcontribs)


I am quite a dummy in programming, so be patient with my question please. How hard would be to rebuild this extension to validate XML too?

Reply to "XML-TEI validation"