💡 更新 WangEditor 编辑器为最新版本

Author: zhangyd-c

blog-admin/src/main/resources/static/assets/js/zhyd.core.js

@@ -158,89 +158,159 @@ var zhyd = window.zhyd || {
  uploadUrl: "",
  uploadFileName: "file",
  uploadType: "",
- customCss: {}
+ customCss: {
+ border: "1px solid #ccc;",
+ height: "300px"
+ },
+ defaultHtml: "<p><br></p>"
 
  },
  init: function (options) {
  var config = $.extend(zhyd.wangEditor.defaultConfig, options);
- var E = window.wangEditor;
- editor = new E(config.container);
- // 配置编辑器 start
- // 关闭粘贴样式的过滤
- editor.config.pasteFilterStyle = false;
- editor.config.zIndex = 100;
- editor.config.withCredentials = true;
+ $(config.container).before($('<div id="toolbar-container"></div>'));
  if (config.textareaName) {
  $('<textarea class="wangeditor-textarea" id="' + config.textareaName + '" name="' + config.textareaName + '" style="display: none" required="required"></textarea>').insertAfter($(config.container));
  }
  var $contentBox = $('textarea[name=' + config.textareaName + ']');
- editor.config.onchange = function (html) {
- // 监控变化，同步更新到 textarea
- $contentBox.val(html);
- };
- // 注册上传文件插件
- zhyd.wangEditor.plugins.registerUpload(editor, config.uploadUrl, config.uploadFileName, config.uploadType, function (result, curEditor) {
- // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
- // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
- if (result.status == 200) {
- var imgFullPath = result.data;
- curEditor.txt.append('<img src="' + imgFullPath + '" alt="" style="max-width: 100%;height: auto;border-radius: 6px;"/>');
- // 解决上传完图片如果未进行其他操作，则不会触发编辑器的“change”事件，导致实际文章内容中缺少最后上传的图片文件 2018-07-13
- $contentBox.val(editor.txt.html());
- } else {
- $.alert.error(result.message);
- }
- });
- // 配置编辑器 end
- editor.create();
- // 注册全屏插件
- // 注册图片资源库
- zhyd.wangEditor.plugins.registerMaterial(editor, $contentBox);
 
  if (config.customCss) {
  // 自定义编辑器的样式
  for (var key in config.customCss) {
  var value = config.customCss[key];
- editor.$textContainerElem.css(key, value);
+ $(config.container).css(key, value);
  }
  }
- },
- plugins: {
- registerUpload: function (editor, uploadUrl, uploadFileName, uploadType, callback) {
- if (uploadUrl) {
- // 上传图片到服务器
- editor.config.uploadImgServer = uploadUrl;
- editor.config.uploadFileName = uploadFileName;
- // 将图片大小限制为 50M
- editor.config.uploadImgMaxSize = 50 * 1024 * 1024;
- // 超时时间
- editor.config.uploadImgTimeout = 10000;
- // 自定义上传参数
- editor.config.uploadImgParams = {
- // 如果版本 <=v3.1.0 ，属性值会自动进行 encode ，此处无需 encode
- // 如果版本 >=v3.1.1 ，属性值不会自动 encode ，如有需要自己手动 encode
- uploadType: uploadType
- };
- editor.config.customAlert = function (msg) {
- $.alert.error(msg);
- };
- editor.config.uploadImgHooks = {
- error: function (xhr, editor) {
- $.alert.error("图片上传出错");
+
+ const { createEditor, createToolbar } = window.wangEditor
+
+ const editorConfig = {
+ placeholder: 'Type here...',
+ onChange(editor) {
+ const html = editor.getHtml()
+ // 监控变化，同步更新到 textarea
+ $contentBox.val(html);
+ console.log('changed editor content', html)
+ },
+ customAlert(msg, type){
+ switch (type) {
+ case 'success':
+ $.alert.info(msg);
+ break
+ case 'info':
+ $.alert.info(msg);
+ break
+ case 'warning':
+ $.alert.error(msg);
+ break
+ case 'error':
+ $.alert.error(msg);
+ break
+ default:
+ $.alert.info(msg);
+ break
+ }
+ },
+ MENU_CONF: {
+ uploadImage: {
+ server: config.uploadUrl,
+ // form-data fieldName ，默认值 'wangeditor-uploaded-image'
+ fieldName: config.uploadFileName,
+
+ // 单个文件的最大体积限制，默认为 5M
+ maxFileSize: 5 * 1024 * 1024, // 5M
+
+ // 最多可上传几个文件，默认为 100
+ maxNumberOfFiles: 1,
+
+ // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
+ allowedFileTypes: ['image/*'],
+
+ // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
+ meta: {
+ uploadType: config.uploadType,
  },
- timeout: function (xhr, editor) {
- $.alert.error("请求超时");
+
+ // 将 meta 拼接到 url 参数中，默认 false
+ metaWithUrl: false,
+
+ // 自定义增加 http header
+ headers: {
  },
- customInsert: function (insertImg, result, editor) {
- if (callback) {
- callback(result, editor);
+
+ // 跨域是否传递 cookie ，默认为 false
+ withCredentials: true,
+
+ // 超时时间，默认为 10 秒
+ timeout: 10 * 1000,
+
+ // 单个文件上传失败
+ onFailed(file, res) { // TS 语法
+ console.log(`${file.name} 上传失败`, res)
+ $.alert.error(`${file.name} 上传失败`);
+ },
+
+ // 上传错误，或者触发 timeout 超时
+ onError(file, err, res) { // TS 语法
+ console.log(`${file.name} 上传出错`, err, res)
+ $.alert.error(`${file.name} 上传出错, ${err}`);
+ },
+ // 自定义插入图片
+ customInsert(result, insertFn) {
+ // customInsert(res, insertFn) { // JS 语法
+ // res 即服务端的返回结果
+
+ // 从 res 中找到 url alt href ，然后插入图片
+ console.log('upload callback：', result);
+ // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
+ // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
+ if (result.status === 200) {
+ var imgFullPath = result.data;
+ const html = '<img src="' + imgFullPath + '" alt="" style="max-width: 100%;height: auto;border-radius: 6px;"/>';
+ editor.dangerouslyInsertHtml(html);
  } else {
- console.log('upload callback：' + insertImg, result, editor);
+ $.alert.error(result.message);
  }
+ },
+ },
+ uploadVideo: {
+ server: '/api/unsupported_upload_video',
+ fieldName: 'unsupported',
+ timeout: 0, // 5 秒
+ onBeforeUpload(file) {
+ $.alert.error('不支持在线上传视频，请使用插入视频');
+ return false
  }
- };
+ }
  }
- },
+ }
+ editor = createEditor({
+ selector: config.container,
+ html: config.defaultHtml,
+ config: editorConfig,
+ mode: 'default', // or 'simple'
+ })
+ const toolbarConfig = {
+ }
+
+ const toolbar = createToolbar({
+ editor,
+ selector: '#toolbar-container',
+ config: toolbarConfig,
+ mode: 'default', // or 'simple'
+ })
+ // 注册全屏插件
+ // 注册图片资源库
+ zhyd.wangEditor.plugins.registerMaterial(editor, $contentBox);
+ //
+ // if (config.customCss) {
+ // // 自定义编辑器的样式
+ // for (var key in config.customCss) {
+ // var value = config.customCss[key];
+ // editor.$textContainerElem.css(key, value);
+ // }
+ // }
+ },
+ plugins: {
  registerMaterial: function (editor, $contentBox) {
  $("div[id^='w-e-img']").unbind("click").click(function () {
  setTimeout(function () {

blog-admin/src/main/resources/static/assets/js/zhyd.publish-article.js

@@ -60,7 +60,7 @@ if(articleId){
  if(contentHtml){
  $("#content").val(contentHtml);
  if(editor){
- editor.txt.html(contentHtml);
+ editor.setHtml(contentHtml);
  }
  }
  }

blog-admin/src/main/resources/templates/article/publish-we.ftl

@@ -1,7 +1,12 @@
 <#include "/include/macros.ftl">
 <#setting number_format="#">
 <@header>
-
+<style>
+ #editor {
+ border: 1px solid #ccc;
+ height: 500px;
+ }
+</style>
 </@header>
 <form id="publishForm" class="form-horizontal form-label-left" novalidate>
  <div class="row">

blog-admin/src/main/resources/templates/include/macros.ftl

@@ -26,10 +26,15 @@
  <link href="https://cdn.bootcdn.net/ajax/libs/switchery/0.8.2/switchery.min.css" rel="stylesheet">
  <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput-typeahead.css" rel="stylesheet">
  <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet">
+ <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
+
  </#if>
  <link href="/assets/css/bootstrap-treetable.css" rel="stylesheet" type="text/css" />
  <link href="/assets/css/zhyd.core.css" rel="stylesheet">
  <#nested>
+ <style>
+ #toolbar-container { border: 1px solid #ccc; }
+ </style>
 </head>
 <body class="nav-md">
 <div class="container body">

blog-admin/src/main/resources/templates/layout/footer.ftl

@@ -29,7 +29,7 @@
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.37/js/jquery.ztree.core.min.js"></script>
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.37/js/jquery.ztree.excheck.min.js"></script>
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/switchery/0.8.2/switchery.min.js"></script>
- <script type="text/javascript" src="https://unpkg.com/wangeditor@4.7.9/dist/wangEditor.min.js"></script>
+ <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
 </#if>
 <script src="https://www.layuicdn.com/layui/layui.js"></script>

blog-admin/src/main/resources/templates/other/editor.ftl

@@ -1,10 +1,6 @@
 <#include "/include/macros.ftl">
 <@header>
  <style type="text/css">
- .toolbar {
- background-color: #f1f1f1;
- border: 1px solid #ccc;
- }
  .text {
  border: 1px solid #ccc;
  height: 200px;
@@ -24,41 +20,18 @@
  </div>
  <div class="x_content">
  <div class="form-group row">
- <label class="control-label col-md-2 col-sm-2 col-xs-12" for="name">菜单和编辑器区域分开 wangEditor</label>
+ <label class="control-label col-md-2 col-sm-2 col-xs-12" for="name">原生 wangEditor</label>
  <div class="col-md-8 col-sm-8 col-xs-12">
- <div id="toolbar" class="toolbar"></div>
- <div style="padding: 5px 0; color: #ccc">中间隔离带</div>
- <div id="div1" class="text" style="height: 100px">
- <p>第一个 demo（菜单和编辑器区域分开）</p>
+ <div id="toolbar1" style="border: 1px solid #ccc;"></div>
+ <div id="editor1" class="text" style="height: 500px">
  </div>
  </div>
  </div>
  <div class="form-group row">
- <label class="control-label col-md-2 col-sm-2 col-xs-12" for="name">普通的编辑器 wangEditor</label>
- <div class="col-md-8 col-sm-8 col-xs-12">
- <div id="div2">
- <p>第二个 demo（常规）</p>
- </div>
- </div>
- </div>
- <br>
- <div class="form-group row">
- <label class="control-label col-md-2 col-sm-2 col-xs-12" for="name">oneBlog系统定制的编辑器 wangEditor</label>
+ <label class="control-label col-md-2 col-sm-2 col-xs-12" for="name">oneBlog系统定制的 wangEditor</label>
  <div class="col-md-8 col-sm-8 col-xs-12">
  <div id="editor">
- <p>第三个 demo（oneBlog系统单独定制，支持文件上传）</p>
- <p>
- 使用方式：
- <pre><code># html<br>&lt;div id="editor"&gt;&lt;/div&gt;<br><br># js<br>$.wangEditor.init({<br>	container: "#editor",<br>	textareaName: "content",<br>	uploadUrl: "/api/uploadFile",<br>	uploadFileName: "file",<br>	uploadType: "goods",<br>	customCss: {<br>	"overflow-y": "scroll",<br>	"height": "100%",<br>	"max-height": "125px"<br>	}<br>})</code></pre>
- </p>
- <ul>
- <li>container: 编辑器的id，默认为editor</li>
- <li>textareaName: 自动生成的textarea组件的name，默认为content。可以自定义为表单中实际的参数name</li>
- <li>uploadUrl: 文件上传的api路径。如果不为空，则开启上传文件的功能</li>
- <li>uploadFileName: 文件上传时后台接收文件的参数名，默认为file</li>
- <li>uploadType: 当前上传文件的场景类型，<strong>最好根据实际业务取名</strong>，它会决定最终上传完成后的文件路径，比如在商品信息管理页中指定了uploadType = goods,那么最终上传完成后的文件路径就是：<code>oneblog/goods/{filename}.png</code>，默认为空</li>
- <li>customCss: 自定义的css，可以修改编辑器大小，默认为空。注：如果是修改高度，必须通过<code>max-height</code>参数修改，并且一定要加上：<code>"overflow-y": "scroll"</code>, <code>"height": "100%"</code>这两项配置，否则可能会使编辑器显示不正确</li>
- </ul>
+
  </div>
  </div>
  </div>
@@ -75,15 +48,27 @@
 </div>
 <@footer>
  <script type="text/javascript">
- var E = window.wangEditor
- var editor1 = new E('#toolbar', '#div1');
- editor1.config.zIndex = 10;
- editor1.create();
-
- var editor2 = new E('#div2');
- editor2.config.zIndex = 10;
- editor2.create();
- $("#div2").find(".w-e-text-container").css("height","100px");
+ const { createEditor, createToolbar } = window.wangEditor
+ const editor1 = createEditor({
+ selector: '#editor1',
+ html: '<p><br></p>',
+ config: {
+ placeholder: 'Type here...',
+ onChange(editor) {
+ const html = editor.getHtml()
+ console.log('changed editor content', html)
+ // 也可以同步到 <textarea>
+ }
+ },
+ mode: 'default', // or 'simple'
+ })
+ createToolbar({
+ editor: editor1,
+ selector: '#toolbar1',
+ config: {
+ },
+ mode: 'default', // or 'simple'
+ })
 
  // oneblog定制版的wangEditor
  zhyd.wangEditor.init({
@@ -92,15 +77,15 @@
  uploadUrl: "/api/uploadFile",
  uploadFileName: "file",
  uploadType: "goods",
+ defaultHtml: '',
  customCss: {
- "overflow-y": "scroll",
- "height": "100%",
- "max-height": "600px"
+ "border": "1px solid #ccc",
+ "height": "300px"
  }
  })
 
  zhyd.tinymce.init({
- selector: "#editor",
+ selector: "#editor3",
  uploadUrl: "/api/uploadFile",
  uploadFileName: "file",
  textareaName: "content2",

update.md

@@ -3,6 +3,10 @@
 
 ----
 
+### 2024-07-21
+
+- 更新 WangEditor 编辑器为最新版本
+
 ### 2024-06-23
 
 - 合并 [Gitee PR#48](https://gitee.com/yadong.zhang/DBlog/pulls/48)