0

I'm using October for my backend and a Vue.js app for rendering. My problem is that bold text saved in my database with Builder / Richeditor is not rendered as bold in my Vue.js app.

<p><strong>Duis convallis purus.</strong> suspendisse lobortis pharetra tempor....

Richeditor saves the bold with a <strong> tag instead of <b> and Vue doesn't render the bold this way with a template using the v-html directive :

<div v-html="myHTMLdata"></div>

I found this topic which summarize the problem : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

Is there a way to tell October to use <b> instead ?

Or maybe the solution could be in Vue.js ?

I searched a lot and didn't find any solution. Thanks for your help !

Incremental
  • 27
  • 1
  • 8

2 Answers2

1

I wouldn't recommend use v-html directive if it's unsanitized. If your app is multiple languages-based, i would use Component Interpolation approach of vue-i18n

Security (Vue): https://v2.vuejs.org/v2/guide/security.html Vue-i18n: https://kazupon.github.io/vue-i18n/guide/interpolation.html

Hope helps.

tony19
  • 125,647
  • 18
  • 229
  • 307
SC Kim
  • 545
  • 4
  • 14
  • 1
    Thanks Kim. I'm a beginner in Vue ! Is Vue-i18n a standard version for internationalization ? At the moment my app is one language and I just want to display text from my database. I understand the security risk, but would be on local with a JWTAuth authentication. Would it be acceptable to clean the html code before a standard display ? – Incremental Aug 22 '20 at 18:01
  • I also discovered vue-sanitize do you have an advice on it ??? – Incremental Aug 22 '20 at 18:19
  • vue-i18n is definitely ecommended when comes with translation stuffs, so it's a yes for me. vue-sanitize depends use-cases such as markdown preview, best is do sanitize via back-end for production phase. – SC Kim Aug 22 '20 at 19:59
0

Despite Kim's answer and the security considerations, for the moment I did the trick with CSS for tags b and strong which were override in the page. Thanks

Incremental
  • 27
  • 1
  • 8