使用api 增加了编辑器文本后，加粗效果不显示

TFSayingLove commented 1 month ago

bug 描述

使用官网提供的editor.insertNode(node)和setHtml，dangerouslyInsertHtml方法增加内容，加粗效果均不显示 h3标签也不生效

你预期的样子是？

strong h3能渲染出加粗效果

系统和浏览器及版本号

操作系统 win11
浏览器和版本 Google 129.0.6668.101

wangEditor 版本

demo 能否复现该 bug ？

不能，在demo中是好的

中文 demo https://www.wangeditor.com/demo/
English demo https://www.wangeditor.com/demo/?lang=en

在线 demo

请尽量提供在线 demo （推荐以下网站），帮助我们最低成本复现 bug

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

步骤一 vue3 项目引入插件
步骤二使用代码输入文本
步骤三 setHtml 会提示 chunk-QESB5RLU.js?v=ffa3cf73:9388 Uncaught (in promise) Error: Cannot resolve a DOM node from Slate node: {"text":"我是其中加粗一段","bold":true}

cycleccc commented 1 month ago

https://stackblitz.com/edit/vue3-wangeditor-demo?file=src%2Fcomponents%2FBasicEditor.vue 在线沙盒 demo 能复现吗 fork 一份改造成能复现的 demo

TFSayingLove commented 1 month ago

是我的问题，我增加了@change事件，在事件监听中将e.getText()赋值给了v-model,导致了加粗效果失效，sorry

TFSayingLove commented 1 month ago

1729652431672 在调用editor.setHtml()时，会报这个错误，但是不影响使用和功能

cycleccc commented 1 month ago

需要最小复现，这个错误是兜底的，很笼统。

openlearnc commented 1 month ago

我想实现一个通过点击菜单键查看、修改编辑器生成的html源码的功能，是基于官网上的扩展菜单button demo代码修改的。

htmlEncodeByRegExp:function (str){  
             var temp = "";
             if(str.length == 0) return "";
             temp = str.replace(/&/g,"&amp;");
             temp = temp.replace(/</g,"&lt;");
             temp = temp.replace(/>/g,"&gt;");
             temp = temp.replace(/\s/g,"&nbsp;");
             temp = temp.replace(/\'/g,"&#39;");
             temp = temp.replace(/\"/g,"&quot;");
             return temp;
        },

        htmlDecodeByRegExp:function (str){  
             var temp = "";
             if(str.length == 0) return "";
             temp = str.replace(/&amp;/g,"&");
             temp = temp.replace(/&lt;/g,"<");
             temp = temp.replace(/&gt;/g,">");
             temp = temp.replace(/&nbsp;/g," ");
             temp = temp.replace(/&#39;/g,"\'");
             temp = temp.replace(/&quot;/g,"\"");
             return temp;  
        },
var i = false
    // Extend menu
    class MyMenu {
      constructor() {
        this.title = 'My menu'
        // this.iconSvg = '<svg >...</svg>'
        this.tag = 'button'

      }
      getValue(editor) {
        //console.log(editor.getHtml())
        return editor.getHtml()

      }
      isActive(editor) {
        return false // or true
      }
      isDisabled(editor) {
        return false // or true
      }
      exec(editor, value) {

         var str = value
         var html
        if(i==false){

             html = htmlEncodeByRegExp(str)

              //html = html.substring(5,html.length-5)
              //console.log('enpr'+HtmlUtil.htmlDecodeByRegExp(str))
          editor.setHtml('<div>'+html+'</div>')
          console.log('en:'+html)
        }else{
             html = htmlDecodeByRegExp(str)
            html = html.substr(3,html.length-7)
            console.log('depr:'+html+'d')
           editor.setHtml(html)
            console.log('de:'+html)

        }
        i = !i
      }

    }

openlearnc commented 1 month ago

@cycleccc 想问一下，为什么单行没问题，多行、文本中有换行，转换后console就报null。已知，用setHtml函数设置的是纯文本，会自动填加<p></p>标签。

cycleccc commented 1 month ago

@openlearnc 需要最小复现，要处理的问题太多了，不可能一个一个看代码片段的。

openlearnc commented 1 month ago

关键代码就是exec函数内，用正则表达式转义、反转义html字符。

cycleccc commented 1 month ago

@openlearnc 查看生成的 html 用 editor.getHtml() 就行。可以另开一个 issue 单独讨论

wangeditor-team / wangEditor