如果要简单在 div contenteditable上实现工具栏效果,可以使用 Quill 或者 MediumEditor。例如:
- <!DOCTYPE html>
- <html lang="zh-hans">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>HTML 编辑</title>
-
- <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
- <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
-
-
- <script src="https://cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
- <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">
- </head>
- <body>
- <div id="editor" contenteditable="true" class="editable">这里编辑……</div>
- <script>
- var quill = new Quill('#editor', { theme: 'snow' });
- var editor = new MediumEditor('.editable');
- </script>
- </body>
- </html>
页面效果,其中工具栏是 Quill 的,选中文字后的浮动工具栏是 MediumEditor的: