building text editor template using html css js

To build a text editor we need firstly an HTML template like this one
<style> .buttons { width: 100px; display: inline-block; border:0;cursor:pointer} button { width: 100%; border: 0; cursor: pointer; margin: 2px; } ul.dropdown { padding-inline-start: 0.2px; display: none; background: #dadada; margin-block-start: 0; width:150px; z-index:99} li.item { list-style: none; padding: 4px;cursor:pointer } li.item:hover { background: #eee } .buttons:hover ul.dropdown{display:block; position:absolute} </style> <div> <div class="buttons" > <button>file</button> <ul class="dropdown"> <li class="item">open</li> <li class="item">new</li> <li class="item">save</li> <li class="item">saveas</li> </ul> </div> <div class="buttons"> <button>edit</button> <ul class="dropdown"> <li class="item">cut</li> <li class="item">copy</li> <li class="item">paste</li> <li class="item">selectAll</li> </ul> </div> <div class="buttons"> <button>about</button> <ul class="dropdown"> <li class="item">building text editor template using html css js</li> </ul> </div> <div contenteditable="true" style="border:1px solid #eee; padding:3px; margin:0 2px; height:300px"></div> </div>

this template content a buttons, dropdowns, div tag editable.
the dropdown also content a command buttons to do something like open file, save, copy, paste, insert image...
to do this, we need: file system accessAPI and clipboard api

© Manajmnt code

Share to :

☷✎