Trix Editor Uploading Image. After page refresh getting "Unexpected end of JSON input"

I am using the Trix editor and have implemented uploading images as per their docs which works almost perfectly.

However when the page refreshes after saving I am getting "Unexpected end of JSON input" which then results in nothing being loaded into the trix editor field.

I can see that in the DB it is saved and contains data attributes with json inside containing trix information about the html tags. For instance.

<div><a href="http://d40qaqg3egdda.cloudfront.net/public/assets/19/sapiente-et-nisi-dolores-image.jpg"><strong><figure class="attachment attachment--preview" data-trix-attachment="{&quot;contentType&quot;:&quot;image&quot;,&quot;height&quot;:1280,&quot;url&quot;:&quot;http://d40qaqg3egdda.cloudfront.net/public/assets/19/sapiente-et-nisi-dolores-image.jpg&quot;,&quot;width&quot;:854}" data-trix-content-type="image" data-trix-attributes="{&quot;caption&quot;:&quot;Hey&quot;}"><img src="http://d40qaqg3egdda.cloudfront.net/public/assets/19/sapiente-et-nisi-dolores-image.jpg" width="854" height="1280"><figcaption class="attachment__caption attachment__caption--edited">Hey</figcaption></figure></strong></a></div>

It looks like the quotes are getting escaped but this is happening as I add the image via the trix editor not on the backend.

Would be very grateful if somebody can help!?

Ralph

theD

7 years ago

Best Answer

Level 4

I ran into the same problem. I was doing something like this

<input id="trix" type="hidden" name="body" value="{!! $result->body !!}" />
<trix-editor input="trix"></trix-editor>

What you'll want to do is have Trix input your content for you like:

<input id="trix" type="hidden" name="body" value="" />
<trix-editor input="trix"></trix-editor>
<script>
var element = document.querySelector("trix-editor");
element.editor.insertHTML('{!! $result->body !!}');
</script>

https://github.com/basecamp/trix#inserting-html

Please or to participate in this conversation.