Skip to content
This repository has been archived by the owner on Apr 11, 2022. It is now read-only.

编辑器创建时配置为只读模式并配置默认 HTML 内容,编辑器无法创建 #449

Open
clinfc opened this issue Mar 20, 2022 · 4 comments
Assignees
Labels
bug Something isn't working

Comments

@clinfc
Copy link
Contributor

clinfc commented Mar 20, 2022

bug 描述

编辑器创建时配置为只读模式并配置默认 HTML 内容,编辑器无法创建

你预期的样子是?

正常创建

系统和浏览器及版本号

  • 操作系统 window
  • 浏览器和版本 Chrome 97

wangEditor 版本

0.15.11

demo 能否复现该 bug ?

最小成本的复现步骤

1、创建为只读模式(可编辑模式下能正常创建)
2、创建时的默认内容为 HTML,HTML 内容为以下示例(不是所有的 HTML 都能触发)

<template>
  <div>
    <button @click="preview = true">创建</button>
    <div ref="editable"></div>
  </div>
</template>

<script>
  import { createEditor } from '@wangeditor/editor'

  export default {
    data() {
      return {
        preview: false,
      }
    },
    watch: {
      preview(nv) {
        if (!nv) return

        this.$nextTick(() => {
          createEditor({
            selector: this.$refs.editable,
            html: `<p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">我们每个人都希望自己身体健康,然后能够长寿!但是很多人都搞不懂自己的身体!在手机上经常能够看到大批的健康小常识,不知道哪些是正确的,哪些是错误的!下面噜噜给大家说点健康小常识!这些都是医生才知道的!都在这里了!&nbsp;</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">1、低头玩手机增加颈椎的重量。当头部弯曲大于60度的是,颈椎承受的力量大约为45斤。</span></p><p style="text-indent: 0px; text-align: center; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">&nbsp;</span><img src="http://116.62.205.26/prod-api/profile/articleResource/20220320/a36d3f2f-028b-4848-959a-0d7bd0bc8f3d.png" alt="" data-href="" style="width: 30%;"></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">2、仙人掌防辐射。仙人掌能够抵挡太阳的光线、紫外线的辐射,但是与电脑屏幕中的辐射不相同。</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">3、吃到食物相克。有研究表示,人们在生活中吃到“相克”的食物,不会对身体产生太大的影响。</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">4、老咬舌头是中风。老人总是说咬舌头是想吃肉了,如果发现经常咬住舌头,可能就会发生中风,大脑神经被压迫不能正常流通。一定要注意!</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">5、擦屁股是从前往后。尤其是女孩子,擦粪便的时候要从前往后擦,顺序为,尿道,阴道,肛门,这几种器官的抵抗病毒的作用依次增强。</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">6、刷牙要刷舌头。舌头表面也会有细菌的滋生,长时间不刷舌头,会使得细菌侵害牙齿、牙龈,所以一定要轻轻刷舌头。</span></p><p style="text-indent: 0px; text-align: center; line-height: 22.5px;"><img src="http://116.62.205.26/prod-api/profile/articleResource/20220320/148ae11f-a35d-4a31-a874-3715b25b32db.png" alt="" data-href="" style="width: 30%;"><span style="font-size: 21px; font-family: 仿宋;">&nbsp;</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">7、泡脚水温不要过烫。水温为40度最好,太高的水温容易造成心脑血管疾病,刺激脚底神经系统,对温度的感知出现变化。</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">8、煲汤时间不要过长。尤其是高汤炖的时候太长,容易增加嘌呤的含量,进而会出现高尿酸和痛风的情况,并且也会将食物中的营养成分流失。</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">9、运动时别用嘴呼吸。在剧烈跑步的时候,用鼻子吸气,嘴凸起,这样能够避免出现冷空气进入咽喉,会刺激呼吸道。</span></p><p style="text-indent: 0px; text-align: center; line-height: 22.5px;"><img src="http://116.62.205.26/prod-api/profile/articleResource/20220320/7cb56de7-1fd4-40b3-867f-3bf376da6233.png" alt="" data-href="" style="width: 30%;"><span style="font-size: 21px; font-family: 仿宋;">&nbsp;</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">10、豆浆不能代替牛奶。虽然这两种食物中都含有钙元素,但是豆浆中的钙低于牛奶中的钙。对中老年人来说,多喝牛奶比较好。</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">11、眼药水不能滴在眼球上面。如果把眼药水滴在眼球上,会刺激是视角膜,及时眨眼的频率,就会导致药物流失。</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">12、运动后坐下屁股不会变大。生活中能够让屁股变大的因素只有通过锻炼身体,长时间的坐不运动也会出现屁股变大,而运动后坐下屁股不会变大。</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">13、补充胶原蛋白不如吃鸡蛋。女性都是要补充胶原蛋白,真正的补充蛋白质,不如每天多吃一个鸡蛋吧。</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">14、掉一根头发长出十根头发。能不能长出头发,与身体的素质,和体内分泌的黑色素有关,与掉头发长头发没有关系。</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">15、乳腺增生不用治。如果体检的话,女性十个九个都有乳腺增生的情况,一般都是良性的,一定要注意上医院检查就行。</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">16、最有效的止咳方式吃糖。咳嗽时吃糖能够在喉咙中形成保护膜,缓解对喉咙的伤害。</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">17、脚气是一种全身性疾病。虽然脚气出现在脚上,但是,通常全身都有真菌的存在,这个需要上医院诊断和药物的结合。</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">18、胃溃疡和吃什么东西关系不大。这种疾病的形成原因主要是幽门螺杆菌的存在,通过抗酸剂可以治疗!不要吃辛辣刺激的食物。</span></p><p style="text-indent: 0px; text-align: center; line-height: 22.5px;"><img src="http://116.62.205.26/prod-api/profile/articleResource/20220320/5c00a78a-9902-4bb9-933b-44ccc4ef1b57.png" alt="" data-href="" style="width: 30%;"><span style="font-size: 21px; font-family: 仿宋;">&nbsp;</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">19、流鼻血仰头没用。仰头只会让鼻血流入嘴里,进而通过咳嗽咳出来。出血量大,容易被吸入气管中和肺部中。</span></p><p style="text-align: justify; line-height: 22.5px;"><span style="font-size: 21px; font-family: 仿宋;">20、腹泻不要禁食。腹泻的时候,身体的抵抗力和免疫力比较脆弱,一定要吃点东西,让身体恢复体力,才能让腹泻减轻。</span></p>`,
            config: {
              readOnly: true,
            },
          })
        })
      },
    },
  }
