index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WangEditor Example</title> <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"> <style> #editor—wrapper { border: 1px solid #ccc; z-index: 100; /* If you need */ } #toolbar-container { border-bottom: 1px solid #ccc; } #editor-container { height: 500px; } </style> </head> <body> <div id="toolbar-container"></div> <div id="editor-container"></div> <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script> <script> const { createEditor, createToolbar } = window.wangEditor; // Editor Configuration const editorConfig = { placeholder: 'Type here...', onChange(editor) { const html = editor.getHtml(); console.log('Editor content:', html); // You can sync HTML to <textarea> or other storage }, }; // Create Editor const editor = createEditor({ selector: '#editor-container', html: '<p><br></p>', config: editorConfig, mode: 'default', // 'default' or 'simple' }); // Toolbar Configuration const toolbarConfig = {}; // Create Toolbar const toolbar = createToolbar({ editor, selector: '#toolbar-container', config: toolbarConfig, mode: 'default', // 'default' or 'simple' }); </script> </body> </html> |
