Příručka k rozšířením MediaWiki

CodeMirror Stav rozšíření: stabilníCategory:Stable extensions/cs
Implementace	Uživatelské rozhraníCategory:User interface extensions/cs
Popis	Provides syntax highlighting in editors
Autoři	Pavel Astakhov MusikAnimal Bhsd
Správci	Community Tech
Nejnovější verze	6.0.0
Zásady kompatibility	Vydání snímků současně s MediaWiki. Hlavní vývojová větev není zpětně kompatibilní.
PHP	7.4+
Licence	GNU General Public License 2.0 nebo novější
Stáhnout	Stáhněte si rozšíření Git [?]: Procházení úložiště (Phabricator · GitHub) Kontrola kódu Gerrit Zobrazení historie Git Stáhněte si zdrojový soubor tarball Category:Extensions in Wikimedia version control/cs README
Parametry $wgCodeMirrorContentModels $wgCodeMirrorV6 $wgCodeMirrorConflictingGadgets $wgCodeMirrorTitleCompletion $wgCodeMirrorDefaultPreferences $wgCodeMirrorLineNumberingNamespaces
Použité háčky (hooks) EditPage::showEditForm:initial Category:EditPage::showEditForm:initial extensions/cs EditPage::showReadOnlyForm:initial Category:EditPage::showReadOnlyForm:initial extensions/cs GetBetaFeaturePreferences Category:GetBetaFeaturePreferences extensions/cs GetPreferences Category:GetPreferences extensions/cs SpecialPageBeforeExecute Category:SpecialPageBeforeExecute extensions/cs UploadForm:initial Category:UploadForm:initial extensions/cs
Přeložte rozšíření CodeMirror, používá-li lokalizaci z translatewiki.net
Problémy	Otevřené úkoly · Nahlásit chybu

The CodeMirror extension provides a standalone editor that provides syntax highlighting in a number of programming and markup languages, including wikitext, using the CodeMirror library. It can be used with other editors such as WikiEditor , the Editor wikitextu 2017 , Proofread Page , and more. For usage and a list of features, see Help:Extension:CodeMirror .

Použití

Ohledně použití tohoto rozšíření viz Help:Extension:CodeMirror .

Dokumentaci JavaScriptu najdete na docs.wikimedia.org/CodeMirror.

Instalace

• Stáhněte soubor/y a vložte je do adresáře pojmenovaného CodeMirror ve vaší složce extensions/.
  Vývojáři a přispěvatelé kódu by si místo toho měli nainstalovat rozšíření from Git pomocí:

  cd extensions/
  git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/CodeMirror
  

• Na konec vašeho souboru LocalSettings.php přidejte následující kód:

  wfLoadExtension( 'CodeMirror' );
  

• Configure as required.
• Dokončeno – Přejděte na stránku Special:Version vaší wiki a zkontrolujte, zda bylo rozšíření úspěšně nainstalováno.

Konfigurace

# Enables use of CodeMirror by default but still allow users to disable it
$wgDefaultUserOptions[ 'usecodemirror' ] = true;

$wgCodeMirrorV6

Temporary feature flag to control the migration to CodeMirror 6 (T259059).

$wgCodeMirrorEnabledModes

Temporary feature flag to control conflicts with Extension:CodeEditor .

$wgCodeMirrorConflictingGadgets

An array of gadget names that, if enabled, will prevent CodeMirror from loading. Defaults to wikEd.

$wgCodeMirrorDefaultPreferences

Control which features are enabled by default for all users. Use true or false to enable or disable a feature entirely, or provide an array containing namespace IDs (integers) or content models (strings). For example, to limit autocompletion to JavaScript pages or templates, you could use:

$wgCodeMirrorDefaultPreferences[ 'autocomplete' ] = [ CONTENT_MODEL_JAVASCRIPT, NS_TEMPLATE ];

$wgCodeMirrorDefaultPreferences

Feature	2017 editor compatibility	Default value
activeLine	N	false
bidiIsolation	N	false
bracketMatching		true
lineNumbering		true
lineWrapping	[1]	true
specialChars	N	true
codeFolding	N	true
autocomplete	N	true
openLinks	N	true
whitespace	N	false
lint	N	['json','css','javascript','lua']

• No longer requires the use of WikiEditor .
• Support for Scribunto, JavaScript, CSS and JSON, as an alternative to CodeEditor .
• Significant performance improvements.
• Right-to-left support (T170001) with bidi isolation (T358804).
• Code folding (T30684).
• Autocompletion (T95100).
• Quickly open links with modifier key + click (T303392).
• Improved search panel (T371436).
• CodeMirror preferences (T359498).
• Syntax highlighting on read-only pages (T301615).
• Syntax highlighting at Special:ExpandTemplates.
• Robust JavaScript API for integration with extensions, gadgets, and user scripts.

• The ResourceLoader modules are changing. See the migration guide .
• The ext.CodeMirror.switch hook has been deprecated. Use ext.CodeMirror.toggle instead.
• The .cm-mw-mnemonic CSS class has been renamed to .cm-mw-html-entity.
• The .cm-mw-template-name-mnemonic class has been removed. Use .cm-mw-template-ground.cm-html-entity instead.
• The .cm-mw-apostrophes-bold and .cm-mw-apostrophes-italic CSS classes have been removed. Use .cm-mw-apostrophes instead.
• Line-level styling for <nowiki>, <pre>, or any tag without an associated TagMode has been removed (T351686).
• Mixed languages within wikitext are not yet supported (T357480).
• The browser's native search functionality (using Ctrl+F) has been replaced with search functionality built into CodeMirror. This is necessary to maintain performance (T303664).

