Summernote个性化定制使用帮助(一)

《健身计划制定》：帮助用户定制个性化的锻炼计划 #生活技巧# #健康生活方式# #健康生活方式书籍# #运动康复图书#

Deep dive

Initialization options

Customize by Initializing various options and modules.

Custom toolbar, popover

Summernote allows you to customise the toolbar.

$('#summernote').summernote({

toolbar: [

['style', ['bold', 'italic', 'underline', 'clear']],

['font', ['strikethrough', 'superscript', 'subscript']],

['fontsize', ['fontsize']],

['color', ['color']],

['para', ['ul', 'ol', 'paragraph']],

['height', ['height']]

]

});

This is a toolbar with font style only.

Toolbar for font style...

You can compose a toolbar with pre-shipped buttons.

Insert picture: open image dialoglink: open link dialogvideo: open video dialogtable: insert a tablehr: insert a horizontal ruleFont Style fontname: set font familyfontsize: set font sizecolor: set foreground and background colorforecolor: set foreground colorbackcolor: set background colorbold: toggle font weightitalic: toggle italicunderline: toggle underlinestrikethrough: toggle strikethroughsuperscript: toggle superscriptsubscript: toggle subscriptclear: clear font styleParagraph style style: format selected blockol: toggle ordered listul: toggle unordered listparagraph: dropdown for paragraph alignheight: set line heightMisc fullscreen: toggle fullscreen editing modecodeview: toggle wysiwyg and html editing modeundo: undoredo: redohelp: open help dialog

The following settings are default options for toolbar buttons.

toolbar: [

['style', ['style']],

['font', ['bold', 'underline', 'clear']],

['fontname', ['fontname']],

['color', ['color']],

['para', ['ul', 'ol', 'paragraph']],

['table', ['table']],

['insert', ['link', 'picture', 'video']],

['view', ['fullscreen', 'codeview', 'help']],

],

Air-mode has its own popover, not toolbar. You can customize it with popover.air option.

$('#summernote').summernote({

popover: {

air: [

['color', ['color']],

['font', ['bold', 'underline', 'clear']]

]

}

});

You can also setup buttons of the other popovers in the same way. The below settings are default options for popovers.

