Toast UI 编辑器：获取 HTML 内容和图像元素

Question

我正在使用 Toast UI 库，每页可以有多个编辑器。编辑器显示并工作，但是当我尝试获取其中的 HTML 标签以将它们保存在我的数据库中时，我总是会遇到函数错误。我尝试过：

getHtml()

、

getContent()

，还有

getInstance()

。

我在搜索解决错误时找到的文档和其他资源对我没有帮助，或者它们已经过时了。

这是我的编辑器声明代码

<div class="textarea-editor" data-name="{{ fieldname }}" data-editorid="editor{{ field.unique_id }}" id="editor-{{field.unique_id}}"></div>

<!-- Inclusione dello script di Toast UI Editor -->

<script>
    const Editor{{ field.unique_id }} = toastui.Editor;

    const editor{{ field.unique_id }} = new Editor{{ field.unique_id }} ({
        el: document.querySelector('#editor-{{ field.unique_id }}'),
        height: '200px',
        initialEditType: 'wysiwyg',
        previewStyle: 'vertical',
        toolbarItems: [
            ['heading', 'bold', 'italic', 'strike'],
            ['hr', 'quote'],
            ['ul', 'ol', 'task', 'indent', 'outdent'],
            ['table', 'image', 'link'],
            ['code', 'codeblock'],
            ['scrollSync'],
        ],
        initialValue: `{{ field.value|safe }}`,
    });
</script>

这是我尝试过但没有任何结果

$('.textarea-editor').each(function () {
    var Uieditor = $(this).attr('data-editorid');
    Uieditor = Uieditor.toastui.getInstance();
})

Answer 1

要从页面上的多个 Toast UI 编辑器实例正确初始化和检索 HTML 内容，请确保正确引用和访问每个编辑器。以下是调整设置的方法：

1. 将每个编辑器实例存储在全局对象中：

window.editors = window.editors || {};
const uniqueId = '{{ field.unique_id }}';
window.editors[uniqueId] = new toastui.Editor({
    el: document.querySelector('#editor-' + uniqueId),
    height: '200px',
    initialEditType: 'wysiwyg',
    previewStyle: 'vertical',
    toolbarItems: [
        ['heading', 'bold', 'italic', 'strike'],
        ['hr', 'quote'],
        ['ul', 'ol', 'task', 'indent', 'outdent'],
        ['table', 'image', 'link'],
        ['code', 'codeblock'],
        ['scrollSync'],
    ],
    initialValue: `{{ field.value|safe }}`,
});

2. 从所有编辑器检索 HTML 内容：

function getAllEditorContents() {
    const contents = {};
    for (const id in window.editors) {
        if (window.editors.hasOwnProperty(id)) {
            contents[id] = window.editors[id].getHtml();
        }
    }
    return contents;
}

// Example usage
const allContents = getAllEditorContents();
console.log(allContents);

这种简化的设置使用唯一的 ID 正确初始化每个编辑器，并允许轻松检索 HTML 内容。确保每个 ID 都是唯一的以避免冲突，并且在应用程序的逻辑中适当地调用检索函数。