扩展程序:DrawioEditor

MediaWiki扩展手册

DrawioEditor 发行状态： 稳定版
实现	解析器函数
描述	draw.io流程图创建和内联编辑
作者	Markus Gebert, Hallo Welt! GmbH (Markus Gebert留言)
最新版本	3.0.0-alpha
兼容性政策	对于每个有长期支持的MediaWiki发行版本，扩展内都有对应的分支。
MediaWiki	>= 1.39.0
许可协议	MIT授權條款
下載	下載扩展 Git [?]: 下载Git master 浏览存储库 (Phabricator · GitHub) 提交历史 存储库貢獻者 (GitHub) 代码复核
参数 $wgDrawioEditorImageType $wgDrawioEditorBackendUrl
使用的函数钩 OutputPageParserOutput ParserFirstCallInit
季度下載量	104 (Ranked 56th)
前往translatewiki.net翻譯DrawioEditor扩展
問題	开启的任务 · 报告错误

DrawioEditor是一个MediaWiki扩展，它集成了https://draw.io流程图编辑器，并允许对图表进行内联编辑。

警告

使用前请仔细阅读这些警告：

• The default editor functionality is loaded from draw.io (for configuration options see below). This code only provides integration.
• 实际的编辑器功能是从draw.io加载的。 此代码仅提供集成。
• Be aware that draw.io is an online service and while this plugin integrates the editor using an iframe and communicates with it only locally in your browser (javascript postMessage), it cannot guarantee that the code loaded from draw.io will not upload any data to foreign servers. This may be a privacy concern. Read the Privacy section in the documentation on GitHub for more information. When in doubt, don't use draw.io or this module. You have been warned!
• 这个插件是很新的，可能仍然有错误，所以它可能与您的安装一起工作，也可能不工作。

• 
• 
• 

功能

• draw.io chart creation and editing.
• Inline Editing and javascript uploads on save, you never leave or reload the wiki page.
• Image files are transparently stored in the standard wiki file store, you don't need to worry about them.
• Versioning is provided by the file store, revert to an older version of the chart at any time.
• Draw.io original XML data is stored within the image files, so only one file must be stored per chart.
• Supports multiple charts per page.
• Supports relative and fixed chart dimensions.

条件

• When you intend to use SVG which is recommended, you might want to install Extension:NativeSvgHandler too. Also you need a browser that supports SVG.
• 虽然在较旧的浏览器中可以显示图表，尤其是在使用PNG时（SVG是默认的，也是推荐的），但保存图表需要一个相当新的浏览器。

安裝

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

  wfLoadExtension( 'DrawioEditor' );
  

•  完成 – 在您的wiki上导航至Special:Version，以验证已成功安装扩展。

配置

$wgDrawioEditorBackendUrl

To avoid the mentioned privacy concerns, you can change the URL of the editor using this setting in LocalSettings.php (i.e. use the officially provided docker image from jgraph/docker-drawio as server). The URL given here is used to load the draw.io/diagrams.net editor components embedded in an iframe, WARNING: changing this URL is officially not supported, but works, only change this for testing purpose or if know what you are doing! The default value is https://embed.diagrams.net.

使用

添加图表

