execCommands supported in your browser
Try to select contents below and click commands to execute the commands on it.
I use the HTML attribute
contenteditable=true to allow modifications to the
content. Updated: Added
font awesome icons. Inspired by Cut and Copy (from JavaScript)
2017-06-04 updated:As pointed out by @Robvanhe the pen did not actually work in Safari. It was due to selection being cleared after click, so no selection to apply command existed. Fixed now. Rewritten also to vanilla javascript (no use for Angular).
2018-04-17 updated:Forked by Chris Mills to create a version of this demo with clean content.
Try to alter this text using the execCommands buttons above
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper in nunc at mattis. Suspendisse metus augue, pellentesque finibus luctus dictum, tempor id nunc. Phasellus semper magna ac interdum scelerisque. Vestibulum laoreet sapien a nisi ullamcorper, nec luctus neque eleifend. Aliquam vel tortor justo. Nam aliquam dapibus mi ut volutpat. Donec eros turpis, gravida et neque nec, interdum pulvinar nibh. Ut vel sodales nulla, a tempus sem. Nunc facilisis pretium aliquam. Proin nulla ante, congue at purus sit amet, commodo placerat erat. Sed malesuada eros nulla, in cursus urna elementum finibus. Suspendisse posuere purus pellentesque rutrum tempor. Nunc nec tincidunt est. Sed convallis ligula quis dui laoreet maximus. Nulla pharetra placerat quam ut rutrum. Nullam sit amet vehicula nisi.
Pellentesque feugiat posuere fermentum. In ut varius odio, nec venenatis lorem. Pellentesque interdum odio tortor, ac hendrerit mauris venenatis nec. Maecenas finibus dapibus eleifend. Nulla rhoncus metus non nisi rutrum tempor. Cras luctus lacinia eros sed volutpat. Duis accumsan quam libero, non accumsan nisl faucibus sit amet.
Cras tincidunt magna malesuada maximus tristique. Sed a fringilla ipsum. Nam malesuada gravida commodo. In ut convallis neque. Nulla ut consequat nisi, a imperdiet ante.