一键菜单生成的代码中，tinymce富文本编辑器全屏编辑无法触发blur事件

Open
#62 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript
Domain
frontend

Research direction

Start from the one-click menu generated JavaScript containing the tinymce.render setup for #text and reproduce the fullscreen-editing submit flow. Check how focus and content synchronization behave when the submit button is clicked; done means updated rich-text content is retained after submitting from fullscreen mode.

Written by the indexing model from the issue text.

Description

一键菜单生成的代码中，富文本编辑器全屏编辑无法触发blur事件
导致全屏编辑时直接提交表单会丢失富文本中更新的内容

原因如图：富文本全屏状态下，其div区域覆盖了表单提交按钮，而提交按钮z-index在富文本之上，导致点击提交按钮时，iframe子页面的焦点依然在富文本中

20231228094931

涉及代码段：

                        layui.use(["tinymce"], function() {
                            var tinymce = layui.tinymce
                            var edit = tinymce.render({
                                elem: "#text",
                                height: "400px",
                                'images_upload_url': "/app/admin/upload/image",
                            });
                            edit.on("blur", function(){
                                layui.$("#text").val(edit.getContent());
                            });
                        });

目前通过新增mouseleave事件解决

                            edit.on("MouseLeave", function(){
                                layui.$("#text").val(edit.getContent());
                            });

不确定是否有其他更好的方式

Dominant language
JavaScript
Stars
378
Forks
48
Avg merge
20h 9m
Merged PRs (30d)
2

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from webman-php/admin

All issues in webman-php/admin

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.