Home Forums Porto Admin Template Summernote settings

This topic contains 6 replies, has 2 voices, and was last updated by  Support2 2 months, 1 week ago. This post has been viewed 210 times

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #10030433

    simplyjessica
    Participant

    Hey guys,

    Two questions, I see on the official page https://summernote.org/deep-dive/ you can modify the summernote textbox options, i.e.

    $('#summernote').summernote({
      toolbar: [
        // [groupName, [list of button]]
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']]
      ]
    });

    Where would I put this code in porto? At the bottom of the page in script tags, or somewhere else?

    Second question, when my users are in dark/night mode the text box is obviously white, is there a way to make that dark too like the rest of the dark theme?

    Thanks!



    Template Version: 2.1.1
    #10030437

    Support2
    Keymaster

    Hello,

    1) You can pass the options trough “data-plugin-options”. For example:

    <div class="summernote" data-plugin-summernote data-plugin-options='{ "height": 180, "codemirror": { "theme": "ambiance" }, "toolbar": [ ["style", ["bold", "italic", "underline", "clear"]], ["font", ["strikethrough", "superscript", "subscript"]], ["fontsize", ["fontsize"]], ["color", ["color"]], ["para", ["ul", "ol", "paragraph"]], ["height", ["height"]] ] }'><p>Start typing...</p></div>

    2) To change the summernote to dark colors please use this custom CSS:
    (css/custom.css):

    html.dark .note-editor.note-frame .note-editing-area .note-editable {
        background-color: transparent;
    }
    
    html.dark .note-toolbar .note-btn, html.dark .note-toolbar .note-btn:focus, html.dark .note-toolbar .note-btn:active {
        background-color: #2e353e !important;
        color: #9097a0 !important;
        border-color: #2e353e !important;
    }
    
    html.dark .show > .btn-light.dropdown-toggle {
        background-color: #242830;
    }
    
    html.dark .note-toolbar .dropdown-menu .dropdown-item {
        color: #9097a0;
    }
    
    html.dark .note-toolbar .btn {
        color: #9097a0;
    }

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10030439

    simplyjessica
    Participant

    You guys rock!!!!

    One last thing I can’t figure out, I want to set the lineHeight

    // @param {Number} line height - unit is px
    $('#summernote').summernote('lineHeight', 20);

    As per https://summernote.org/deep-dive/#lineheight, does that go in the data-plugin-options too?


    #10030441

    simplyjessica
    Participant

    PS: I think lineheight is what I am after, basically when you press ENTER in the text box I want it to only drop one line. The default here seems to be two lines, like in MS Word default spacing, but when you click on no spacing in MS Word it only drops one line.


    #10030445

    Support2
    Keymaster

    Hello,

    This is the expected behavior of Summernote and looking at the documentation seems that the development team don’t wants to add a option for this.
    To get the space like a “br” instead of “paragraph” you need press on the keyboard “SHIFT + ENTER”.

    Here you can find some alternatives with custom code of another users:
    https://github.com/summernote/summernote/issues/546

    Regarding to set options on the summernote trough methods this is not possible with “data-plugin-options”. In that case you need do all trough JS:

    1) First add a ID on the summernote HTML:

    <div id="mysummernote" class="summernote"><p>Start typing...</p></div>

    2) Then add in (js/custom.js):

    $('#mysummernote').summernote({ 
    	"lineHeight": 1, 
    	"height": 300, 
    	"codemirror": { "theme": "ambiance" }, 
    	"toolbar": [ 
    		["style", ["bold", "italic", "underline", "clear"]], 
    		["font", ["strikethrough", "superscript", "subscript"]], 
    		["fontsize", ["fontsize"]], 
    		["color", ["color"]], 
    		["para", ["ul", "ol", "paragraph"]], 
    		["height", ["height"]] 
    	]
    }).summernote('lineHeight', 120);

    Kind Regards,

    Rodrigo.


    #10030456

    simplyjessica
    Participant

    Thanks, yes it would appear the developer didn’t want to change that. I think with the new custom CSS you gave me here, and your other editor in the theme, I have achieved what I had hoped for so all good!

    Thanks again!


    #10030461

    Support2
    Keymaster

    Hello,

    Great!

    If you need further assistance feel free to contact us.

    Kind Regards,

    Rodrigo.


Viewing 7 posts - 1 through 7 (of 7 total)