如何自定义MediaWiki可视化编辑器

我的Wiki上运行了MediaWiki可视化编辑器扩展，它运行良好。但是，我想自定义主要的VE工具栏以添加不同字体样式的列表，例如： 1.新 - >将包装文本<span class='new'>text here</span> 2.旧 - >将包装文本<span class='old'>text here</span>如何自定义MediaWiki可视化编辑器

有没有关于如何完成这个的例子？

the link question下的答案可能会朝着正确的方向发展，但我无法让它在我的环境中工作 - 链接不会添加到我的VE工具栏中。也许我错过了一个步骤，但即使如此，它只会添加一个链接，而不是围绕我的文本包装样式。所以请帮忙！

来源

2015-10-08 Constantin Scheder

你到目前为止尝试过什么？你使用什么版本的MediaWiki和VE？添加链接相对容易，但添加字体样式会有点困难，可能需要更多工作。考虑一下，关于如何扩展VE没有真正的文档，所以我认为解决这个问题的唯一方法是：阅读doc（doc.wikimedia.org）看看其他扩展，扩展VE和反复试验; ）想一想，VE是一个快速变化的工具（这就是为什么，还没有一个好的扩展文档），所以你使用过的API可能会在下一个版本中改变。 – Florian

Btw .:也许你想在phabricator.wikimedai.org中打开一个bug来修复文档问题，或者提供一个更简单的扩展方法来改变字体风格。 – Florian

所以我终于在经过大量的试验和错误后，自己终于解决了这个问题，并看着许多不同的职位;但我不相信这不是黑客行为;实际上，我正在编辑现有的类 - 添加我自己的注释 - 而不是创建一个干净的扩展。

下面是可视化编辑器的版本，我已经修改：可视化编辑器：REL1_25 2015-09-17T18：15：26 be84313

这里是我修改的进行比较：

 diff -r VisualEditor/extension.json /var/www/html/wiki/extensions/VisualEditor/extension.json 
    535a536,537 
    >        "lib/ve/src/dm/annotations/ve.dm.StrongAnnotation.js", 
    >        "lib/ve/src/dm/annotations/ve.dm.InsAnnotation.js", 
    602a605,606 
    >        "lib/ve/src/ce/annotations/ve.ce.StrongAnnotation.js", 
    >        "lib/ve/src/ce/annotations/ve.ce.InsAnnotation.js", 
    755a760,762 
    >        "visualeditor-annotationbutton-strong-tooltip", 
    >        "visualeditor-annotationbutton-ins-tooltip", 
    >        "visualeditor-annotationbutton-highlight-tooltip", 
    diff -r VisualEditor/lib/ve/i18n/en.json /var/www/html/wiki/extensions/VisualEditor/lib/ve/i18n/en.json 
    30c30 
    <  "visualeditor-annotationbutton-strikethrough-tooltip": "Strikethrough", 
    --- 
    >  "visualeditor-annotationbutton-strikethrough-tooltip": "Deleted", 
    33a34,36 
    >  "visualeditor-annotationbutton-strong-tooltip": "Hot", 
    >  "visualeditor-annotationbutton-ins-tooltip": "New edit", 
    >  "visualeditor-annotationbutton-highlight-tooltip": "Marked outdated", 
