一页中的多个 Summernote 所见即所得编辑器具有相同的占位符

Posted 2023-03-22

【中文标题】一页中的多个 Summernote 所见即所得编辑器具有相同的占位符

【英文标题】：Multiple Summernote Wysiwyg editor in one page have same placeholder

【发布时间】：2019-10-19 17:10:52

【问题描述】：

我目前正在使用 Summernote，它在我的整个应用程序中运行良好，但是我遇到了一个小问题，我在一页中有 2 个特色。我发现第二个编辑器中的占位符继承了第一个编辑器的占位符。有没有一种简单的方法来解决这个问题，而无需创建 wysiwyg-editor1 和 wysiwyg-editor2？

editor = $('[data-toggle="wysiwyg-editor"]');

default_options = 
   minHeight: 400,
   styleTags: ['p', 'h1', 'h2', 'h3',],
   toolbar: [
        ['cleaner', ['cleaner']],
        ['insert', ['table', 'link']],
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['para', ['ul', 'ol']]
    ],
    placeholder: $(editor).attr('placeholder'),
    cleaner:
        action: 'paste',
        newline: '<p></p>',
        keepClasses: true
    ,
    prettifyhtml: true,
    disableDragAndDrop: true,
;

editor.summernote(default_options);


<textarea data-toggle="wysiwyg-editor" name="intro" placeholder="Provide an introduction"></textarea>
<textarea data-toggle="wysiwyg-editor" name="description" placeholder="Provide a description"></textarea>

【参考方案1】：

试试这个：

editor_intro = $('[name="intro"]');
editor_description = $('[name="description"]');

    default_options = 
       minHeight: 400,
       styleTags: ['p', 'h1', 'h2', 'h3',],
       toolbar: [
            ['cleaner', ['cleaner']],
            ['insert', ['table', 'link']],
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['strikethrough', 'superscript', 'subscript']],
            ['para', ['ul', 'ol']]
        ],
        cleaner:
            action: 'paste',
            newline: '<p></p>',
            keepClasses: true
        ,
        prettifyHtml: true,
        disableDragAndDrop: true,
    ;

    default_options.placeholder = $(editor_intro).attr('placeholder');
    editor_intro.summernote(default_options);

    default_options.placeholder = $(editor_description).attr('placeholder');
    editor_description.summernote(default_options);


    <textarea data-toggle="wysiwyg-editor" name="intro" placeholder="Provide an introduction"></textarea>
    <textarea data-toggle="wysiwyg-editor" name="description" placeholder="Provide a description"></textarea>

【讨论】：

谢谢，我自己也尝试过类似的方法，但我遇到的问题是我也在应用程序的其他页面上使用了 Summernote。 default_options 等在包含中定义。