The HTML Bootstrap editor allows you to create a much more attractive and responsive layout. It is based on the Bootstrap 4 framework and its drag-and-drop usage makes it easy to integrate content into Moodle. It offers a wide range of elements (text, image, Youtube video, embed elements, etc.) commonly used today. This editor meets the first level of accessibility standards and ensures a consistent presentation of content, regardless of the type of device used: computer, tablet or smartphone.
After installing this plugin, it is necessary to install atto_htmlbootstrapeditor (https://moodle.org/plugins/atto_htmlbootstrapeditor) in order to add the button in the Atto editor.
https://github.com/SN-RECIT-formation-a-distance/html-bootstrap-editor-showcase
To make the Pixabay feature available inside the editor, the administrator must:
By default, the editor will load the main CSS file compiled by Moodle. However, if you want to use your own styles, you have the option to use inline CSS or external CSS files.
To use inline CSS or an external CSS file with the editor, you will need to add the title attribute to your style tag and specify the value of the title attribute in the stylesheet_to_add
setting. For example, you might write something like this:
<style title="example" href="https://github.com/SN-RECIT-formation-a-distance/moodle-tool_htmlbootstrapeditor/blob/main/path/to/external/css/file">
This will tell the editor to load the specified CSS file (in this case, "example") when it is rendering the content of the editor canvas.
The files styles.css and content.js are a copy from the library html-bootstrap-editor.