</script>
@wangfupeng1988 wangfupeng1988 added the question Further information is requested label Mar 21, 2022
@wangfupeng1988
Copy link
Contributor

我在这个 demo https://github.com/wangeditor-team/wangEditor-v5/blob/main/packages/editor/examples/simple-mode.html
修改代码测试,是没问题的。

image

@clinfc
Copy link
Contributor Author

clinfc commented Mar 21, 2022

我在这个 demo https://github.com/wangeditor-team/wangEditor-v5/blob/main/packages/editor/examples/simple-mode.html 修改代码测试,是没问题的。

image

请使用以下 HTML 作为默认内容,只有某些特殊的 HTML 才会触发该问题

<p>
  <img  src="http://116.62.205.26/prod-api/profile/articleResource/20220320/148ae11f-a35d-4a31-a874-3715b25b32db.png" />
  <span>&nbsp;</span>
</p>

@wangfupeng1988
Copy link
Contributor

@clinfc 你说的这种 html 结构,在编辑器输出的时候会是这样的。

<p><img src="http://www.wangeditor.com/imgs/logo.jpeg" alt="" data-href="" style=""/>&nbsp;</p>

defaultHtml 不支持所有 html 格式,只能支持从编辑器输出的 html 格式。

@clinfc
Copy link
Contributor Author

clinfc commented Mar 21, 2022

@clinfc 你说的这种 html 结构,在编辑器输出的时候会是这样的。

<p><img src="http://www.wangeditor.com/imgs/logo.jpeg" alt="" data-href="" style=""/>&nbsp;</p>

defaultHtml 不支持所有 html 格式,只能支持从编辑器输出的 html 格式。

我把编辑器产出的 HTML 赋值回去也会报错,之前的 HTML 是我把多余信息删了的,下面这段是完全由编辑器产出的

<p><img src="https://img.zcool.cn/community/01d003623838590002c3290ffdf716.jpg@260w_195h_1c_1e_1o_100sh.jpg" alt="" data-href="" style=""/><span style="font-size: 22px;">&nbsp;</span></p>

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants