Extension talk:VisualEditor

Please note that the Wikimedia Foundation does not provide support for installing VisualEditor on third-party wikis. However, if you have a question we may try to help.

VE freezes while loading a page for a consecutive edit

Might sound strange but after a successful edit of any page, VE freezes while loading the same page for a consecutive edit (MediaWiki 1.43.3).

The scenario is the following:

1. I'm editing a page with ve and save it successfully. Changes are being shown in the page.
2. I click "edit" again and the page freezes while loading the editor, leaving the loading bar at around 75%.

However, pressing F5 or clicking the browser's reload button opens the editor. It's remarkable that this only happens while attempting a consecutive edit. One can always edit another page, return for another edit and it will work. Same if you switch to source editing and back to visual editing on a page - it'll work. Was able to reproduce this issue multiple times on two different installations (MediaWiki 1.43.3 plus bundled editor version) as well as with a fresh installation and with different Skins. Has anyone had the same issues so far?

--Totina (talk) 13:06, 4 September 2025 (UTC)

I am having an identical problem with version 1.43. It's funny that is happens on some workstations but not others. I've tried reloading browsers, different browsers, clearing cache's - everything I can think of. A fix or an idea would be very helpful. ~2026-61407-9 (talk) 22:19, 28 January 2026 (UTC)

Users on our server also report the same problem, also on 1.43 LTS. Virenerus (talk) 02:13, 12 February 2026 (UTC)

Content-Security-Policy and CSP-SOP

What requirements does the VisualEditor extension have in a secure website context? Some 'unsafe-inline' needed? Some else? --Narcis Garcia (talk) 08:41, 24 May 2025 (UTC)

Issue with Applying Custom Text Color in VisualEditor

I am currently working on a gadget to apply custom text colors in VisualEditor, but it is not working as expected. Specifically, when I select a color, the text does not change color, and only a tag is generated.

MediaWiki 1.39.0 PHP 7.4.33 (fpm-fcgi) VisualEditor 0.1.2 Issues When a color is selected, the text does not change color, and only a tag is generated. Console logs indicate that the annotation is being applied, but it does not reflect in the editor. Questions Is there an issue with my code, or are there any improvements that can be made? What is the correct way to apply custom text colors in VisualEditor?

Here is a summary of my code:

mw.loader.using([

    'ext.visualEditor.core',

    'ext.visualEditor.desktopArticleTarget.init',

    'ext.visualEditor.targetLoader',

    'ext.visualEditor.data'

]).then(function() {

    const toolGroup = document.querySelector(".oo-ui-toolbar-tools");

    if (toolGroup) {

        const newTool = document.createElement("span");

        newTool.className = "oo-ui-widget oo-ui-tool oo-ui-popupToolGroup";

        newTool.innerHTML = `

            <div class="ve-ui-toolbar-group-insert oo-ui-widget oo-ui-toolGroup oo-ui-indicatorElement oo-ui-labelElement oo-ui-popupToolGroup oo-ui-listToolGroup oo-ui-widget-enabled" title="文字色">

                <span tabindex="0" class="oo-ui-popupToolGroup-handle" role="button"></span>

                <span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon"></span>

                <span class="oo-ui-labelElement-label">字色</span>

                <span class="oo-ui-indicatorElement-indicator oo-ui-indicator-down"></span>

            

            <div class="oo-ui-popupToolGroup-tools　 oo-ui-clippableElement-clippable oo-ui-floatableElement-floatable oo-ui-popupToolGroup-tools oo-ui-listToolGroup-tools oo-ui-toolGroup-enabled-tools oo-ui-popupToolGroup-active-tools" style="display: none; position: absolute; top: 100%; left: 0; z-index: 100;">

                <div class="oo-ui-toolbar-tools" style="white-space: nowrap;">

                    <span class="oo-ui-tool" data-color="red"></span>

                        <a class="oo-ui-tool-link" style="color: red;">赤</a>

                    

                    <span class="oo-ui-tool" data-color="blue"></span>

                        <a class="oo-ui-tool-link" style="color: blue;">青</a>

                    

                    <span class="oo-ui-tool" data-color="green"></span>

                        <a class="oo-ui-tool-link" style="color: green;">緑</a>

                    

                </div>

            </div>

        `;

        const handle = newTool.querySelector('.oo-ui-popupToolGroup-handle');

        const tools = newTool.querySelector('.oo-ui-popupToolGroup-tools');

        handle.addEventListener('click', () => {

            const isExpanded = handle.getAttribute('aria-expanded') === 'true';

            handle.setAttribute('aria-expanded', !isExpanded);

            tools.style.display = isExpanded ? 'none' : 'block';

        });

        newTool.querySelectorAll('.oo-ui-tool[data-color]').forEach(colorTool => {

            colorTool.addEventListener('click', () => {

                const color = colorTool.dataset.color;

                const veTarget = ve.init.target;

                if (!veTarget) return;

                const surface = veTarget.getSurface();

                if (!surface) return;

                const fragment = surface.getModel().getFragment();

                if (!fragment.getText()) return;

                const annotation = new ve.dm.TextStyleAnnotation({

                    type: 'textStyle/span',

                    attributes: {

                        style: `color: ${color};`

                    }

                });

               

                fragment.annotateContent('set', annotation);

                tools.style.display = 'none';

                handle.setAttribute('aria-expanded', 'false');

            });

        });

        toolGroup.appendChild(newTool);

    }

});

