Editor Demo
<!DOCTYPE html> <html> <head> <title>Awesome Wikidot Editor</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="https://extension.wikidot.com/local--files/editor/jquery.caretposition.js"></script> <script type="text/javascript" src="https://extension.wdfiles.com/local--code_/resource%3Aeditor-stable/1"></script> <script type="text/javascript" src="https://extension.wdfiles.com/local--code_/resource%3Aeditor-module-list/1"></script> <script type="text/javascript"> $(document).ready(function(){ $.jxeenoEditor("#awesomeEditor"); }); </script> <style> html, body{ padding: 0; margin: 0; height: 100%; } textarea{ font-family: Consolas, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace; font-size: 12px; } #wdEditor-suggest{ position: absolute; border: 1px solid #aaaaaa; background: #ffffff; color: #222222; font-family: Consolas, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace; font-size: 12px; list-style: none; padding: 2px; margin: 0; display: none; outline: none; z-index: 100; } #wdEditor-suggest .ui-menu-item{ margin: 0; padding: 0; width: 100%; } #wdEditor-suggest .ui-menu-item a{ text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; min-height: 0; font-weight: normal; border: 1px solid #d3d3d3; } #wdEditor-suggest .ui-menu-item a b{font-weight: 800;} #wdEditor-suggest .ui-menu-item a.hover{ border: 1px solid #999999; background: #dadada; font-weight: normal; color: #212121; } </style> </head> <body> <ul id="wdEditor-suggest"> </ul> <textarea id="awesomeEditor" style="width: 600px; height: 400px;"></textarea> </body> </html>