0

我正在为 Wagtail 构建一个基于 GPT-3 的博客帖子生成器，以简化为我的网站创建博客内容。虽然我已经成功添加了生成按钮和相关提示/输入/XHR 请求，但我面临的挑战是保留 Draftail 期望的内容结构。

它工作的 Gif，以及相应的 javascript 错误

如您所见，我可以正确地定位并添加来自 GPT-3 的结果 HTML，但如果您查看控制台错误，您会发现 Draftail 真的讨厌我在此处提供的格式。

相关JS代码：

modal_input.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            console.log(modal_input.value);

            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/make-blog-post/");
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
            xhr.onreadystatechange = function() {
                if (xhr.readyState == XMLHttpRequest.DONE) {
                    response_g = JSON.parse(xhr.responseText);
                    console.log(response_g);
                    console.log($(document).find('div.notranslate.public-DraftEditor-content').first().children().first())
                    $(document).find('div.notranslate.public-DraftEditor-content').first().children().first().html(response_g.generated);
                }
            }
            xhr.send("prompt=" + modal_input.value);

            document.body.removeChild(modal_outter);
            document.body.removeChild(modal_inner);

            console.log(response_g);
        }
    })

我输出的内容结构示例

<div aria-describedby="placeholder-63m5t" class="notranslate public-DraftEditor-content" role="textbox" spellcheck="true" style="outline: currentcolor none medium; user-select: text; white-space: pre-wrap; overflow-wrap: break-word;" contenteditable="true">
  <div data-contents="true">
    <br><br>Javascript is a programming language that enables developers to create interactivity on web pages. It is used on millions of websites and is one of the most popular programming languages in the world.
  </div>
</div>

默认/工作内容结构示例（Draftail 期望的）

<div aria-describedby="placeholder-2h2fl" class="notranslate public-DraftEditor-content" role="textbox"
     spellcheck="true"
     style="outline: currentcolor none medium; user-select: text; white-space: pre-wrap; overflow-wrap: break-word;"
     contenteditable="true">
    <div data-contents="true">
        <div class="Draftail-block--unstyled " data-block="true" data-editor="2h2fl" data-offset-key="d4fmh-0-0">
            <div data-offset-key="d4fmh-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span
                    data-offset-key="d4fmh-0-0"><span
                    data-text="true">This is a test of the proper content structure.</span></span></div>
        </div>
    </div>
</div>

如您所见，页面加载时动态生成了许多数据属性。我可以检索它并类似地构造我的内容，但这需要 RichText 框中的现有内容才能使用，因此不能用于空的 RichText 框。

关于从哪里开始与 Draftail 交互以正确添加格式化内容的任何想法？

4

0 回答 0