Only in /var/www/html/wiki/extensions/VisualEditor/lib/ve/lib/oojs-ui/themes/apex/images/icons: new.svg 
Only in /var/www/html/wiki/extensions/VisualEditor/lib/ve/lib/oojs-ui/themes/mediawiki/images/icons: new.svg 
Only in /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/ce/annotations: ve.ce.InsAnnotation.js 
Only in /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/ce/annotations: ve.ce.StrongAnnotation.js 
Only in /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/dm/annotations: ve.dm.InsAnnotation.js 
Only in /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/dm/annotations: ve.dm.StrongAnnotation.js 
Only in /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/ui/styles/images/icons: hot.svg 
Only in /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/ui/styles/images/icons: new.svg 
Only in /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/ui/styles/images/icons: old.svg 
diff -r VisualEditor/lib/ve/src/ui/styles/ve.ui.Icons.css /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/ui/styles/ve.ui.Icons.css 
198a199,210 
> .oo-ui-icon-strong { 
>  /* @embed */ 
>  background-image: url(images/icons/hot.svg); } 
> 
> .oo-ui-icon-new { 
>  /* @embed */ 
>  background-image: url(images/icons/new.svg); } 
> 
> .oo-ui-icon-highlight { 
>  /* @embed */ 
>  background-image: url(images/icons/old.svg); } 
> 
diff -r VisualEditor/lib/ve/src/ui/tools/ve.ui.AnnotationTool.js /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/ui/tools/ve.ui.AnnotationTool.js 
180a181,246 
> * UserInterface strong tool. 
> * 
> * @class 
> * @extends ve.ui.AnnotationTool 
> * @constructor 
> * @param {OO.ui.ToolGroup} toolGroup 
> * @param {Object} [config] Configuration options 
> */ 
> ve.ui.StrongAnnotationTool = function VeUiStrongAnnotationTool(toolGroup, config) { 
>  ve.ui.AnnotationTool.call(this, toolGroup, config); 
> }; 
> OO.inheritClass(ve.ui.StrongAnnotationTool, ve.ui.AnnotationTool); 
> ve.ui.StrongAnnotationTool.static.name = 'strong'; 
> ve.ui.StrongAnnotationTool.static.group = 'textStyle'; 
> ve.ui.StrongAnnotationTool.static.icon = 'strong'; 
> ve.ui.StrongAnnotationTool.static.title = 
>  OO.ui.deferMsg('visualeditor-annotationbutton-strong-tooltip'); 
> ve.ui.StrongAnnotationTool.static.annotation = { name: 'textStyle/strong' }; 
> ve.ui.StrongAnnotationTool.static.commandName = 'strong'; 
> ve.ui.toolFactory.register(ve.ui.StrongAnnotationTool); 
> 
> /** 
> * UserInterface ins tool. 
> * 
> * @class 
> * @extends ve.ui.AnnotationTool 
> * @constructor 
> * @param {OO.ui.ToolGroup} toolGroup 
> * @param {Object} [config] Configuration options 
> */ 
> ve.ui.InsAnnotationTool = function VeUiInsAnnotationTool(toolGroup, config) { 
>  ve.ui.AnnotationTool.call(this, toolGroup, config); 
> }; 
> OO.inheritClass(ve.ui.InsAnnotationTool, ve.ui.AnnotationTool); 
> ve.ui.InsAnnotationTool.static.name = 'ins'; 
> ve.ui.InsAnnotationTool.static.group = 'textStyle'; 
> ve.ui.InsAnnotationTool.static.icon = 'new'; 
> ve.ui.InsAnnotationTool.static.title = 
>  OO.ui.deferMsg('visualeditor-annotationbutton-ins-tooltip'); 
> ve.ui.InsAnnotationTool.static.annotation = { name: 'textStyle/ins' }; 
> ve.ui.InsAnnotationTool.static.commandName = 'ins'; 
> ve.ui.toolFactory.register(ve.ui.InsAnnotationTool); 
> 
> /** 
> * UserInterface highlight tool. 
> * 
> * @class 
> * @extends ve.ui.AnnotationTool 
> * @constructor 
> * @param {OO.ui.ToolGroup} toolGroup 
> * @param {Object} [config] Configuration options 
> */ 
> ve.ui.HighlightAnnotationTool = function VeUiHighlightAnnotationTool(toolGroup, config) { 
>  ve.ui.AnnotationTool.call(this, toolGroup, config); 
> }; 
> OO.inheritClass(ve.ui.HighlightAnnotationTool, ve.ui.AnnotationTool); 
> ve.ui.HighlightAnnotationTool.static.name = 'highlight'; 
> ve.ui.HighlightAnnotationTool.static.group = 'textStyle'; 
> ve.ui.HighlightAnnotationTool.static.icon = 'highlight'; 
> ve.ui.HighlightAnnotationTool.static.title = 
>  OO.ui.deferMsg('visualeditor-annotationbutton-highlight-tooltip'); 
> ve.ui.HighlightAnnotationTool.static.annotation = { name: 'textStyle/highlight' }; 
> ve.ui.HighlightAnnotationTool.static.commandName = 'highlight'; 
> ve.ui.toolFactory.register(ve.ui.HighlightAnnotationTool); 
> 
> /** 
diff -r VisualEditor/lib/ve/src/ui/ve.ui.CommandRegistry.js /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/ui/ve.ui.CommandRegistry.js 
164a165,182 
>    'strong', 'annotation', 'toggle', 
>    { args: ['textStyle/strong'], supportedSelections: ['linear', 'table'] } 
>  ) 
>); 
> ve.ui.commandRegistry.register(
>  new ve.ui.Command(
>    'ins', 'annotation', 'toggle', 
>    { args: ['textStyle/ins'], supportedSelections: ['linear', 'table'] } 
>  ) 
>); 
> ve.ui.commandRegistry.register(
>  new ve.ui.Command(
>    'highlight', 'annotation', 'toggle', 
>    { args: ['textStyle/highlight'], supportedSelections: ['linear', 'table'] } 
>  ) 
>); 
> ve.ui.commandRegistry.register(
>  new ve.ui.Command(
diff -r VisualEditor/lib/ve/src/ui/ve.ui.TriggerRegistry.js /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/ui/ve.ui.TriggerRegistry.js 
109,110c109,110 
<      new ve.ui.Trigger('cmd+\\'), 
<      new ve.ui.Trigger('cmd+m') 
--- 
>      new ve.ui.Trigger('cmd+\\')//, 
>      //new ve.ui.Trigger('cmd+m') 
113,114c113,114 
<      new ve.ui.Trigger('ctrl+\\'), 
<      new ve.ui.Trigger('ctrl+m') 
--- 
>      new ve.ui.Trigger('ctrl+\\')//, 
>      //new ve.ui.Trigger('ctrl+m') 
125c125,135 
<  'strikethrough', { mac: new ve.ui.Trigger('cmd+shift+5'), pc: new ve.ui.Trigger('ctrl+shift+5') } 
--- 
>  'strong', { mac: new ve.ui.Trigger('cmd+h'), pc: new ve.ui.Trigger('ctrl+h') } 
>); 
> ve.ui.triggerRegistry.register(
>  'ins', { mac: new ve.ui.Trigger('cmd+e'), pc: new ve.ui.Trigger('ctrl+e') } 
>); 
> ve.ui.triggerRegistry.register(
>  'highlight', { mac: new ve.ui.Trigger('cmd+m'), pc: new ve.ui.Trigger('ctrl+m') } 
>); 
> ve.ui.triggerRegistry.register(
>  'strikethrough', { mac: new ve.ui.Trigger('cmd+d'), pc: new ve.ui.Trigger('ctrl+d') } 
diff -r VisualEditor/modules/ve-mw/init/ve.init.mw.Target.js /var/www/html/wiki/extensions/VisualEditor/modules/ve-mw/init/ve.init.mw.Target.js 
190,193c190,193 
<    include: [ { group: 'textStyle' }, 'language', 'clear' ], 
<    forceExpand: [ 'bold', 'italic', 'clear' ], 
<    promote: [ 'bold', 'italic' ], 
<    demote: [ 'strikethrough', 'code', 'underline', 'language', 'clear' ] 
--- 
>    include: [ { group: 'textStyle' }, 'strong', 'ins', 'highlight', 'clear' ], 
>    forceExpand: [ 'strong', 'ins', 'highlight', 'strikethrough', 'clear' ], 
>    promote: [ 'strong', 'ins', 'highlight', 'strikethrough', 'bold', 'italic', 'underline' ], 
>    demote: [ 'superscript', 'subscript', 'code', 'clear' ] 
diff -r VisualEditor/VisualEditor.php /var/www/html/wiki/extensions/VisualEditor/VisualEditor.php 
462a463,464 
>      'lib/ve/src/dm/annotations/ve.dm.StrongAnnotation.js', 
>      'lib/ve/src/dm/annotations/ve.dm.InsAnnotation.js', 
534a537,538 
>      'lib/ve/src/ce/annotations/ve.ce.StrongAnnotation.js', 
>      'lib/ve/src/ce/annotations/ve.ce.InsAnnotation.js', 
706a711,713 
>      'visualeditor-annotationbutton-strong-tooltip', 
>      'visualeditor-annotationbutton-ins-tooltip', 
>      'visualeditor-annotationbutton-highlight-tooltip',

如果有人感兴趣，我也可以发布我创建的新课程;最后，我有兴趣听到有关如何以更可维护的方式实现此类内容的任何建议。

来源

2015-11-07 18:59:06

您是否继续研究此主题？我目前正试图通过添加一个像语言注释使用的小部件来向VisualEditor添加文本/背景颜色，但我被卡住了。 –

是的，我在一个生产网站上工作，但正如我上面所说的那样，这是一种破解 –

嘿，那是一段时间以前。但是你的帖子实际上对我很有帮助，谢谢。 –

如何自定义MediaWiki可视化编辑器

回答

相关问题