wangEditor 富文本编辑器

admin

1. <!--富文本框-->
   
2. 
   
3. <script type="text/javascript" src="_SKIN_/wangEditor/index.js"></script>
   
4. <script>
   
5.         const E = window.wangEditor
   
6. 
   
7.         const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
   
8.         E.i18nChangeLanguage(LANG)
   
9. 
   
10.         window.editor = E.createEditor({
    
11.                 selector: '#editor-text-area',
    
12.                 html: '<p><br></p>',
    
13.                 config: {
    
14.                         placeholder: '文章内容...',
    
15.                         MENU_CONF: {
    
16.                                 uploadImage: {
    
17.                                         server: '/admin/controller/upload/image',
    
18.                                         fieldName: 'file',
    
19.                                         base64LimitSize: 10 * 1024 * 1024,// 10M 以下插入 base64
    
20.                                         // 最多可上传几个文件，默认为 100
    
21.                                         maxNumberOfFiles: 10,
    
22.                                         // 单个文件的最大体积限制，默认为 2M
    
23.                                         maxFileSize: 1024 * 1024, // 1M
    
24.                                         // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
    
25.                                         allowedFileTypes: ['image/*'],
    
26.                                 }
    
27.                         },
    
28.                         onChange(editor) {
    
29.                                 const html = editor.getHtml()
    
30.                                 // document.getElementById('editor-content-view').innerHTML = html
    
31.                                 document.getElementById('editor-content-textarea').value = html
    
32.                         }
    
33.                 }
    
34.         })
    
35.         window.toolbar = E.createToolbar({
    
36.                 editor,
    
37.                 selector: '#editor-toolbar',
    
38.                 config: {}
    
39. 
    
40.         })
    
41. </script>
    
42. <script type="text/javascript">varE=window.wangEditorvareditor=newE('#editor')//或者vareditor=newE(document.getElementById('editor'))editor.create()</script>

复制代码

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>
   
5.                                                                         <input type="hidden" id="editor-content-textarea" name="content">
   
6. 
   
7.                                                                         <!-- 富文本内容转换html和txt内容 -->
   
8. <!--                                                                        <div style="margin-top: 20px;">-->
   
9. <!--                                                                                <textarea id="editor-content-textarea" style="width: 100%; height: 100px; outline: none;" readonly></textarea>-->
   
10. <!--                                                                        </div>-->
    
11. <!--                                                                        <div id="editor-content-view" class="editor-content-view"></div>-->

复制代码