ThinkPHP6.0使用富文本编辑器wangEditor4的方法

admin

引入css

1. <link href="_SKIN_/wangeditor/style.css" rel="stylesheet">
   
2. <style>
   
3.         #editor—wrapper {
   
4.                 border: 1px solid #ccc;
   
5.                 z-index: 100; /* 按需定义 */
   
6.         }
   
7.         #toolbar-container { border-bottom: 1px solid #ccc; }
   
8.         #editor-container { height: 500px; }
   
9. </style>

复制代码

加入富文本框

1. <div style="border: 1px solid #ccc;">
   
2.                                                                                 <div id="editor-toolbar" style="border-bottom: 1px solid #ccc;"></div>
   
3.                                                                                 <div id="editor-text-area" style="height: 350px"></div>
   
4.                                                                         </div>

复制代码

加入js

1. <script type="text/javascript" src="_SKIN_/wangEditor/index.js"></script>
   
2. <script>
   
3.         const E = window.wangEditor
   
4. 
   
5.         // 切换语言
   
6.         const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
   
7.         E.i18nChangeLanguage(LANG)
   
8. 
   
9.         window.editor = E.createEditor({
   
10.                 selector: '#editor-text-area',
    
11.                 html: '<p>hello world</p><p><br></p>',
    
12.                 config: {
    
13.                         placeholder: 'Type here...',
    
14.                         MENU_CONF: {
    
15.                                 uploadImage: {
    
16.                                         fieldName: 'your-fileName',
    
17.                                         base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
    
18.                                 }
    
19.                         },
    
20.                         onChange(editor) {
    
21.                                 const html = editor.getHtml()
    
22.                                 // document.getElementById('editor-content-view').innerHTML = html
    
23.                                 document.getElementById('editor-content-textarea').value = html
    
24.                         }
    
25.                 }
    
26.         })
    
27. 
    
28.         window.toolbar = E.createToolbar({
    
29.                 editor,
    
30.                 selector: '#editor-toolbar',
    
31.                 config: {}
    
32. 
    
33.         })
    
34. </script>

复制代码