知识学习

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 75|回复: 0

wangEditor 富文本编辑器

[复制链接]

升级   100%

151

主题

151

帖子

719

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
719
发表于 2022-9-28 16:04:25 | 显示全部楼层 |阅读模式
  1. <!--富文本框-->

  2. <script type="text/javascript" src="_SKIN_/wangEditor/index.js"></script>
  3. <script>
  4.         const E = window.wangEditor

  5.         const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
  6.         E.i18nChangeLanguage(LANG)

  7.         window.editor = E.createEditor({
  8.                 selector: '#editor-text-area',
  9.                 html: '<p><br></p>',
  10.                 config: {
  11.                         placeholder: '文章内容...',
  12.                         MENU_CONF: {
  13.                                 uploadImage: {
  14.                                         server: '/admin/controller/upload/image',
  15.                                         fieldName: 'file',
  16.                                         base64LimitSize: 10 * 1024 * 1024,// 10M 以下插入 base64
  17.                                         // 最多可上传几个文件,默认为 100
  18.                                         maxNumberOfFiles: 10,
  19.                                         // 单个文件的最大体积限制,默认为 2M
  20.                                         maxFileSize: 1024 * 1024, // 1M
  21.                                         // 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 []
  22.                                         allowedFileTypes: ['image/*'],
  23.                                 }
  24.                         },
  25.                         onChange(editor) {
  26.                                 const html = editor.getHtml()
  27.                                 // document.getElementById('editor-content-view').innerHTML = html
  28.                                 document.getElementById('editor-content-textarea').value = html
  29.                         }
  30.                 }
  31.         })
  32.         window.toolbar = E.createToolbar({
  33.                 editor,
  34.                 selector: '#editor-toolbar',
  35.                 config: {}

  36.         })
  37. </script>
  38. <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.                                                                         <!-- 富文本内容转换html和txt内容 -->
  7. <!--                                                                        <div style="margin-top: 20px;">-->
  8. <!--                                                                                <textarea id="editor-content-textarea" style="width: 100%; height: 100px; outline: none;" readonly></textarea>-->
  9. <!--                                                                        </div>-->
  10. <!--                                                                        <div id="editor-content-view" class="editor-content-view"></div>-->
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|知识学习 ( 鲁ICP备20015483号 )

GMT+8, 2023-1-29 17:04 , Processed in 0.073312 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表