编辑文章时，获取的描述无法加载到TinyMCE编辑器中？

问题场景 #

我希望在带有TinyMCE的模态框中显示文章描述，用于编辑现有文章。标题与图片URL均可正常加载，但描述内容无法正常显示。

原代码 #

function edit_article(id){
        edit_editor();
        var title = $('#' + id + ' #t strong').text();
        var image_url = $('#' + id + ' #img_url').text();
        var description = $('#desc_' +id).html();
        $('#article_title_edited').val(title);
        $('#article_image_edited').val(image_url);
        $('#test').html(description);
        $('#article_description_edited').tinymce.get('article_edited').setContent(description);


    }
    function edit_editor(){
        tinymce.init({
            selector: 'textarea#article_edited',
            height: 380,
            language: 'pl',
            menubar: false,
            plugins: [
                'charmap', 'lists', 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', 'help', 'wordcount'
            ],
            toolbar: 'undo redo | blocks | bold italic | bullist numlist | removeformat | help',
            block_formats: 'Paragraph=p; Header 1=h1; Header 2=h2',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
            extended_valid_elements : 'b/strong',
            formats: {
                bold: { inline: 'b' }
            },
            entity_encoding: 'raw',
            branding: false
        });

问题分析与解决方案 #

1. 编辑器重复初始化 + 初始化未完成就设置内容

每次调用edit_article都会执行edit_editor()重新初始化TinyMCE，且直接调用setContent时编辑器可能还未初始化完成，导致设置失败。

修复代码：

• 先检查编辑器是否已存在，避免重复初始化
• 通过init_instance_callback在编辑器初始化完成后再设置内容

function edit_editor(callback) {
  // 检查编辑器实例是否已存在
  const existingEditor = tinymce.get('article_edited');
  if (existingEditor) {
    callback && callback(existingEditor);
    return;
  }

  tinymce.init({
    selector: 'textarea#article_edited',
    height: 380,
    language: 'pl',
    menubar: false,
    plugins: [
      'charmap', 'lists', 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', 'help', 'wordcount'
    ],
    toolbar: 'undo redo | blocks | bold italic | bullist numlist | removeformat | help',
    block_formats: 'Paragraph=p; Header 1=h1; Header 2=h2',
    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
    extended_valid_elements : 'b/strong',
    formats: {
      bold: { inline: 'b' }
    },
    entity_encoding: 'raw',
    branding: false,
    // 初始化完成后执行回调设置内容
    init_instance_callback: function(editor) {
      callback && callback(editor);
    }
  });
}

function edit_article(id){
  var title = $('#' + id + ' #t strong').text();
  var image_url = $('#' + id + ' #img_url').text();
  var description = $('#desc_' +id).html();
  
  $('#article_title_edited').val(title);
  $('#article_image_edited').val(image_url);
  $('#test').html(description);

  // 等待编辑器初始化完成后设置内容
  edit_editor(function(editor) {
    editor.setContent(description);
  });
}

2. 模态框显示时机问题

如果使用Bootstrap这类框架的模态框，需要确保在模态框完全显示后再初始化编辑器/设置内容，否则编辑器可能因DOM未渲染完成导致初始化失败。

补充处理：

// 假设模态框ID为editModal
$('#editModal').on('shown.bs.modal', function() {
  // 在这里调用edit_article或编辑器初始化逻辑
});

3. 内容获取验证

先在控制台打印description值，确认$('#desc_' +id).html()能正确获取到内容：

console.log(description); // 检查是否为空或格式异常

内容的提问来源于stack exchange，提问作者NoDeD