web-dev-qa-db-ja.com

jQuery Summernoteカスタムボタン関数

ここにjsFiddleがあります-> http://jsfiddle.net/cm910t89/2/

Summernote WYSIWYG Editor でカスタムボタンを作成しましたが、プラグイン内で関数を適切に機能させることができません。

ユーザーがエディター内の任意のテキストを強調表示（またはカーソルを使用して選択）できるようにしてから、選択したテキストをspanタグでラップし、特別なクラスの「snote」を使用します。 。

現在、選択したものをspanタグでそのクラスでラップできますが、エディター内のすべてのフォーマットが消去されます。

選択したテキストがスパンタグでラップされ、フォーマットが同じままになるように、誰かがお手伝いできますか？

jsFiddle-> http://jsfiddle.net/cm910t89/2/

$(document).ready(function() {
var editor = $('#summernote');
editor.summernote({
    height: ($(window).height() - 250),
    focus: false,
    toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['strikethrough']],
            ['fontsize', ['fontsize']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['view', ['fullscreen', 'codeview']],
        ],
    oninit: function() {
        // Add "open" - "save" buttons
        var noteBtn = '<button id="makeSnote" type="button" class="btn btn-default btn-sm btn-small" title="Identify a music note" data-event="something" tabindex="-1"><i class="fa fa-music"></i></button>';            
        var fileGroup = '<div class="note-file btn-group">' + noteBtn + '</div>';
        $(fileGroup).appendTo($('.note-toolbar'));
        // Button tooltips
        $('#makeSnote').tooltip({container: 'body', placement: 'bottom'});
        // Button events
        $('#makeSnote').click(function(event) {
            var highlight = window.getSelection(),  
            spn = '<span class="snote" style="color:blue;">' + highlight + '</span>',
            text = $('.note-editable').children('p').text(),
            range = highlight.getRangeAt(0),
            startText = text.substring(0, range.startOffset), 
            endText = text.substring(range.endOffset, text.length);

            $('.note-editable').html(startText + spn + endText);
        });
     },

});
jquerybuttontoolbarsummernote
12
Sanya

$('.note-editable')はtextareaであるため、.text()を呼び出すと、要素のテキストのみが取得され、プラグインsummernoteが追加したすべてのhtmlが失われ、見やすく表示されます。

強調表示されたテキストを置き換えるためにそのすべてのコードは必要ありません。実際、必要なのは作成したrangeオブジェクトだけです！彼と一緒に、.deleteContents()を呼び出して選択した範囲をクリアし、次に.insertNode(node)を呼び出して動的に作成されたスパンをテキストとともに挿入します。

$('#makeSnote').click(function(event) {
     var highlight = window.getSelection(),  
         spn = document.createElement('span'),
         range = highlight.getRangeAt(0)

     spn.innerHTML = highlight;
     spn.className = 'snote';  
     spn.style.color = 'blue';

     range.deleteContents();
     range.insertNode(spn);
});

これが動作しています fiddle 。

7
Denis Ali

これを試して

$('#makeSnote').click(function(event) {
    var highlight = window.getSelection(),  
    spn = '<span class="snote" style="color:blue;">' + highlight + '</span>',
    text = $(highlight.anchorNode).text(),
    range = highlight.getRangeAt(0),
    startText = text.substring(0, range.startOffset), 
    endText = text.substring(range.endOffset, text.length);
    $(highlight.anchorNode).replaceWith(startText + spn + endText);
});

代わりにanchorNodeを使用しました。TextAreaにText以外の他のHTML Nodeがあるためです。

1
Alvin Magalona

私はSummerNoteを使用していませんが、フィドルを見ると、textareaをcontenteditable divに変換するラッパーです。これはdivであるため、_<p>_および_<br>_タグを使用して間隔を維持できるため、フォーマットを維持するには、innerHTMLではなくTextを取得する必要があります。 + Denis ALiからの回答は、タグをそのままの場所に残し、選択したパーツのみを削除/再注入するため機能します。

innerHTML（JS）または$().html()（Jq）を使用して、.textの代わりにフォーマットされたコンテンツを取得できますが、+ Denisもこれも機能しない場合は、何か他に影響があるはずです。 。デニスはフィドルとライブラリに基づいて動作するはずです。

0
TechnicalChaos