popover: {

image: [

['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],

['float', ['floatLeft', 'floatRight', 'floatNone']],

['remove', ['removeMedia']]

],

link: [

['link', ['linkDialogShow', 'unlink']]

],

table: [

['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],

['delete', ['deleteRow', 'deleteCol', 'deleteTable']],

],

air: [

['color', ['color']],

['font', ['bold', 'underline', 'clear']],

['para', ['ul', 'paragraph']],

['table', ['table']],

['insert', ['link', 'picture']]

]

}

Blockquote breaking level

You can set blockquote breaking level with blockquoteBreakingLevel option.

Each configurable breaking level means:

0 - No break, the new paragraph remains inside the quote.1 - Break the first blockquote in the ancestors list.2 - Break all blockquotes, so that the new paragraph is not quoted. (default)

$('#summernote').summernote({

blockquoteBreakingLevel: 2

});

Custom fontNames

You can define fontNames items with the fontNames option.

$('#summernote').summernote({

fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New']

});

Summernote tests for fonts in fontNames before adding them to dropdown. This is a problem while using web fonts. It’s not easy picking a nice time to check the availability of web fonts. You can define a list of web fonts to be ignored with the fontNamesIgnoreCheck.

$('#summernote').summernote({

fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Merriweather'],

fontNamesIgnoreCheck: ['Merriweather']

});

Custom line heights

You can override the default list and specify a custom one.

$('#summernote').summernote({

lineHeights: ['0.2', '0.3', '0.4', '0.5', '0.6', '0.8', '1.0', '1.2', '1.4', '1.5', '2.0', '3.0']

});

Custom placeholder

You can define a placeholder with the placeholder option.

$('#summernote').summernote({

placeholder: 'write here...'

});

Dialogs

Dialogs can be placed in body, not within Summernote. If you’re using Summernote within a modal dialog, please set this option as true.

$('#summernote').summernote({

dialogsInBody: true

});

By default, dialogs are shown and hidden without a fading effect. But you can turn it on by dialogsFade.

$('#summernote').summernote({

dialogsFade: true // Add fade effect on dialogs

});

Disable drag and drop

You can disable drag and drop with the disableDragAndDrop option.

$('#summernote').summernote({

disableDragAndDrop: true

});

Disable shortcuts

You can disable custom shortcuts with the shortcuts option.

$('#summernote').summernote({

shortcuts: false

});

Disable TAB

You can disable TAB/Shift+Tab intereaction with the tabDisable option. This will allow tabbing through fields in Forms.

$('#summernote').summernote({

tabDisable: false

});

XSS protection for CodeView

Summernote provides a XSS protection for CodeView. It consists of filtering tags and whitelist for iframe.

Whitelist filter is turned on by default, but filtering tags is not. You can turn them on and off by options like below.

$('#summernote').summernote({

codeviewFilter: false,

codeviewIframeFilter: true

});

And, you can also add your own whitelist domains and use custom tag filters. Please check the default filter before customizing.

$('#summernote').summernote({

codeviewFilterRegex: 'custom-regex',

codeviewIframeWhitelistSrc: ['my-own-domainname']

});

But you have to remember that this protection only affects on front-end side – to prevent attacks thoroughly, you have to check it on back-end side again.

Basic API

You can initialize Summernote with summernote.

$('#summernote').summernote();

Then You can use the editor API through the summernote method. This is an example code for inserting ‘hello world’ text.

$('#summernote').summernote('editor.insertText', 'hello world'));

It calls the editor module’s insertText method with ‘hello world’. The first argument is a string type which represents the module and its method. The rest are method’s arguments.

If you call the API without module name, editor.methodName will be called.

$('#summernote').summernote('insertText', 'hello world');

A module named editor supports several methods for editor’s basic behavior

codeview

You can toggle editable/codable view by API.

$('#summernote').summernote('codeview.toggle'); createRange

Creates a range object for current user selection.

var range = $('#summernote').summernote('createRange'); disable, enable

You can disable editor by API.

$('#summernote').summernote('disable');

If you want to enable editor again, call API with enable.

$('#summernote').summernote('enable'); Disable Spellchecking

You can disable Spellchecking in the Editing area with the spellCheck option.

$('#summernote').summernote({

spellCheck: true

});

Disable Grammarly Browser Addon

You can disable the Grammarly Browser Addon (currently researching other Grammar Addons for their disabling options) by using the disableGrammar option.

$('#summernote').summernote({

disableGrammar: false

});

focus

Sets focus in current summernote

$('#summernote').summernote('focus'); fullscreen

You can toggle Fullscreen view by API.

$('#summernote').summernote('fullscreen.toggle'); interface

You can find programmatically which Summernote you are using. This will return one of three values: bs3, bs4 or lite.

$.summernote.interface; isEmpty

Returns whether editor content is empty or not.

The editing area needs <p><br></p> for focus, even if the editor content is empty. So Summernote supports this method for helping to check if editor content is empty.

if ($('#summernote').summernote('isEmpty')) {

alert('editor content is empty');

}

reset

Clear the editor content and remove all stored history.

$('#summernote').summernote('reset'); saveRange, restoreRange

saveRange saves current user selection internally.

$('#summernote').summernote('saveRange');

restoreRange restores currently saved range

$('#summernote').summernote('saveRange');

// move cursor and select another

$('#summernote').summernote('restoreRange');

undo, redo

Undoes and Redoes the last command

$('#summernote').summernote('undo');

$('#summernote').summernote('redo');

Font style API

backColor, foreColor

Set the Background or Foreground color.

// @param {String} color

$('#summernote').summernote('backColor', 'red');

// @param {String} color

$('#summernote').summernote('foreColor', 'blue');

bold, italic, underline, strikethrough

Set font style.

$('#summernote').summernote('bold');

$('#summernote').summernote('italic');

$('#summernote').summernote('underline');

$('#summernote').summernote('strikethrough');

fontName

Set font family.

// @param {String} fontName

$('#summernote').summernote('fontName', 'Arial');

fontSize

Set font size.

// @param {Number} font size - unit is px

$('#summernote').summernote('fontSize', 20);

removeFormat

Clean a style.

$('#summernote').summernote('removeFormat'); superscript, subscript

Set superscript or subscript.

$('#summernote').summernote('superscript');

$('#summernote').summernote('subscript');

Paragraph API

formatH1-H6

Change current paragraph as a <h1> ~ <h6>.

$('#summernote').summernote('formatH2');

$('#summernote').summernote('formatH6');

formatPara

Change current paragraph as a <p>.

$('#summernote').summernote('formatPara'); indent and outdent

Indent or Outdent on current paragraph.

$('#summernote').summernote('indent');

$('#summernote').summernote('outdent');

insertOrderedList

Toggle ordered list or unordered list

$('#summernote').summernote('insertOrderedList');

$('#summernote').summernote('insertUnorderedList'); insertParagraph

Insert a paragraph

$('#summernote').summernote('insertParagraph'); justify left, right and more

Set the alignment of a Paragraph.

$('#summernote').summernote('justifyLeft');

$('#summernote').summernote('justifyRight');

$('#summernote').summernote('justifyCenter');

$('#summernote').summernote('justifyFull');

lineHeight

Set line height.

// @param {Number} line height - unit is px

$('#summernote').summernote('lineHeight', 20);

Insertion API

createLink, unlink

Create link and unlink.

// @param {String} text - link text

// @param {String} url - link url

// @param {Boolean} isNewWindow - whether link's target is new window or not

$('#summernote').summernote('createLink', {

text: "This is the Summernote's Official Site",

url: 'http://summernote.org',

isNewWindow: true

});

$('#summernote').summernote('unlink');

网址：Summernote个性化定制使用帮助(一) https://www.yuejiaxmz.com/news/view/1223374

相关内容

虚拟助手的个性化定制：为每个用户量身定制
帮助用户制定个性化健身计划的软件有哪些
健康与健身：AR如何帮助用户制定个性化运动计划-瑞丰宝丽
定制订制:让每个用户都得到个性化定制的服务
AI写作助手：海量模板，一键定制个性化文档
个性化家电定制与用户交互
插件网站APP，助力用户个性化定制，提升应用体验
小暖助手定制app：个性化生活助手，随时随地温暖你的每一天！
3D个性化定制
个性化定制服务在国内服务业悄然出现，可以暂时帮助

随便看看