知识学习

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]

升级   100%

151

主题

151

帖子

719

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
719
发表于 2022-9-23 21:44:18 | 显示全部楼层 |阅读模式
引入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.         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>hello world</p><p><br></p>',
  10.                 config: {
  11.                         placeholder: 'Type here...',
  12.                         MENU_CONF: {
  13.                                 uploadImage: {
  14.                                         fieldName: 'your-fileName',
  15.                                         base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
  16.                                 }
  17.                         },
  18.                         onChange(editor) {
  19.                                 const html = editor.getHtml()
  20.                                 // document.getElementById('editor-content-view').innerHTML = html
  21.                                 document.getElementById('editor-content-textarea').value = html
  22.                         }
  23.                 }
  24.         })

  25.         window.toolbar = E.createToolbar({
  26.                 editor,
  27.                 selector: '#editor-toolbar',
  28.                 config: {}

  29.         })
  30. </script>
复制代码



回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2023-1-29 16:09 , Processed in 0.071946 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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