Formatted text inside Quill editor on page load

Question

I have what I think should be a very simple question. How do you put formatted multi-line strings into the quill editor on page load?

I want to use a quill editor to let the user enter json in, but I want to have certain json in the quill field when the user first visits the page. However, I can't seem to have the json formatted in any specific way. Pasting the json into the HTML div itself obviously eats all the white space, and I've been unsuccessful in using any kind of multi-line string in javascript.

It's gotta be something quill can do, as almost all of the quill fields in their documentation use multi-line formatted strings. How do they do it?

P.S. I know asking the user to enter JSON sounds strange, trust me, for this project, it's a requirement. This is not for a public site.

jpuntd · Accepted Answer · 2017-08-17T06:24:08.160

You can try pasting the json inside <pre> tags into the HTML div itself:

<div id="editor-container">
  <pre>{
  "firstName": "John",
  "lastName": "Smith",
  "isAlive": true 
  }
  </pre>
</div>

That way whitespace keeps preserved.

That said, quill is a rich text editor and all of this functionality is superfluous if you are using it to enter json. You might be better of using an online code editor like codemirror to have your users enter json. These online code editors offer syntax highlighting that makes editing code (after all json is code) much more comfortable. It will show if a line is missing a bracket or a colon or a comma and that will make it easier for your users to enter json constructs.

Please also look at YAML which in my experience is more human readable than json and offers the same functionality and is widely supported in most computing languages.

Thanks, this is great. I had forgotten about the `pre` tag. But your point about using a code editor is well-received; I may switch to that. — dcashman, Aug 17 '17 at 17:05

Formatted text inside Quill editor on page load

1 Answers1