Ensure you're using the new .v6 modules . Because CodeMirror 6 no longer relies on WikiEditor, there are some naming and behaviourial changes from the CodeMirror 5 counterparts:

Some module names are shown without the ext.CodeMirror prefix for brevity; replace the '…' when using.

The CodeMirror global has been removed entirely. For example, CodeMirror.fromTextArea( myTextarea ) will no longer work. Instead, first load the desired ResourceLoader modules , instantiate a CodeMirror object, and call the initialize() method.

If your script relies on the ext.CodeMirror.switch hook to change the way it interacts with the editor, you'll need to use ext.CodeMirror.toggle instead, or alternatively listen to an event. See the JavaScript integration section for more information.

• Extension:VisualEditor – uses CodeEditor modules to power syntax highlighting for other extensions integrating with VisualEditor (T400014):
  • Extension:Graph
  • Extension:Kartographer
  • Extension:Math
  • Rozšíření:Score
  • Extension:SyntaxHighlight
  • Extension:TabberNeue
• Extension:AbuseFilter – relies on CodeEditor for syntax highlighting of AbuseFilter syntax (T399673).
• Extension:WikiLambda – the ext.wikilambda.app module relies on CodeEditor (T400015).

{
	"attributes": {
		"CodeMirror": {
			"TagModes": [
				"foo": "mediawiki"
			]
		}
	}
}

class CodeMirrorHooks implements CodeMirrorGetModeHook {
	public function onCodeMirrorGetMode(Title $title, ?string &$mode, string $model ): bool {
		// Logic to determine if CodeMirror should be used
		if ( $title->hasContentModel( 'JsonLikeContentModel' ) ) {
			$mode = 'json';
			return false;
		}

		return true;
	}
}

"Hooks": {
	"CodeMirrorGetMode": "codemirror"
},
"HookHandlers": {
	"codemirror": {
		"class": "MediaWiki\\Extension\\MyExtension\\CodeMirrorHooks"
	}
}

CodeMirrorPluginModules is an extension attribute that allows side-loading a module with CodeMirror. This unconditionally loads the module whenever the ext.CodeMirror.v6 module is loaded.

extension.json:

{
	"attributes": {
		"CodeMirror": {
			"PluginModules": [
				"ext.MyExtension.CodeMirror"
			]
		}
	}
}

If you simply want to fetch or make changes to the document text, jQuery.textSelection is the easiest and most reliable means to do so. Usage of jQuery.textSelection on the textarea is bubbled up to CodeMirror, so you don't need to have any knowledge of whether CodeMirror is enabled:

const $textarea = $( '#wpTextbox1' )
const content = $textarea.textSelection( 'getContents' );
// Append "Foobar" to the content.
$textarea.textSelection( 'setContents', content + '\nFoobar' );

const require = await mw.loader.using( [ 'ext.CodeMirror.v6', 'ext.CodeMirror.v6.mode.mediawiki' ] );
const CodeMirror = require( 'ext.CodeMirror.v6' );
const mediawikiLang = require( 'ext.CodeMirror.v6.mode.mediawiki' );
const cm = new CodeMirror( myTextarea, mediawikiLang() );
cm.initialize();

const require = await mw.loader.using( [
	'ext.wikiEditor',
	'ext.CodeMirror.v6.WikiEditor',
	'ext.CodeMirror.v6.mode.mediawiki'
] );
const textarea = document.getElementById( 'wpTextbox1' );
mw.addWikiEditor( $( textarea ) );
const CodeMirrorWikiEditor = require( 'ext.CodeMirror.v6.WikiEditor' );
const mediawikiLang = require( 'ext.CodeMirror.v6.mode.mediawiki' );
const cmWe = new CodeMirrorWikiEditor( textarea, mediawikiLang() );
cmWe.initialize();

• blur
• focus
• keyup
• keydown
• scroll

Using these events, you can integrate with CodeMirror using the same code as the original textarea:

myTextarea.addEventListener( 'keyup', ( event ) => {
	console.log( event.key );
} );

await require = mw.loader.using( [ 'ext.CodeMirror.v6', 'ext.CodeMirror.v6.mode.mediawiki' ] );
const CodeMirror = require( 'ext.CodeMirror.v6' );
const mediawikiLang = require( 'ext.CodeMirror.v6.mode.mediawiki' );
// ext.CodeMirror.v6.lib is a dependency of ext.CodeMirror.v6, so it's already loaded at this point.
const { EditorView } = require( 'ext.CodeMirror.v6.lib' );
const myExtension = EditorView.updateListener.of( ( /** @type {ViewUpdate} */ update ) => {
	if ( update.docChanged ) {
	    // do something
	    console.log( update.changes );
	}
} );
const cm = new CodeMirror( myTextarea, mediawikiLang() );
cm.initialize( [ cm.defaultExtensions, myExtension ] );

Or if you need to interact with an existng CodeMirror instance:

// Ensure CodeMirror is initialized first
mw.hook( 'ext.CodeMirror.ready' ).add( ( cm ) => {
	const { EditorView } = require( 'ext.CodeMirror.v6.lib' );
	const myExtension = EditorView.updateListener.of( ( /** @type {ViewUpdate} */ update ) => {
		if ( update.docChanged ) {
		    // do something
		    console.log( update.changes );
		}
	} );
	cm.applyExtension( myExtension );
} );

mw.hook( 'ext.CodeMirror.input' ).add( ( update ) => {
	// Print the ChangeSet to the console
	console.log( update.changes.toJSON() );
} );

• User:Remember the dot/Syntax highlighter
• Extension:VisualEditor
• Extension:WikiEditor
• Extension:CodeEditor
• c:Category:MediaWiki extension CodeMirror