diff --git a/versioned_docs/version-4.1/apis/plugintypes/atto/_examples/button.md b/versioned_docs/version-4.1/apis/plugintypes/atto/_examples/button.md new file mode 100644 index 0000000000..e2b7e9c1b6 --- /dev/null +++ b/versioned_docs/version-4.1/apis/plugintypes/atto/_examples/button.md @@ -0,0 +1,4 @@ + +The plugin must implement a YUI module that will be included by the editor when the page loads. + +That YUI module **must** be named `button` and must create a namespaced class in `Y.M.[plugin name]`. diff --git a/versioned_docs/version-4.1/apis/plugintypes/atto/_examples/button.tsx b/versioned_docs/version-4.1/apis/plugintypes/atto/_examples/button.tsx new file mode 100644 index 0000000000..011667eb0c --- /dev/null +++ b/versioned_docs/version-4.1/apis/plugintypes/atto/_examples/button.tsx @@ -0,0 +1,69 @@ +/** + * Copyright (c) Moodle Pty Ltd. + * + * Moodle is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Moodle is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Moodle. If not, see . + */ +import React from 'react'; +import { ComponentFileSummary } from '../../../../_utils'; +import type { Props } from '../../../../_utils'; + +const defaultExample = `Y.namespace('M.atto_media').Button = Y.Base.create( + 'button', + Y.M.editor_atto.EditorPlugin, + [], + { + initializer: function() { + this.addButton({ + callback: this._toggleMedia, + icon: 'e/media', + inlineFormat: true, + + // Key code for the keyboard shortcut which triggers this button: + keys: '66', + + // Watch the following tags and add/remove highlighting as appropriate: + tags: 'media' + }); + }, + + _toggleMedia: function() { + // Handle the button click here. + // You can fetch any passed in parameters here as follows: + var langs = this.get('langs'); + } + }, { + ATTRS: { + // If any parameters were defined in the 'params_for_js' function, + // they should be defined here for proper access. + langs: { + value: ['Default', 'Value'] + } + } + } +); +`; +import ButtonDescription from './button.md'; + +export default (initialProps: Props): ComponentFileSummary => ( + +); diff --git a/versioned_docs/version-4.1/apis/plugintypes/atto/_examples/lib.md b/versioned_docs/version-4.1/apis/plugintypes/atto/_examples/lib.md new file mode 100644 index 0000000000..b303cf986e --- /dev/null +++ b/versioned_docs/version-4.1/apis/plugintypes/atto/_examples/lib.md @@ -0,0 +1,7 @@ + +An optional file which can be used to implement optional component callbacks. + +The available callbacks are: + +- `atto_[pluginname]_strings_for_js` - To add strings required by the YUI code +- `atto_[pluginname]_params_for_js` - To get the parameters required to instantiate the plugin diff --git a/versioned_docs/version-4.1/apis/plugintypes/atto/_examples/lib.php b/versioned_docs/version-4.1/apis/plugintypes/atto/_examples/lib.php new file mode 100644 index 0000000000..ef29ea076f --- /dev/null +++ b/versioned_docs/version-4.1/apis/plugintypes/atto/_examples/lib.php @@ -0,0 +1,37 @@ +/** + * Initialise the js strings required for this plugin. + */ +function atto_media_strings_for_js(): void { + global $PAGE; + + $PAGE->requires->strings_for_js([ + 'add', + 'width', + ], 'atto_media'); +} + +/** + * Sends the parameters to the JS module. + * + * @return array + */ +function atto_media_params_for_js(): array { + global $OUTPUT, $PAGE; + $currentlang = current_language(); + $langsinstalled = get_string_manager()->get_list_of_translations(true); + $params = [ + 'langs' => [ + 'installed' => [], + ], + ]; + + foreach ($langsinstalled as $code => $name) { + $params['langs']['installed'][] = [ + 'lang' => $name, + 'code' => $code, + 'default' => $currentlang == $code, + ]; + } + + return $params; +} diff --git a/versioned_docs/version-4.1/apis/plugintypes/atto/index.md b/versioned_docs/version-4.1/apis/plugintypes/atto/index.md new file mode 100644 index 0000000000..433c868c77 --- /dev/null +++ b/versioned_docs/version-4.1/apis/plugintypes/atto/index.md @@ -0,0 +1,112 @@ +--- +title: Atto +tags: [] +--- + + + +Atto is a JavaScript text editor built specifically for Moodle. It is the default text editor in Moodle from 2.7 onwards, and is implemented as a standard Moodle [text editor plugin](./../../subsystems/editor/index.md). Most of the code is written in JavaScript using YUI modules. + +All of the buttons in Atto are implemented as Moodle subplugins. This means that the subplugins can do anything a subplugin can do including, using language strings, database tables, other JavaScript, and more. + +:::caution Sunset of Atto + +A new Editor was created for Moodle 4.1 and later using the latest version of TinyMCE. + +It is likely that Atto will be removed in Moodle 4.6. + +::: + +## File structure + +import { + Lang, + Lib, + VersionPHP, +} from '../../_files'; +import Button from './_examples/button'; + +Atto plugins are located in the `/lib/editor/atto/plugins` directory. + +Each plugin is in a separate subdirectory and consists of a number of _mandatory files_ and any other files the developer is going to use. + +
+ View an example directory layout for the `atto_media` plugin. + +```console + lib/editor/atto/plugins/media + |-- db + | └-- upgrade.php + |-- lang + | └-- en + | └-- atto_media.php + |-- yui + | └-- src + | └-- button + | └-- atto_media.php + | ├── build.json + | ├── js + | │   └── button.js + | └── meta + | └── button.json + |-- settings.php + └-- version.php +``` + +
+ +Some of the important files for the Atto plugintype are described below. See the [common plugin files](../commonfiles) documentation for details of other files which may be useful in your plugin. + +### version.php + + + +### lib.php + +import LibExample from '!!raw-loader!./_examples/lib.php'; +import LibDescription from './_examples/lib.md'; + + + +### yui/src/button/* + + + +