opentiny / tiny-vue

TinyVue is an enterprise-class UI component library of OpenTiny community, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.
https://opentiny.design/tiny-vue
MIT License
1.71k stars 266 forks source link

🐛 [Bug]: Fluent Editor富文本无法回填 html 内容中的图片 src #2008

Open kagol opened 3 months ago

kagol commented 3 months ago

Version

latest

Vue Version

latest

Link to minimal reproduction

最小可复现Demo(点击展开,复制里面的链接,在浏览器地址栏打开)
https://opentiny.design/vue-playground?mode=pc&theme=smb#3.18|eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgbGFuZz1cInRzeFwiPlxyXG4vLyDlvJXlhaUgQG9wZW50aW55L3Z1ZSDnu4Tku7ZcclxuaW1wb3J0IHsgQnV0dG9uLCBMaW5rIH0gZnJvbSAnQG9wZW50aW55L3Z1ZSdcclxuXHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICBjb21wb25lbnRzOiB7XHJcbiAgICBUaW55QnV0dG9uOiBCdXR0b24sXHJcbiAgICBUaW55TGluazogTGlua1xyXG4gIH0sXHJcbiAgZGF0YSgpIHtcclxuICAgIHJldHVybiB7XHJcbiAgICAgIG1zZzogJ2hlbGxvIHdvcmxkISdcclxuICAgIH1cclxuICB9XHJcbn1cclxuPC9zY3JpcHQ+XHJcblxyXG48dGVtcGxhdGU+XHJcbiAgPFRpbnlCdXR0b24+56Gu5a6aPC9UaW55QnV0dG9uPlxyXG4gIDxoMT57eyBtc2cgfX08L2gxPlxyXG4gIDxkaXYgY2xhc3M9XCJ0aW55dnVlXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwidGlueXZ1ZS1wYWdlXCI+XHJcbiAgICAgIHRpbnl2dWVcclxuICAgICAgPHRpbnktbGluayB0eXBlPVwic3VjY2Vzc1wiIGhyZWY9J2h0dHBzOi8vZ2l0aHViLmNvbS9vcGVudGlueS90aW55LXZ1ZSc+XHJcbiAgICAgICAgdGlueXZ1ZVxyXG4gICAgICA8L3RpbnktbGluaz5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L3RlbXBsYXRlPlxyXG5cclxuPHN0eWxlIGxhbmc9XCJsZXNzXCIgc2NvcGVkPlxyXG4gIGgxe1xyXG4gICAgY29sb3I6IzVlN2NlMDtcclxuICB9XHJcbiAgLnRpbnl2dWV7XHJcbiAgICBmb250LXNpemU6IDE4eHA7XHJcbiAgICAmLXBhZ2V7XHJcbiAgICAgIGNvbG9yOiM1ZTdjZTA7XHJcbiAgICB9XHJcbiAgfVxyXG48L3N0eWxlPlxyXG4iLCIiOiJ7XCJpbXBvcnRzXCI6e1widnVlXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vdnVlLzMuNC4yNy9maWxlcy9kaXN0L3Z1ZS5ydW50aW1lLmVzbS1icm93c2VyLmpzXCIsXCJlY2hhcnRzXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vZWNoYXJ0cy81LjQuMS9maWxlcy9kaXN0L2VjaGFydHMuZXNtLmpzXCIsXCJAdnVlL2NvbXBpbGVyLXNmY1wiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0B2dWUvY29tcGlsZXItc2ZjLzMuNC4yNy9maWxlcy9kaXN0L2NvbXBpbGVyLXNmYy5lc20tYnJvd3Nlci5qc1wiLFwiQG9wZW50aW55L3Z1ZVwiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0BvcGVudGlueS92dWUtcnVudGltZS8zLjE4L2ZpbGVzL2Rpc3QzL3RpbnktdnVlLXBjLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS1pY29uXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS1ydW50aW1lLzMuMTgvZmlsZXMvZGlzdDMvdGlueS12dWUtaWNvbi5tanNcIixcIkBvcGVudGlueS92dWUtbG9jYWxlXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS1ydW50aW1lLzMuMTgvZmlsZXMvZGlzdDMvdGlueS12dWUtbG9jYWxlLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS1jb21tb25cIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS9Ab3BlbnRpbnkvdnVlLXJ1bnRpbWUvMy4xOC9maWxlcy9kaXN0My90aW55LXZ1ZS1jb21tb24ubWpzXCIsXCJAb3BlbnRpbnkvdnVlLWRpcmVjdGl2ZVwiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0BvcGVudGlueS92dWUtcnVudGltZS8zLjE4L2ZpbGVzL2Rpc3QzL3RpbnktdnVlLWRpcmVjdGl2ZS5tanNcIixcIkBvcGVudGlueS92dWUtdGhlbWUvXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS10aGVtZS8zLjE4L2ZpbGVzL1wiLFwiQG9wZW50aW55L3Z1ZS10aGVtZS1tb2JpbGUvXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS10aGVtZS1tb2JpbGUvMy4xOC9maWxlcy9cIixcIkBvcGVudGlueS92dWUtcmVuZGVybGVzcy9cIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS9Ab3BlbnRpbnkvdnVlLXJlbmRlcmxlc3MvMy4xOC9maWxlcy9cIixcInNvcnRhYmxlanNcIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS9zb3J0YWJsZWpzLzEuMTUuMC9maWxlcy9tb2R1bGFyL3NvcnRhYmxlLmVzbS5qc1wiLFwiQG9wZW50aW55L3Z1ZS1kZXNpZ24tc21iXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS1kZXNpZ24tc21iLzMuMTgvZmlsZXMvaW5kZXguanNcIn19IiwidHNjb25maWcuanNvbiI6IntcclxuICBcImNvbXBpbGVyT3B0aW9uc1wiOiB7XHJcbiAgICBcImFsbG93SnNcIjogdHJ1ZSxcclxuICAgIFwiY2hlY2tKc1wiOiB0cnVlLFxyXG4gICAgXCJqc3hcIjogXCJwcmVzZXJ2ZVwiLFxyXG4gICAgXCJ0YXJnZXRcIjogXCJFU05leHRcIixcclxuICAgIFwibW9kdWxlXCI6IFwiRVNOZXh0XCIsXHJcbiAgICBcIm1vZHVsZVJlc29sdXRpb25cIjogXCJCdW5kbGVyXCIsXHJcbiAgICBcImFsbG93SW1wb3J0aW5nVHNFeHRlbnNpb25zXCI6IHRydWVcclxuICB9LFxyXG4gIFwidnVlQ29tcGlsZXJPcHRpb25zXCI6IHtcclxuICAgIFwidGFyZ2V0XCI6IDMuM1xyXG4gIH1cclxufVxyXG4iLCJkYXRhLXN3aXRjaC52dWUiOiI8dGVtcGxhdGU+XG4gIDxkaXY+XG4gICAgPHRpbnktZmx1ZW50LWVkaXRvciB2LW1vZGVsPVwidmFsdWVcIiA6ZGF0YS10eXBlPVwiZmFsc2VcIiA6ZGF0YS11cGdyYWRlPVwiZmFsc2VcIj48L3RpbnktZmx1ZW50LWVkaXRvcj5cbiAgICDlhoXlrrnvvJo8YnIgLz5cbiAgICB7eyB2YWx1ZSB9fVxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQgc2V0dXA+XG5pbXBvcnQgeyByZWYgfSBmcm9tICd2dWUnXG5pbXBvcnQgeyBUaW55Rmx1ZW50RWRpdG9yIH0gZnJvbSAnQG9wZW50aW55L3Z1ZSdcblxuY29uc3QgdmFsdWUgPSByZWYoJzxwPkhlbGxvIDxzdHJvbmc+Rmx1ZW50RWRpdG9yPC9zdHJvbmc+ITxpbWcgc3JjPVwiaHR0cHM6Ly9yZXMuaGMtY2RuLmNvbS90aW55LXZ1ZS13ZWItZG9jLzMuMTguMC4yMDI0MDgyMTExMjAzMi9zdGF0aWMvaW1hZ2VzL21vdW50YWluLnBuZ1wiIGRhdGEtaW1hZ2UtaWQ9XCJpbWcwXCIgZGV2dWktZWRpdG9yeC1pbWFnZT1cInRydWVcIiBzdHlsZT1cInZlcnRpY2FsLWFsaWduOiBiYXNlbGluZTtcIj48L3A+Jylcbjwvc2NyaXB0PlxuIiwiX28iOnt9fQ==

Step to reproduce

可复现代码:

<template>
  <div>
    <tiny-fluent-editor v-model="value" :data-type="false" :data-upgrade="false"></tiny-fluent-editor>
    内容:<br />
    {{ value }}
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TinyFluentEditor } from '@opentiny/vue'

const value = ref('<p>Hello <strong>FluentEditor</strong>!<img src="https://res.hc-cdn.com/tiny-vue-web-doc/3.18.0.20240821112032/static/images/mountain.png" data-image-id="img0" devui-editorx-image="true" style="vertical-align: baseline;"></p>')
</script>

What is expected

No response

What is actually happening

No response

What is your project name

Wiki系统

Any additional comments (optional)

No response

Issues-translate-bot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically.


Title: 🐛 [Bug]: Fluent Editor rich text cannot backfill image src in html content