Widget:Editor

<!DOCTYPE html> <html> <head>

   <meta charset="UTF-8">
   <title>wangEditor示例</title>
   <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
   <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
   <style>
       /* 添加一些基础样式 */
       .editor-wrapper {
           border: 1px solid #ccc;
           margin: 20px auto;
           /* 设置总高度 */
           height: 500px;
           display: flex;
           flex-direction: column;
       }
       #toolbar-container {
           border-bottom: 1px solid #ccc;
           /* 工具栏固定高度 */
           flex: 0 0 auto;
       }
       #editor-container {
           /* 编辑区域自适应剩余高度 */
           flex: 1;
           overflow-y: auto;
           height: 0; /* 配合flex:1使用 */
       }
   </style>

</head> <body>

   <script>
   window.onload = function() {
       if (window.wangEditor) {
           const { createEditor, createToolbar } = window.wangEditor;
           
           // 创建编辑器
           const editor = createEditor({
               selector: '#editor-container',

html: '

请输入内容...

',

               config: {
                   placeholder: '请输入内容...',
                   MENU_CONF: {},
                   autoFocus: false
               },
           });

           // 创建工具栏，注意这里selector指向toolbar-container
           const toolbar = createToolbar({
               editor,
               selector: '#toolbar-container',
               mode: 'default',
               config: {
                   insertKeys: {
                       index: 0,
                       keys: [
                           // 常用的功能键
                           'bold', 'italic', 'underline',
                           'fontSize', 'fontFamily', 'color',
                           'justifyLeft', 'justifyCenter', 'justifyRight',
                           'bulletedList', 'numberedList',
                           'insertLink', 'insertImage'
                       ]
                   }
               }
           });

           editor.enable();
       } else {
           console.error('wangEditor 未正确加载');
       }
   };
   </script>

</body> </html>