wangEditor-v5
wangEditor-v5 copied to clipboard
Published
20 hours ago •
wangeditor-team
wangeditor-team
编辑器创建时配置为只读模式并配置默认 HTML 内容，编辑器无法创建
bug 描述
编辑器创建时配置为只读模式并配置默认 HTML 内容，编辑器无法创建
你预期的样子是？
正常创建
系统和浏览器及版本号
- 操作系统 window
- 浏览器和版本 Chrome 97
wangEditor 版本
0.15.11
demo 能否复现该 bug ？
能
- 中文 demo https://www.wangeditor.com/demo/zh-CN
- English demo https://www.wangeditor.com/demo/en
最小成本的复现步骤
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: 仿宋;">我们每个人都希望自己身体健康，然后能够长寿！但是很多人都搞不懂自己的身体！在手机上经常能够看到大批的健康小常识，不知道哪些是正确的，哪些是错误的！下面噜噜给大家说点健康小常识！这些都是医生才知道的！都在这里了！ </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: 仿宋;"> </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: 仿宋;"> </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: 仿宋;"> </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: 仿宋;"> </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>
我在这个 demo https://github.com/wangeditor-team/wangEditor-v5/blob/main/packages/editor/examples/simple-mode.html 修改代码测试，是没问题的。
我在这个 demo https://github.com/wangeditor-team/wangEditor-v5/blob/main/packages/editor/examples/simple-mode.html 修改代码测试，是没问题的。
请使用以下 HTML 作为默认内容，只有某些特殊的 HTML 才会触发该问题
<p>
<img src="http://116.62.205.26/prod-api/profile/articleResource/20220320/148ae11f-a35d-4a31-a874-3715b25b32db.png" />
<span> </span>
</p>
@clinfc 你说的这种 html 结构，在编辑器输出的时候会是这样的。
<p><img src="http://www.wangeditor.com/imgs/logo.jpeg" alt="" data-href="" style=""/> </p>
defaultHtml 不支持所有 html 格式，只能支持从编辑器输出的 html 格式。
@clinfc 你说的这种 html 结构，在编辑器输出的时候会是这样的。
<p><img src="http://www.wangeditor.com/imgs/logo.jpeg" alt="" data-href="" style=""/> </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;"> </span></p>