If the topic is off or if any information is missing, I apologize in advance.

Any help would be greatly appreciated. Thank you!

240B:C020:473:A053:0:47:9B3F:C701 (talk) 12:04, 3 February 2025 (UTC)

I've created an extension for applying colors to text, background and table cells. Might be what you are looking for

https://github.com/Griboedow/ColorizerToolVe Urfiner (talk) 21:45, 16 May 2025 (UTC)

Contents Cached in Browser Causing Table to Not Update

When editing a table with VisualEditor, I made some edits and saved them. When I went back to that article to use VisualEditor again, when I opened VisualEditor, the table was showing contents of before I used VisualEditor. The contents all show correctly on the page when not in VisualEditor. Clearing my browser cache enabled VisualEditor to show the current table contents. So, this is a bug if VisualEditor is using old cached browser data. I only tried this using Firefox browser. Article used is: https://everquest.fanra.info/wiki/Type_18/19_augmentations Fanra (talk) 18:01, 10 January 2025 (UTC)

Actually, the entire VisualEditor has issues working in my Firefox. I'm not sure if it is due to my high privacy settings or it just doesn't like Firefox. I got it to work in Google Chrome, even though I have to refresh the page most of the time when it stops loading VisualEditor halfway through. The refresh of the page gets it to load. - Fanra (talk) 03:29, 11 January 2025 (UTC)

Bro I'm literally having this same issue on SPECIFICALLY my wiki and not any other wiki that I try to use with firefox. VectorV9260 (talk) 23:29, 10 January 2026 (UTC)

Can't set source editor as default after update

I have updated to the latest version but now the visual editor is the default when $wgVisualEditorUseSingleEditTab is true regardless. How can I set the source editor as default like it was before yet still have visual editor as an option when editing? 86.185.164.216 15:45, 25 March 2025 (UTC)

The strange thing I found is the source editor is sometimes the default for anonymous users and other times the visual editor is the default. It seems to depend on the IP or something. 81.151.8.175 10:12, 8 April 2025 (UTC)

Sudden Visual Editor Error

Since last night, when I try to use the Visual Editor extension to edit tables, I've been getting this error:

Error contacting the Parsoid/RESTBase server (HTTP 403): (no message)

This wasn't an issue on July 4, the last time I used it.

Here is my wiki URL.

https://mysterydungeonwiki.com/wiki/Mystery_Dungeon_Franchise_Wiki SungHerSong (talk) 20:35, 6 July 2025 (UTC)

