如何自定義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可視化編輯器

回答

相關問題