This function acts on the selected text of editable elements. And it's even more difficult to modify it!įortunately, here comes a very powerful function: document.execCommand(). JavaScript doesn't provide an easy way to get the selected text of a webpage. Discovery of execCommand() methodīefore doing something with these buttons, we have to think about a new problem: how to modify the style of the selected text when the user clicks on a button? We can now test our code with this HTML paragraph: Parent.insertBefore(buttons_container, editor.nextSibling) Otherwise, we have to insert them before the element placed just after the editor. If the last child of the parent is the editor itself, we just have to append the buttons to this parent. We'll change its state thanks to the Edit button.īut wait! We have created the buttons, but we didn't insert them inside our page! We want to display them just below the editable element, so we have to call a function like insertAfter(): unfortunately, this method doesn't exist in JavaScript.īasically, we have to get the parent of the editable element. You can see that some are inside a container: the goal of this is to hide them when the element is not editable. This code is very simple: we just set some buttons for the future interface of the WYSIWYG. We create the buttons inside the container Var buttons_container = document.createElement('div') īuttons_='center' īuttons_container.className='makeWYSIWYG_buttons_container' If we want to allow him to format the content, bold it or underline it for example, we have to add some buttons.įurthermore, because of our previous code, the element is not editable anymore by default: we have to add a button to fix that! The contenteditable attribute permits the user to only modify the text. This method will permit us to toggle the editable state of our editor! 3. This function permits making the element editable or notīool = bool=undefined?true:(typeof bool = 'boolean'?bool:true) We can go further by adding to the element a method that makes it editable or not:Įditor.isEditable=false //By default, the element is not editableĮtAttribute('contenteditable', false) There is nothing special in this code: we just check if the function receives a not NULL parameter and, if so, we set its contenteditable attribute to true. If the DOM element we want to edit existsĮtAttribute('contenteditable',true) We can start to build our makeWYSIWYG() function: This simple attribute is sufficient! The most cool part is that it works well on all current browsers, including IE7 and IE8! HTML5 provides this new attribute: by setting it to true, it becomes editable! To do that, we'll simply set its contenteditable attribute to true and create some buttons in order to format the content.īelow is an example of how we'll be able to call out the function:Īnd that's all! 2. We'll make a simple function: by passing any DOM element to this function, it'll become editable. People are used to writing on software like Microsoft Word, where the text they write is formatted exactly as the final result they will have: we call this a WYSIWYG.īy following this tutorial, you will be able to create a WYSIWYG thanks to HTML5, with only a few lines of JavaScript!ĭeveloping a WYSIWYG is not an easy task, so we have to define exactly what we want to develop. If we want to allow users to format their inputs, we often use a system made of custom tags like BBCode, but that it is not very convenient for a lambda user. In order to be efficient, a form has to be as user-friendly as possible. Using the HTML5 attribute contenteditable to create a WYSIWYGįorms are the main interface between our visitors and our website.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |