Làm thế nào để thêm một liên kết trong Thanh công cụ VisualEditor của MediaWiki?

Question

Tôi đang cố chèn một liên kết tùy chỉnh vào một trang đặc biệt trong thanh công cụ VisualEditor. Xem hình ảnh bên dưới.

See Image

Tôi googled rất nhiều nhưng không thành công. Ai đó vui lòng cung cấp đường dẫn ...

Answer 1

Tôi không chắc chắn tôi hiểu câu hỏi của bạn hoàn toàn. Nó đơn giản như chọn một số văn bản, nhấp vào biểu tượng chuỗi, sau đó nhấp vào tab External Link và dán liên kết của bạn ở đó.

---

Answer 2

câu trả lời của tôi là dựa trên các nguồn sau:

• MediaWiki core JS doc (ooui-js)
• VisualEditor JS doc (+ đọc mã của cả hai kho sử dụng cho VE, mediawiki/extension/VisualEditor và VisualEditor)

Ngoài ra, tôi khá chắc chắn rằng không có cách nào được ghi lại bằng cách thêm công cụ vào thanh công cụ trong VE, theo như tôi biết. Mặc dù có thể thêm công cụ vào nhóm, nhóm này đã được thêm vào, chủ yếu được sử dụng cho nhóm công cụ "Chèn", như trong Syntaxhighlight_GeSHi). Có, một cách dễ dàng hơn hoặc "tốt hơn" để làm điều này :)

Đầu tiên, VisualEditor cung cấp một cách để nạp các mô-đun bổ sung (được gọi là plugins) khi phần chính của VE tải (chủ yếu, khi bạn nhấp vào nút "Chỉnh sửa"). Các mô-đun cần được đăng ký qua biến toàn cầu $wgVisualEditorPluginModules (hoặc tương đương trong extension.json, nếu bạn đang sử dụng đăng ký tiện ích mới). Trong tệp đăng ký mở rộng của bạn, bạn nên khởi tạo một mô-đun (với các tệp kịch bản yêu cầu của bạn để thêm công cụ) và thêm nó làm plugin VE.

Ví dụ PHP (cũ đăng ký gia hạn thông qua các file PHP):

// other setup... 
$wgResourceModules['ext.extName.visualeditor'] = array(
    'localBasePath' => __DIR__, 
    'remoteExtPath' => 'extName' 
    'dependencies' => array(
     'ext.visualEditor.mwcore', 
    ), 
    'scripts' => array(
     'javascripts/ve.ui.ExtNameTool.js', 
    ), 
    'messages' => array(
     'extname-ve-toolname', 
    ), 
); 
$wgVisualEditorPluginModules[] = 'ext.extName.visualeditor'; 
// other setup... 

extension.json (mới JSON dựa trên đăng ký gia hạn):

// other setup... 
"ResourceModules": { 
    "ext.geshi.visualEditor": { 
     "scripts": [ 
      "javascripts/ve.ui.ExtNameTool.js" 
     ], 
     "dependencies": [ 
      "ext.visualEditor.mwcore" 
     ], 
     "messages": [ 
      "extname-ve-toolname" 
     ] 
    } 
}, 
"VisualEditorPluginModules": [ 
    "ext.extName.visualeditor" 
], 
// other setup... 

Bây giờ, nếu VE bắt đầu, nó sẽ được tải mô-đun của bạn, có tên là ext.extName.visualeditor trong ví dụ này, với tập lệnh ve.ui.ExtNameTool.js. Trong kịch bản này, bây giờ bạn có thể làm, những gì bạn muốn. Như một ví dụ, đây là một cách để thêm một module mới vào cuối danh sách toolgroup trên thanh công cụ:

Ví dụ về ve.ui.ExtNameTool.js:

(function() { 
    // create a new class, which will inherit ve.ui.Tool, 
    // which represents one tool 
    ve.ui.extNameTool = function extNameTool(toolGroup, config) { 
     // parent constructor 
     ve.ui.extNameTool.super.apply(this, arguments); 
     // the tool should be enabled by default, enable it 
     this.setDisabled(false); 
    } 
    // inherit ve.ui.Tool 
    OO.inheritClass(ve.ui.extNameTool, ve.ui.Tool); 
    // every tool needs at least a name, or an icon 
    // (with the static property icon) 
    ve.ui.extNameTool.static.name = 'extname'; 
    // don't add the tool to a named group automatically 
    ve.ui.extNameTool.static.autoAddToGroup = false; 
    // prevent this tool to be added to a catch-all group (*), 
    although this tool isn't added to a group 
    ve.ui.extNameTool.static.autoAddToCatchall = false; 
    // the title of the group (it's a message key, 
    // which should be added to the extensions i18n 
    // en.json file to be translateable) 
    // can be a string, too 
    ve.ui.extNameTool.static.title = 
     OO.ui.deferMsg('extname-ve-toolname'); 
    // onSelect is the handler for a click on the tool 
    ve.ui.extNameTool.prototype.onSelect = function() { 
     // show an alert box only, but you can do anything 
     alert('Hello'); 
     this.setActive(false); 
    } 
    // needs to be overwritten, but does nothing so far 
    ve.ui.extNameTool.prototype.onUpdateState = function() { 
    ve.ui.extNameTool.super.prototype.onUpdateState.apply(this, arguments); 
    } 
    // the tool needs to be registered to the toolFactory 
    // of the toolbar to be reachable with the given name 
    ve.ui.toolFactory.register(ve.ui.extNameTool); 
    // add this tool to the toolbar 
    ve.init.mw.Target.static.toolbarGroups.push({ 
     // this will create a new toolgroup with the tools 
     // named in this include directive. The naem is the name given 
     // in the static property of the tool 
     include: [ 'extname' ] 
    }); 
})(); 

Sau khi cài đặt phần mở rộng trong LocalSettings.php và khởi động VE, bạn sẽ thấy một công cụ mới trong thanh công cụ với tên đã cho. Nhấp vào nó sẽ hiển thị một hộp cảnh báo với nội dung "Xin chào". Như được viết trong các bình luận nội tuyến: Trong trình xử lý nhấp chuột (onSelect), bạn có thể làm bất cứ điều gì bạn muốn, ví dụ: mở liên kết trong tab mới, ví dụ: đến một trang đặc biệt. Để có được liên kết đến một trang đặc biệt, tôi khuyên bạn nên sử dụng mw.Title để có được một không gian tên được bản địa hóa.Ví dụ:

var relativeUrl = mw.Title.newFromText('RecentChanges', -1).getUrl(); 

Tham số đầu tiên của mw.Title.newFromText() là tên của trang, tham số thứ hai là ID của không gian tên (-1 là mặc định cho các trang đặc biệt và nên luôn hoạt động).

Tôi hy vọng điều đó sẽ hữu ích!