CodeMirror Category:Stable extensions/zh
	Category:User interface extensions/zh
描述	Provides syntax highlighting in editors
作者	Pavel Astakhov MusikAnimal Bhsd
	Community Tech
最新版本	6.0.0
	快照跟随MediaWiki发布。
PHP	7.4+
	GNU通用公眾授權條款2.0或更新版本
下載	下載 Git [?]: 浏览存储库 (Phabricator · GitHub) Gerrit代码 Git提交日誌 下載原始碼(tarball壓縮) Category:Extensions in Wikimedia version control/zh README
$wgCodeMirrorContentModels $wgCodeMirrorV6 $wgCodeMirrorConflictingGadgets $wgCodeMirrorTitleCompletion $wgCodeMirrorDefaultPreferences $wgCodeMirrorLineNumberingNamespaces
EditPage::showEditForm:initial Category:EditPage::showEditForm:initial extensions/zh EditPage::showReadOnlyForm:initial Category:EditPage::showReadOnlyForm:initial extensions/zh GetBetaFeaturePreferences Category:GetBetaFeaturePreferences extensions/zh GetPreferences Category:GetPreferences extensions/zh UploadForm:initial Category:UploadForm:initial extensions/zh
季度下載量	234 (Ranked 11th)
正在使用的公开wiki数	6,549 (Ranked 62nd)
前往translatewiki.net翻譯CodeMirror
問題	开启的任务 ·

The CodeMirror extension provides syntax highlighting in MediaWiki wikitext editors using the CodeMirror library. For usage and a list of features, see Help:Extension:CodeMirror .

• 下载，并将解压后的CodeMirror移动到extensions/目录中。
  开发者和代码贡献人员应从Git安装扩展，输入：cd extensions/
git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/CodeMirror
• 将下列放置在您的LocalSettings.php 的底部：

  wfLoadExtension( 'CodeMirror' );
  

• Configure as required.
• 完成 – 在您的wiki上至Special:Version，以验证已成功安装。

# 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).

$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

• No longer requires the use of WikiEditor .
• 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).
• 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 only known usage of this with CodeMirror 5 is 扩展:Php标签 .
• 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:

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.

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

{
	"attributes": {
		"CodeMirror": {
			"ContentModels": [
				"proofread-page"
			]
		}
	}
}

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. If your plugin is only used in specific circumstances, consider having it check whether it is needed, and dynamically load the core code from a different module. This will avoid unnecessarily consuming end user bandwidth.

extension.json:

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

ext.MyExtension.CodeMirror.js:

// Only load in the template namespace
if ( mw.config.get( 'wgNamespaceNumber' ) === 10 ) {
	return mw.loader.using( 'ext.MyExtension.CodeMirror.core' );
}
return Promise.resolve();

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' );

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

mw.loader.using( [
	'ext.wikiEditor',
	'ext.CodeMirror.v6.WikiEditor',
	'ext.CodeMirror.v6.mode.mediawiki'
] ).then( ( require ) => {
	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 );
} );

mw.loader.using( [ 'ext.CodeMirror.v6', 'ext.CodeMirror.v6.mode.mediawiki' ] ).then( ( require ) => {
	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
• :WikiEditor
• :代码编辑器
• c:Category:MediaWiki extension CodeMirror