首页  编辑  

简单HTML编辑器GUI实现

Tags: /计算机文档/网页制作/   Date Created:
如果要简单在 div contenteditable上实现工具栏效果，可以使用 Quill 或者 MediumEditor。例如：

  1. <!DOCTYPE html>
  2. <html lang="zh-hans">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>HTML 编辑</title>
  7.   <!-- 引入 Quill 文件 -->
  8.   <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
  9.   <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
  10.   
  11.   <!-- 引入 Medium Editor 文件 -->
  12.   <script src="https://cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
  13.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
  14. </head>
  15. <body>
  16. <div id="editor" contenteditable="true" class="editable">这里编辑……</div>
  18. <script>
  19.   var quill = new Quill('#editor', { theme: 'snow' });
  20.   var editor = new MediumEditor('.editable');
  21. </script>
  23. </body>
  24. </html>

页面效果，其中工具栏是 Quill 的，选中文字后的浮动工具栏是 MediumEditor的：