1. Add the following tag to any wiki page to insert a draw.io chart: {{#drawio:ChartName}} ChartName must be unique and will be used as the basename for the backing file.
2. Save the wiki page.
3. Since no chart exists at this point, a placeholder will be shown where you've put the drawio tag. Click on the Edit link at the top right of it.
4. Draw your chart, click Save to save and Exit to leave Edit mode.

编辑图表

Each chart will have an Edit link at its top right. Click it to get back into the editor. Click Save to save and Exit to get out of the editor. If a wiki page has multiple charts, only one can be edited at the same time.

查看或恢复到旧版本

每次保存时，都会将支持文件的新版本添加到wiki文件存储中。 您可以在不进行编辑的情况下单击图表来到达那里。 在那里，你可以查看并恢复到旧版本，就像上传到wiki的任何文件一样。

选项

Options are appended to the tag separated by |. For example:

{{#drawio:ChartName|max-width=500px}}

图表尺寸

虽然默认值在大多数情况下都很好，但可能需要控制图表的显示方式。 以下选项可用于：

• width: Sets the chart width. Defaults to 100%.
• max-width: Set the maximum chart width if width is relative. Defaults to chart.
• height: Sets the chart height. Defaults to auto. Usually not used.

These option take any absolute CSS length value as argument, for example:

• 400px
• 80%
• auto

The keyword chart has a special meaning and stands for the actual size of the chart. When the chart is saved, the image dimensions are automatically adjusted. Usually it's preferable to use chart instead of a fixed pixel value.

The default behaviour is the let the chart scale (width=100% and height=auto) until it reaches its actual width stored in the chart (max-width=chart).

If you want it to scale further or less, you can adjust max_width manually. Use none to allow infinite scaling.

If you just want a fixed width, set width to chart or some fixed CSS value and leave height on auto. Unless you need a fixed sized image area before the image is actually loaded or really need to scale based on height, there is usually no point in setting height. If you set it you probably should set width to auto, or when setting both use chart so you don't need to update the values manually every time your image changes. Examples

• Let the chart scale until it reaches its actual width (default):

{{#drawio:ChartName}}

Same as:

{{#drawio:ChartName|width=100%|max-width=chart|height=auto}}

• Let the chart scale until it's 800 px wide:

{{#drawio:ChartName|max-width=800px}}

• Let the chart scale infinitely:

{{#drawio:ChartName|max-width=none}}

• Fixed width:

{{#drawio:ChartName|width=600px}}

• Fixed width using the actual chart width:

{{#drawio:ChartName|width=chart}}

• Fixed height and width using the actual chart dimensions:

{{#drawio:ChartName|width=chart|height=chart}}

隐私

As mentioned in the Warnings Section above, there are some privacy concerns when using this plugin (or draw.io in general). Carefully read the information below, especially when you're running a wiki in a private environment.

draw.io may change it's code at any time, so the everything below could be outdated by the time you read it.

推荐人泄漏

单击图表的“编辑”链接时，draw.io编辑器将加载到iframe中。 此时，浏览器将从draw.io服务器加载所有draw.io代码。 虽然它在iframe中运行，并且无法访问您的wiki页面内容或任何其他资源，但您的浏览器仍可能向draw.io服务器发送包含当前wiki页面URL的引用，这在您的环境中可能是问题，也可能不是问题。 The wiki setting $wgReferrerPolicy may help you with this, but only for modern browsers.

图表数据隐私

Obviously the chart data must be passed to the draw.io application. The plugin uses the draw.io embed mode and passes the data to draw.io running in an iframe using javascript's postMessage(). This part happens locally, the data does not leave your browser. Currently, there does not seem to be any interaction with the draw.io servers while editing, which is good but of course this could change at any time without you or your wiki's users noticing. When saving, the file data is prepared (exported) by the iframe and passed back to this plugin (again) using postMessage(). The plugin then safely uploads the new version to the wiki file store. While the data passing happens locally and uploading is safe because it's done by this plugin in the main window context, the draw.io data export code running in the iframe seems to require interaction with draw.io servers in some cases.

One example is when you are using the Safari browser and save a chart which uses type png (see Options above). That process does not seem to be entirely implemented in javascript and needs the draw.io servers to generate the PNG data. This means your chart data leaves the browser. It is sent SSL encrypted and the draw.io folks probably don't care about your chart, but of course it's up to you to decide wether you can accept his or not. SVG does not seem to have that problem, at least in Chrome, Firefox and Safari, so I recommend using that. There may be other circumstances under which data leaves the browser. If this is a concern, you should check wether your use cases trigger such uploads, or not use this plugin and draw.io at all.

Again, be aware that the draw.io code running in the iframe may change its behavior at any time without you noticing. While that code has no access to your wiki, it may cause your chart data to be leaked. If this is a concern, don't use this plugin.

参见

• Diagram extensions

外部链接

• draw.io
• Anja Ebersbach: draw.io für MediaWiki und BlueSpice – Kollaborativ erstellte Zeichnungen, Hallo Welt! Blog on July 11, 2017. (german)
• Extension reference: DrawioEditor