@SungHerSong: This sounds like a change in the configuration of that wiki. Are you the administrator? Is someone else? Jdforrester (WMF) (talk) 17:45, 7 July 2025 (UTC)

Why is this so complicated?

I have years of experience running MediaWiki, yet I am hesitant to install the Visual Editor because of this page. What is all this? There are 41,000 bytes of instructions here. RESTbases, parsoid, dirty URLs, configuration options, experimental modes, virtual host issues with Apache2, instructions for long out of date versions mixed in with modern MediaWiki. Could someone please distill this down to a 10K or less summary, with bare minimum common-sense, safe configuration options, for MediaWiki 1.43+? Flatboy fisherrman (talk) 13:50, 7 July 2025 (UTC)

@Flatboy fisherrman: It should "just work" if you enable it, out-of-the-box. The details here are for people that run into trouble. Jdforrester (WMF) (talk) 17:45, 7 July 2025 (UTC)

So just add the one line wfLoadExtension( 'VisualEditor' ); and that's it?

What about Apache2 and slashes? Will there be problems if it can edit every namespace? What about enabling the user group to use the api? Is that the default state? Flatboy fisherrman (talk) 22:18, 8 July 2025 (UTC)

@Flatboy fisherrman: Yes. Shouldn't need extra work if you've got a normal set-up. VE by default will only edit 'content' namespaces. Nothing needs to be done re. the API. Jdforrester (WMF) (talk) 12:53, 10 July 2025 (UTC)

Where are VisualEditor citation icon classes in MediaWiki / en wiki?

On this VisualEditor guide page, it says there are 4 standard icons used in VisualEditor for citations: "ref-cite-web", "ref-cite-book", "ref-cite-news" and "ref-cite-journal", which correspond to CSS classes with the icon as a background SVG image called oo-ui-icon-ref-cite-news etc.

Later on the page, it says that if you want to make custom icons, you should create an icon class like "oo-ui-icon-ref-cite-dbase" in MediaWiki:Common.css and add the icon you want with "background-image:url(//upload.wikimedia.org/wikipedia/commons/1/12/VisualEditor_-_Icon_-_Ref_db.svg)" or similar. However, when I looked in MediaWiki:Common.css and https://en.wikipedia.org/wiki/MediaWiki:Common.css, I couldn't find any references to "ref-cite" classes.

Where are these default icons/classes actually defined for the VisualEditor cite tool? TROPtastic (talk) 01:47, 8 October 2025 (UTC)

@TROPtastic: The four standard ones are defined in-code in the Cite extenson, currently at mediawiki/extensions/Cite…modules/ve-cite/ve.ui.MWReference.init.js#93. They aren't defined on-wiki, as adding things to Common.css etc. is very expensive for all readers and shouldn't be generally used. Jdforrester (WMF) (talk) 14:25, 10 October 2025 (UTC)

@Jdforrester (WMF) Thanks for the clarification, I guess the guide page is a little outdated. In the section Additional types and its example about adding a database icon for a database reference citation, is it still accurate to say:

create the icon class "oo-ui-icon-ref-cite-dbase" in MediaWiki:Common.css and add the icon you want with "background-image:url(//upload.wikimedia.org/wikipedia/commons/1/12/VisualEditor_-_Icon_-_Ref_db.svg)"?

TROPtastic (talk) 04:45, 11 October 2025 (UTC)

@TROPtastic: I don't think any of that code has changed in 10 years, so it should still work. Why do you think it's outdated? Jdforrester (WMF) (talk) 19:00, 14 October 2025 (UTC)

@Jdforrester (WMF) Mostly it's the part in the guide that says to define new icon classes in MediaWiki:Commons.css (the excerpt I typed above), since my understanding now is that adding things to Commons.css should be generally avoided. I suppose that is also why classes like "oo-ui-icon-ref-cite-news" are not defined there, which does make it a bit harder to see the syntax for new icon classes. TROPtastic (talk) 06:05, 15 October 2025 (UTC)