Updating content doesn't load it in the editor

[andreixk]

I load data from server, as described below, however the editor shows blank (i confirm with console.log that data loads properly)

...
data () : ({
content : ''
})
...
this.$post('/getuser',{id:5})
.then(data => this.content = data);

...
<quill v-model="content" output="html"/>

[BrockReece]

Hi @andreixk 2 options for this, you can either add a v-if to the markup,

<quill v-if="content" v-model="content" output="html"/>

... or you can emit an event on the quill component to set the content when your promise resolves.

...
data () : ({
content : ''
})
...
this.$post('/getuser',{id:5})
.then((data) => {
  this.content = data
  this.$refs.quill.$emit('set-html', data)
});

...
<quill ref="quill" v-model="content" output="html"/>

I hope that helps? Brock

[andreixk]

Thank you. That solved my problem, however there are two new ones. When I use Vueditor (another wysiwyg editor), the style of text is in line with global styles and it's preserved when i try to modify the text

However, when I use quill, it partially resets the styles. and when I try to modify the text, it completely removes colours and alignment/indentation.

The second problem is when I add the html programmatically, i'm getting quite a few errors:

Uncaught Error: [Parchment] Cannot insert block into inline

Uncaught TypeError: Cannot read property 'emit' of undefined (about 5 of these)

The HTML i'm inserting is moderately complex (has div's, span's, hr's, tables, description lists, unordered lists), could that be causing the issue?

[BrockReece]

Which solution did you use to fix your problem?

This plugin is a fairly transparent wrapper for the Quill editor, so I am not sure if anything in this repo is causing those styling issues.

Quill uses a json markup, referred to as a delta, for storing the structure of the content. When you import html markup it will convert it into a delta before converting it back to html to display on the page. It is more than likely that issues are from these conversions.

If you are happy to share the html, I can test a few things for you?

[andreixk]

I used v-if

And here is the html. It's generated by the API, so it's not pretty, but it's functional. Let me know if you need the prettified version. Also, it uses a lot of external CSS classes (e.g. text-center, col-md-12, etc), do you need that CSS?

<div class='text-center'><h4>Encounter</h4></div><table style="margin: 0px auto;"><tr><td class="text-right"><strong>Encounter date</strong>:</td><td> 30 Aug 2017</td></tr> <tr><td class="text-right"><strong>Patient</strong>:</td><td> Mary Anderson</td></tr> <tr><td class="text-right"><strong>DOB</strong>:</td><td> 19 Feb 1866</td></tr></table> <div class="spacer"></div> <div><div class="all-caps text-center" style="color: rgb(153, 0, 0);"><strong><u>Subjective</u></strong></div> <div><!----> <dl><div class="no-print-break"><dt style="color: rgb(53, 97, 56);">Reason For Visit</dt> <dd><div data-v-a0feb7cc=""><!----> <div data-v-a0feb7cc="" class="read-content">allergy consult</div></div></dd></div><div class="no-print-break"><dt style="color: rgb(53, 97, 56);">History Of Present Illness</dt> <dd><div data-v-3b87ef0b=""><div data-v-3b87ef0b="" class="">bees wasps other insects</div></div></dd></div><div class="no-print-break"><dt style="color: rgb(53, 97, 56);">Prescriptions/Medications</dt> <dd><div data-v-a34f0f62=""><div data-v-a34f0f62="" class="container-fluid"><!----> <div data-v-a34f0f62="" class="row"><div data-v-a34f0f62="" class="col-md-12 no-pad">Rx: <u>CORTISONE ACETATE TAB 25MG</u>.</div></div> <!----></div></div></dd></div><div class="no-print-break"><dt style="color: rgb(53, 97, 56);">Allergies</dt> <dd><div><div class="container-fluid"><!----> <!----> <div class="row"><div class="col-md-12 no-pad">bees (Adverse Reaction); Moderate.</div></div></div></div></dd></div></dl></div> <hr></div><div><div class="all-caps text-center" style="color: rgb(153, 0, 0);"><strong><u>Objective</u></strong></div> <div><!----> <dl><div class="no-print-break"><dt style="color: rgb(53, 97, 56);">Vitals</dt> <dd><span data-v-d205789e=""><div data-v-d205789e="" class="row flex no-marg"><div data-v-d205789e="" class="vc-4 vc-min-100">HR: <span data-v-d205789e="">--</span></div> <div data-v-d205789e="" class="vc-4 vc-min-100">BP: <span data-v-d205789e="">--</span></div> <div data-v-d205789e="" class="vc-4 vc-min-100">Resp. Rate: <span data-v-d205789e="">--</span></div> <div data-v-d205789e="" class="vc-4 vc-min-100">Height: <span data-v-d205789e="">--</span></div> <div data-v-d205789e="" class="vc-4 vc-min-100">Weight: <span data-v-d205789e="">--</span></div> <div data-v-d205789e="" class="vc-4 vc-min-100">BMI: <span data-v-d205789e="">--</span></div> <div data-v-d205789e="" class="vc-4 vc-min-100">Waist: <span data-v-d205789e="">--</span></div> <div data-v-d205789e="" class="vc-4 vc-min-100">Hips: <span data-v-d205789e="">--</span></div> <div data-v-d205789e="" class="vc-4 vc-min-100">WHR: <span data-v-d205789e="">--</span></div> <div data-v-d205789e="" class="vc-4 vc-min-100">Head: <span data-v-d205789e="">--</span></div> <div data-v-d205789e="" class="vc-4 vc-min-100">O<sub data-v-d205789e="">2</sub> sats: <span data-v-d205789e="">--</span></div> <div data-v-d205789e="" class="vc-4 vc-min-100">Temp: <span data-v-d205789e="">--</span></div> <div data-v-d205789e="" class="vc-4 vc-min-100">Position: n/a</div> <div data-v-d205789e="" class="vc-4 vc-min-100">Side: n/a</div> <div data-v-d205789e="" class="vc-4"></div></div></span></dd></div></dl></div> <hr></div><div><div class="all-caps text-center" style="color: rgb(153, 0, 0);"><strong><u>Assessment</u></strong></div> <div><!----> <dl><div class="no-print-break"><dt style="color: rgb(53, 97, 56);">Diagnosis</dt> <dd><div><div class="container-fluid"><!----> <!----> <div class="row"><div class="col-md-12 no-pad"><strong>691</strong>: <u>Dermatitis, Allergic, Atopic; Dermatitis, Neuro; Diaper Rash; Eczema; Neuroderma...</u> </div></div></div></div></dd></div></dl></div> <hr></div> <!----><br/>

[BrockReece]

https://codepen.io/BrockReece/pen/PKLXmK

So I have just knocked up a quick code pen to test this markup in a raw Quill editor and it looks like there is an issue with formatting tables, it seems to have converted it to paragraph tags.

[andreixk]

I guess I'll need to figure out how to preserve HTML in quill. Thanks for your help there.

What about the console errors? Were you able to reproduce those?

[BrockReece]

No console errors in the codepen, and after looking through this codebase, I can't find any usage of *.emit, so I think the error may be coming from elsewhere in your project.

Please let me know if you do find the error to be coming from this library though.