Loading...
Loading...
SunEditorには、メディア、フォーマット、高度な機能などを網羅した24種類の組み込みプラグインが付属しています。
各プラグインは、ツールバーでの表示方法を決定する表示タイプに属します。
display プロパティは、プラグインがユーザーとどのようにやり取りするかを定義します。
image設定可能画像をアップロード、サイズ変更、整列する
video設定可能動画コンテンツを挿入および管理する
audio設定可能プレーヤーでオーディオファイルを挿入する
linkハイパーリンクの作成と編集
embed設定可能外部コンテンツを埋め込む(YouTube、iframeなど)
drawing設定可能キャンバスベースの描画ツール
math設定可能数式エディタ(KaTeX)
configurable とマークされたプラグインには、Playground で調整できるオプションがあります。
画像アップロード制限、フォントサイズ単位、表スクロールタイプ、メンショントリガーなどを調整できます。変更内容はライブエディターに即座に反映されます。
シンプルなコマンドボタンから本格的なダイアログベースの機能まで、カスタムプラグインを構築するための技術リファレンス。
プラグインクラスはoptions.pluginsに登録してください。コアがそれらをインスタンス化します。
すべてのエディタサービスは、this.$ を介してアクセスされます。コアモジュールを直接インポートしないでください。
ライフサイクルにフックするために、複数のコントラクト(ModuleModal、EditorComponent)を実装します。
import { PluginCommand } from 'suneditor/src/interfaces';
class HelloWorld extends PluginCommand {
static key = 'helloWorld';
/**
* @constructor
* @param {SunEditor.Kernel} kernel - The Kernel instance
*/
constructor(kernel) {
super(kernel);
this.title = 'Hello World';
this.icon = '<span style="font-size:14px">HW</span>';
}
/**
* @override
* @type {PluginCommand['action']}
*/
action() {
this.$.html.insert('<p>Hello, World!</p>');
this.$.history.push(false);
}
}
export default HelloWorld;プラグインがユーザーとどのようにやり取りするかに基づいて、基本クラスを選択してください。
PluginCommandcommand必須: action()Button click executes action immediately
組み込みの例: blockquote, hr, strike
PluginDropdowndropdown必須: action()Button opens menu, item click calls action()
組み込みの例: align, font, blockStyle
PluginDropdownFreedropdown-freeButton opens menu, plugin handles own events
組み込みの例: table, fontColor, codeBlock
PluginModalmodal必須: open(), modalAction()Button opens modal dialog
組み込みの例: link, image, video
PluginBrowserbrowser必須: open(), close()Button opens gallery/browser interface
組み込みの例: imageGallery
PluginFieldfieldResponds to editor input events
組み込みの例: autocomplete
PluginInputinputToolbar input element (not a button)
組み込みの例: pageNavigator
PluginPopuppopup必須: show(), controllerAction()Inline popup context menu
組み込みの例: anchor
プラグインは、他のプラグインタイプのインターフェースを実装することで、複数のインタラクションモードを提供することもできます。
fontSizeextends PluginInput+ PluginCommand+ PluginDropdownInput field + dropdown list + command (inc/dec) all controlling font size.
list_bulleted / list_numberedextends PluginCommand+ PluginDropdownCommand button for toggling list + dropdown for selecting list style.