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.

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)

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)

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)