Как читать существующие данные в Quill JS

Используйте setContents, чтобы вставить дельту:

quill.setContents({
    "ops":[
        {"insert":"this is a test bit of text\n"}
    ]
});

http://codepen.io/anon/pen/VKWZLd

Вы можете получить доступ к необработанному HTML с помощью:

var html = document.querySelector(".ql-editor").innerHTML

Если вы работаете с необработанным HTML, вам необходимо очистить его перед использованием.

У меня это работает. Пусть это кому-нибудь поможет.

editor.root.innerHTML = "<p><strong class=\"ql-size-large\"><em><s><u>This would be the text that we are going to show in the editor with pre-formatting.<\/u><\/s><\/em><\/strong><\/p>";

Здесь editor будет вашим экземпляром пера.

Благодаря этой ССЫЛКЕ

• Создайте редактор (пример ниже для версии только для чтения)
• Найдите свою цель (там, где вы хотите, чтобы отображался текст)
• Анализируйте содержимое вашей строки
• setContents для вашего редактора

var quill = new Quill('#editor-container', { modules: { toolbar: [] }, readOnly: true, theme: 'bubble'} );
var $target = $('#editor-container');
var $content = JSON.parse($target[0].innerText);
quill.setContents($content);

Я пишу это для людей, которые используют Laravel. У меня так получилось:

Чтобы сохранить, перед отправкой моей формы:

        form.submit(function(){
            var description = document.querySelector('input[name=description]');
            description.value = editor.root.innerHTML;                
        })

Чтобы отредактировать форму, я загружаю контент:

         var editor = new Quill('#quill-editor', {
            modules: {
                toolbar: toolbarOptions
            },
            placeholder: 'type something',
            theme: 'snow'
        });
        .root.innerHTML = '{!! !empty($quill_editor) ? $quill_editor : ''  !!} ';

И если, наконец, вы хотите использовать его как html, вы можете загрузить его в свой шаблон следующим образом:

{!! $description !!}

Надеюсь кому-то пригодится

// parse String
let stringToParse = String.raw`{"ops":[{"insert":"this is a test bit of text\n"}]}`;
// set quill editor instance to Delta state.
quill.setContents(JSON.parse());

setContents из Quill, чтобы установить редактор в Delta.

String.raw, чтобы избежать расширения От '\t' до ' '. (см. также JSON.parse выдает ошибку при разборе ...)

Quill анализирует контент собственным методом.

Если вы используете HTML напрямую, используйте опасноPasteHTML, например следующее:

quill.clipboard.dangerouslyPasteHTML("<p>here is some <strong>awesome</strong> text</p>");

Это очистит HTML своим собственным методом и загрузит HTML.

Итак, мне удалось найти обходной путь, не уверен, что это правильный метод, но он работает.

Оказывается, это был javascript, ускользавший от переданных ему данных.

По сути, когда форма не может отправить данные с ошибками, они добавляются обратно в скрытое поле ввода, а затем javascript читает их оттуда ...

HTML-форма:

<input name="post" id="post" type="hidden" data-post-id="{{ old('post') }}">

Javascript:

var postId = $('#post').data("post-id");
quill.setContents(postId);