#JAVASCRIPT REDACTOR CODE#

I have converted my SCSS code into normal CSS here so that everyone can understand it.īut I don’t explain anything else about this, because CSS basics should be clear, if you want to program such an editor. If you use your own icons this is not necessary for you. Therefore I have to insert a corresponding note on my page. Īnd this is how the entire HTML code looks at a glance: There you have the possibility to enter the link and choose if you want to open the link in a new window. This modal is opened when we want to insert a link. html-view for the HTML view, because we want to switch between HTML and visual view later in the editor.

#JAVASCRIPT REDACTOR FREE#

Feel free to try this out if you don’t know this feature. This property allows us to edit content directly inline without input. visual-view, which also gets the property contenteditable. In the content area we have two sections: An HTML view and a visual view. So you can easily extend the editor with more commands here. There is a list of MDN web docs for this purpose. The Data Action is the command that will be executed later on the selected text. This is what the two toolbar lines look like in HTML: Advertisements This is important later so that we can set the button active if the current text selection has a certain formatting. In addition, some elements have a data tag name ( data-tag-name). This data action contains the command that is to be executed later on the selected text. In such a box there is always a span element with a data action ( data-action). box boxes in each line for a rough outline of the formatting options. line), but there can be as many as you like. I have arranged the toolbar in two lines (. toolbar and a container for the different views (Visual view & HTML view). This includes a container for the toolbar. Our main HTML task is to create the editor toolbar. AdvertisementsĪlso on this page I use this rich text editor for the comments! 🙂 1. Here is the running demo version of the editor we are about to code together.

In the next steps I will go into the implementation of this WYSIWYG editor in detail and at the end you will be able to program your own editor The following demo is created with pure HTML, CSS and pure JavaScript. However, you might find one or the other editor a bit overloaded, too complicated or you just want to program your own WYSIWYG editor.

Many of the available editors, like TinyMCE, work really well and are great for most projects.

3.5 Remove formatting when pasting text (paste event).

3.4 Enable toolbar buttons when formatting is selected.

3.3 Program link modal (pop-up) functionality.

3.2 Assign functions to toolbar buttons.

They should be created as JSON files in your config/redactor/ folder.įor example, if you created a config/redactor/Standard. You can create custom Redactor configs that will be available to your Redactor fields. craft install/plugin redactor Configuration Redactor Configs Open your terminal and run the following commands: # go to the project directory cd /path/to/my-project.test Then click on the “Install” button in its modal window. Go to the Plugin Store in your project’s Control Panel and search for “Redactor”.

#JAVASCRIPT REDACTOR INSTALL#

You can install this plugin from the Plugin Store or with Composer. This plugin requires Craft CMS 4.0 or later. This plugin adds a “Redactor” field type to Craft CMS, which provides a rich text editor powered by Redactor by Imperavi.

Javascript redactor