Microsoft Digital Image Starter Edition 2006 11.1 Serial number generator


Options

charCounterCount

Enables or disables the display of the character counter.

CODE EXAMPLE

$('.selector').froalaEditor({ charCounterCount: false });

charCounterMax

The maximum number of characters allowed to be inserted into the rich text editor. -1 means that there is not limit set.

CODE EXAMPLE

$('.selector').froalaEditor({ charCounterMax: 140 });

codeBeautifierOptions

Specify the options for Code Beautifier.

CODE EXAMPLE

$('.selector').froalaEditor({ codeBeautifierOptions: { end_with_newline: true, indent_inner_html: true, extra_liners: "['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'ul', 'ol', 'table', 'dl']", brace_style: 'expand', indent_char: ' ', indent_size: 4, wrap_line_length: 0 } });

codeMirror

Enables using the CodeMirror library to highlight the HTML view.
Note: This option requires the CodeMirror library to be included.

CODE EXAMPLE

$('.selector').froalaEditor({ codeMirror: false });

codeMirrorOptions

Specify the options for CodeMirror.

CODE EXAMPLE

$('.selector').froalaEditor({ codeMirrorOptions: { tabSize: 4 } });

colorsBackground

An array of colors used in the colors popup for background. Passing REMOVE as a value in the array will display the Clear Formatting button for colors.

CODE EXAMPLE

$('.selector').froalaEditor({ colorsBackground: ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE'] });

colorsDefaultTab

Set the default color tab from the colors popup.

CODE EXAMPLE

$('.selector').froalaEditor({ colorsDefaultTab: 'background' });

The number of colors displayed on a line in the colors popup.

CODE EXAMPLE

$('.selector').froalaEditor({ colorsStep: 14 });

colorsText

An array of colors used in the colors popup for text. Passing REMOVE as a value in the array will display the Clear Formatting button for colors.

CODE EXAMPLE

$('.selector').froalaEditor({ colorsText: ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE'] });

direction

Sets the direction of the text. Possible values are: 'auto', 'ltr' and 'rtl'. When the option is set to auto the editor automatically detects if the keyboard input is RTL or LTR. However only the text inside the editing box changes direction, the toolbar remains the same. The rtl and ltr values also change the toolbar's direction.

CODE EXAMPLE

$('.selector').froalaEditor({ direction: 'rtl' });

disableRightClick

Disables the default browser context menu. It's recommended to be used if toolbarVisibleWithoutSelection option is enabled.

CODE EXAMPLE

$('.selector').froalaEditor({ disableRightClick: true });

dragInline

Specifies how the dragged elements should be placed in the new position. When this option is disabled, the dragged elements are placed between block tags and not inside them.

CODE EXAMPLE

$('.selector').froalaEditor({ dragInline: false });

Edit the text inside the HTML element on which the editor is initialized on in a popup.

CODE EXAMPLE

$('.selector').froalaEditor({ editInPopup: true });

editorClass

Set a custom class for the WYSIWYG editor editing box.

CODE EXAMPLE

$('.selector').froalaEditor({ editorClass: 'custom-class' });

emoticonsSet

An array of emoticons available in the insert emoticon popup. Each emoticon is defined by an Object containing the code and description of each emoticon.

CODE EXAMPLE

$('.selector').froalaEditor({ emoticonsSet: [ {code: '1f630', desc: 'Face with open mouth and cold sweat'}, {code: '1f631', desc: 'Face screaming in fear'}, {code: '1f632', desc: 'Astonished face'}, {code: '1f633', desc: 'Flushed face'}, {code: '1f634', desc: 'Sleeping face'}, {code: '1f635', desc: 'Dizzy face'}, {code: '1f636', desc: 'Face without mouth'}, {code: '1f637', desc: 'Face with medical mask'} ] });

emoticonsUseImage

Use EmojiOne svg images instead of Unicode text.

CODE EXAMPLE

$('.selector').froalaEditor({ emoticonsUseImage: false });

emoticonsStep

The number of emoticons displayed on a line in the insert emoticon popup.

CODE EXAMPLE

$('.selector').froalaEditor({ emoticonsStep: 10 });

enter

Set the default tag to be used when ENTER key is hit. Possible values are $.FroalaEditor.ENTER_P, $.FroalaEditor.ENTER_DIV or $.FroalaEditor.ENTER_BR.

CODE EXAMPLE

$('.selector').froalaEditor({ enter: $.FroalaEditor.ENTER_BR });

entities

A list with the characters that are reserved in HTML. More details about using entities in HTML can be found on W3C and Wikipedia.

CODE EXAMPLE

$('.selector').froalaEditor({ entities: '&<>"'¡¢£¤¥' });

fileAllowedTypes

The list of file types that are allowed to be uploaded. Although this will restrict uploading other types of files, we strongly recommend you to check the file type on the server too.

CODE EXAMPLE

$('.selector').froalaEditor({ fileAllowedTypes: ['application/pdf', 'application/msword'] });

fileInsertButtons

The list of buttons that appear in the insert file popup, when inserting a new file into the WYSIWYG editor.

CODE EXAMPLE

$('.selector').froalaEditor({ fileInsertButtons: [] });

fileMaxSize

The maximum file size allowed on upload in bytes. The default value is 10MB. Although this makes an additional check before uploading the file, it is highly recommended to check file size on your server too.

CODE EXAMPLE

$('.selector').froalaEditor({ fileMaxSize: 1024 1024 3 });

fileUploadMethod

The HTTP file upload request type.

CODE EXAMPLE

$('.selector').froalaEditor({ fileUploadMethod: 'PUT' });

fileUploadParam

Customize the name of the parameter that contains the file in the upload request.

CODE EXAMPLE

$('.selector').froalaEditor({ fileUploadParam: 'file_name' });

fileUploadParams

Pass additional parameters to the file upload request.

CODE EXAMPLE

$('.selector').froalaEditor({ fileUploadParams: { id: 'my_editor' } });

fileUploadToS3

Set the options for file upload to S3.
Please notice that all the fields from the example below are required. Also make sure that you have enabled CORS on Amazon.

CODE EXAMPLE

$('.selector').froalaEditor({ fileUploadToS3: { bucket: 'editor', region: 's3', keyStart: 'uploads/', callback: function (url, key) { // The URL and Key returned from Amazon. console.log (url); console.log (key); }, params: { acl: 'public-read', // ACL according to Amazon Documentation. AWSAccessKeyId: 'ACCESS_KEY', // Access Key from Amazon. policy: 'POLICY_STRING', // Policy string computed in the backend. signature: '', // Signature computed in the backend. } } });

fileUploadURL

The URL where the files uploaded by the user are saved. When a file is uploaded, the editor sends the file to the server through a HTTP request. The server should process the data from the file parameter of the request and return a JSON object containing a link field with the link to the uploaded file. More details can be found in the File Upload concept article.
E.g. {link: 'path/to/file.pdf'}.

Note 1: By default, the files are stored on our servers, but if you want to have full control over them, you should consider implementing the upload on your server. The files stored on our servers, may be deleted at any time without any notice.
Note 2: If the domain where the file is saved is not the same with the one where the editor is running, you may need to enable requestWithCORS option and make specific customizations on the server. For more information please refer to Cross-origin resource sharing.

CODE EXAMPLE

$('.selector').froalaEditor({ fileUploadURL: '/upload_file' });

fileUseSelectedText

Enables using the file's name instead of the selected text when a file is inserted.

CODE EXAMPLE

$('.selector').froalaEditor({ fileUseSelectedText: true });

fontFamily

Defines the fonts that appear under the Font Family button from the rich text editor's toolbar.

CODE EXAMPLE

$('.selector').froalaEditor({ fontFamily: { 'Arial,Helvetica,sans-serif': 'Font 1', 'Impact,Charcoal,sans-serif': 'Font 2', 'Tahoma,Geneva,sans-serif', 'Font 3' } });

fontFamilyDefaultSelection

The text to display when the font family is unkown or nothing is selected.

CODE EXAMPLE

$('.selector').froalaEditor({ fontFamilyDefaultSelection: 'Font' });

fontFamilySelection

The Font Family button from the WYSIWYG editor's toolbar is replaced with a dropdown showing the actual font family name for the current text selection.

CODE EXAMPLE

$('.selector').froalaEditor({ fontFamilySelection: true });

fontSize

Defines the font sizes that appear under the Font Size button from the rich text editor's toolbar.

CODE EXAMPLE

$('.selector').froalaEditor({ fontSize: ['8', '10', '12', '14', '18', '30', '60', '96'] });

fontSizeDefaultSelection

The text to display when the font size is unkown or nothing is selected.

CODE EXAMPLE

$('.selector').froalaEditor({ fontSizeDefaultSelection: '14' });

fontSizeSelection

The Font Size button from the WYSIWYG editor's toolbar is replaced with a dropdown showing the actual font size value for the current text selection.

CODE EXAMPLE

$('.selector').froalaEditor({ fontSizeSelection: true });

fullPage

Allows the usage of HTML, HEAD, BODY tags and DOCTYPE declaration.
Note: Enabling this option will automatically enables the iframe option.

CODE EXAMPLE

$('.selector').froalaEditor({ fullPage: true });

height

Set a height for the rich text editor's editing box.

CODE EXAMPLE

$('.selector').froalaEditor({ height: 300 });

heightMax

Set a maximum height for the rich text editor's editing box.

CODE EXAMPLE

$('.selector').froalaEditor({ heightMax: 500 });

heightMin

Set a minimum height for the rich text editor's editing box.

CODE EXAMPLE

$('.selector').froalaEditor({ heightMin: 200 });

Allow comments inside the edited HTML.

CODE EXAMPLE

$('.selector').froalaEditor({ htmlAllowComments: false });

htmlAllowedAttrs

The list of allowed attributes to be used for tags.

CODE EXAMPLE

$('.selector').froalaEditor({ htmlAllowedAttrs: ['title', 'href', 'alt', 'src', 'style'] });

The list of tags that are not removed when they have no content inside.

CODE EXAMPLE

$('.selector').froalaEditor({ htmlAllowedEmptyTags: ['table', 'strong'] });

The list of allowed tags.

CODE EXAMPLE

$('.selector').froalaEditor({ htmlAllowedTags: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] });

The list of tags that should not be wrapped inside block tags.

CODE EXAMPLE

$('.selector').froalaEditor({ htmlDoNotWrapTags: ['script', 'style', 'img'] });

The list of tags that are removed together with their content.

CODE EXAMPLE

$('.selector').froalaEditor({ htmlRemoveTags: ['script', 'style', 'base'] });

htmlSimpleAmpersand

Allows the usage of simple ampersands (&) instead of the relative HTML entity (&). This is not recommended by the W3C XHTML specifications, so this option should remain false whenever possible.

CODE EXAMPLE

$('.selector').froalaEditor({ htmlSimpleAmpersand: true });

iframe

When this option is enabled, the editor's content will be placed in an iframe and isolated from the rest of the page.

CODE EXAMPLE

$('.selector').froalaEditor({ iframe: true });

iframeStyle

Custom style to be used inside the iframe to display content.

CODE EXAMPLE

$('.selector').froalaEditor({ iframeStyle: 'body{position:relative;z-index:2;}pre{white-space:pre-wrap;word-wrap:break-word;}' });

iframeStyleFiles

An array with custom CSS files to inject inside the iframe to display content.

CODE EXAMPLE

$('.selector').froalaEditor({ iframeStyleFiles: ['/path/to/my_cssFile.css', '/path/to/other_cssFile.css'] });

imageAllowedTypes

The list of image types that are allowed to be uploaded. Although this will restrict uploading other types of files, we strongly recommend you to check the file type on the server too.

CODE EXAMPLE

$('.selector').froalaEditor({ imageAllowedTypes: ['jpeg', 'jpg', 'png'] });

imageAltButtons

The list of buttons that appear in the edit image alternate text popup, when changing the alternate text of the image.

CODE EXAMPLE

$('.selector').froalaEditor({ imageAltButtons: ['imageBack'] });

imageDefaultAlign

Sets the default image alignment when it is inserted in the rich text editor. Possible values are 'left', 'center' and 'right'.

CODE EXAMPLE

$('.selector').froalaEditor({ imageDefaultAlign: 'left' });

imageDefaultDisplay

Sets the default display for an image when is is inserted in the rich text. Possible options are: 'inline' and 'block'.

CODE EXAMPLE

$('.selector').froalaEditor({ imageDefaultDisplay: 'inline' });

imageDefaultWidth

Sets the default width of the image when it is inserted in the rich text editor. Setting it to 0 will not set any width.

CODE EXAMPLE

$('.selector').froalaEditor({ imageDefaultWidth: 200 });

imageEditButtons

The list of buttons that appear in the edit image popup, when an image is selected.

CODE EXAMPLE

$('.selector').froalaEditor({ imageEditButtons: ['imageReplace', 'imageAlign', 'imageRemove'] });

imageInsertButtons

The list of buttons that appear in the insert image popup, when inserting a new image into the WYSIWYG editor.

CODE EXAMPLE

$('.selector').froalaEditor({ imageInsertButtons: ['imageBack', '|', 'imageManager'] });

imageManagerDeleteMethod

The HTTP image manager delete image request type.

CODE EXAMPLE

$('.selector').froalaEditor({ imageManagerDeleteMethod: 'DELETE' });

imageManagerDeleteParams

Additional parameters passed to the image manager image delete request.

CODE EXAMPLE

$('.selector').froalaEditor({ imageManagerDeleteParams: {user_id: 4219762} });

imageManagerDeleteURL

The URL where the HTTP request is done to delete the image. The request will contain the image source as src parameter.

CODE EXAMPLE

$('.selector').froalaEditor({ imageManagerDeleteURL: 'http://example.com/delete_image' });

imageManagerLoadMethod

The HTTP image manager load images request type.

CODE EXAMPLE

$('.selector').froalaEditor({ imageManagerLoadMethod: 'POST' });

imageManagerLoadParams

Additional parameters passed to the load images request from the image manager.

CODE EXAMPLE

$('.selector').froalaEditor({ imageManagerLoadParams: {user_id: 4219762} });

imageManagerLoadURL

The URL where the HTTP request is done in order to load a page of images that appear in the image manager. The response should be an array with an Object for each image, similar to:

[ { url: 'http://exmaple.com/images/photo1.jpg', thumb: "http://exmaple.com/thumbs/photo1.jpg", tag: 'flower' }, { url: 'http://exmaple.com/images/photo2.jpg', thumb: "http://exmaple.com/thumbs/photo2.jpg", tag: 'sport' } ]
Where url is required, thumb is recommended and tag is optional. The image Object may also contain additional data that will be saved as image attributes data-. E.g.: [ { url: 'http://exmaple.com/images/photo1.jpg', thumb: "http://exmaple.com/thumbs/photo1.jpg", tag: 'flower' name: "Photo 1 Name", id: 103454285, } ] <img src='http://exmaple.com/images/photo1.jpg' data-name='Photo 1 Name' data-id='103454285'>

CODE EXAMPLE

$('.selector').froalaEditor({ imageManagerLoadURL: 'http://example.com/load_images' });

imageManagerPageSize

The number of images loaded per page in the image manager.

CODE EXAMPLE

$('.selector').froalaEditor({ imageManagerPageSize: 10 });

imageManagerPreloader

The path to a gif image to be displayed while loading the images from the server in the image manager. If no option is specified, "Loading.." text will appear.

CODE EXAMPLE

$('.selector').froalaEditor({ imageManagerPreloader: '/images/loader.gif' });

imageManagerScrollOffset

The distance in pixels from the bottom of the scrollable content at which to trigger the loading of the next page of images.

CODE EXAMPLE

$('.selector').froalaEditor({ imageManagerScrollOffset: 10 });

imageMaxSize

The maximum image size allowed on upload in bytes. The default value is 10MB. Although this makes an additional check before uploading the image, it is highly recommended to check image size on your server too.

CODE EXAMPLE

$('.selector').froalaEditor({ imageMaxSize: 1024 1024 3 });

imageMinWidth

The minimum width in PX the image can be resized to.

CODE EXAMPLE

$('.selector').froalaEditor({ imageMinWidth: 32 });

imageMove

Allows changing the position of the images by dragging them. This option will work correctly only when including the draggable plugin.

CODE EXAMPLE

$('.selector').froalaEditor({ imageMove: false });

imageMultipleStyles

Allows multiple image styles to be selected at a time.

CODE EXAMPLE

$('.selector').froalaEditor({ imageMultipleStyles: false });

imagePaste

Allows pasting images from clipboard.

CODE EXAMPLE

$('.selector').froalaEditor({ imagePaste: false });

imagePasteProcess

Use default image settings for pasted images.

CODE EXAMPLE

$('.selector').froalaEditor({ imagePasteProcess: true });

imageResize

Disables image resize when set to false.

CODE EXAMPLE

$('.selector').froalaEditor({ imageResize: false });

imageResizeWithPercent

By default the image resize is using PX. Enabling this option will use % instead when resizing an image inside the editor.

CODE EXAMPLE

$('.selector').froalaEditor({ imageResizeWithPercent: true });

imageRoundPercent

Force image percent to round to integer while resizing.

CODE EXAMPLE

$('.selector').froalaEditor({ imageRoundPercent: true });

imageOutputSize

When this option is enabled, the images will get the width and height set as attribute in the output.

CODE EXAMPLE

$('.selector').froalaEditor({ imageOutputSize: true });

imageSizeButtons

The list of buttons that appear in the edit image size popup, when editing the image's width and height.

CODE EXAMPLE

$('.selector').froalaEditor({ imageSizeButtons: ['imageBack'] });

imageSplitHTML

Enables splitting the HTML when inserting a new image.

CODE EXAMPLE

$('.selector').froalaEditor({ imageSplitHTML: true });

imageStyles

Set custom styles for the selected image. The classes should be defined in CSS, otherwise no changes will be visible on the image's appearance.

CODE EXAMPLE

$('.selector').froalaEditor({ imageStyles: { class1: 'Class 1', class2: 'Class 2', class3: 'Class 3' } });

imageTextNear

Allows text near an image when it is aligned to the left or to the right. Disabling this option will make the display button for image editor popup unavailable.

CODE EXAMPLE

$('.selector').froalaEditor({ imageTextNear: false });

imageUploadMethod

The HTTP image upload request type.

CODE EXAMPLE

$('.selector').froalaEditor({ imageUploadMethod: 'PUT' });

imageUploadParam

Customize the name of the parameter that contains the image file in the upload request.

CODE EXAMPLE

$('.selector').froalaEditor({ imageUploadParam: 'file_name' });

imageUploadParams

Pass additional parameters to the upload request.

CODE EXAMPLE

$('.selector').froalaEditor({ imageUploadParams: { id: 'my_editor' } });

imageUploadToS3

Set the options for image upload to S3. All the fields from the example below are required. Also make sure that you have enabled CORS on Amazon.

CODE EXAMPLE

$('.selector').froalaEditor({ imageUploadToS3: { bucket: 'editor', // Your bucket region. region: 's3-us-east-1', keyStart: 'uploads/', callback: function (url, key) { // The URL and Key returned from Amazon. console.log (url); console.log (key); }, params: { acl: 'public-read', // ACL according to Amazon Documentation. AWSAccessKeyId: 'ACCESS_KEY', // Access Key from Amazon. policy: 'POLICY_STRING', // Policy string computed in the backend. signature: '', // Signature computed in the backend. } } });

imageUploadURL

The URL where the images uploaded by the user are saved. When an image is uploaded, the editor sends the file to the server through a HTTP request. The server should process the data from the file parameter of the request and return a JSON object containing a link field with the link to the uploaded image. More details can be found in the Image Upload concept article.
E.g. {link: 'path/to/image.jpg'}.

Note 1: By default, the images are stored on our servers, but if you want to have full control over them, you should consider implementing the upload on your server. The images stored on our servers, may be deleted at any time without any notice.
Note 2: If the domain where the image is saved is not the same with the one where the editor is running, you may need to enable requestWithCORS option and make specific customizations on the server. For more information please refer to Cross-origin resource sharing.

CODE EXAMPLE

$('.selector').froalaEditor({ imageUploadURL: '/upload_image' });

initOnClick

Only the minimum required events are initialized on page load and the rest of them when the user clicks inside the editable area. This is very useful when using multiple editors on the same page because it reduces the page load time.

CODE EXAMPLE

$('.selector').froalaEditor({ initOnClick: true });

inlineStyles

Set custom styles for the selected text. This option is an Object where the key is the name of the new style that appears in the dropdown and the value specifies the CSS properties for it.

CODE EXAMPLE

$('.selector').froalaEditor({ inlineStyles: { 'Big Red': 'font-size: 20px; color: red;', 'Small Blue': 'font-size: 14px; color: blue;' } });

keepFormatOnDelete

If format is set at the beginning of the deleted text it will be kept.

CODE EXAMPLE

$('.selector').froalaEditor({ keepFormatOnDelete: true });

language

Select the language to be used in the rich text editor's interface. The corresponding language file is required: /languages/es.js.

CODE EXAMPLE

$('.selector').froalaEditor({ language: 'es' });

lineBreakerOffset

The distance in pixels from the top or bottom of an element at which to show the line-breaker.

CODE EXAMPLE

$('.selector').froalaEditor({ lineBreakerOffset: 20 });

The list of HTML tags between which the line-breaker should appear.

CODE EXAMPLE

$('.selector').froalaEditor({ lineBreakerTags: ['table', 'hr', 'form'] });

linkAlwaysBlank

Specifies the default state of the "Open in new tab" checkbox from the link popup.

CODE EXAMPLE

$('.selector').froalaEditor({ linkAlwaysBlank: true });

linkAlwaysNoFollow

Specifies if the rel="nofollow" attribute should be added on all links.

CODE EXAMPLE

$('.selector').froalaEditor({ linkAlwaysNoFollow: false });

linkAttributes

An object with additional attributes that could be customized for a link.

CODE EXAMPLE

$('.selector').froalaEditor({ linkAttributes: { title: 'Title' } });

linkAutoPrefix

Sets the default URL prefix.

CODE EXAMPLE

$('.selector').froalaEditor({ linkAutoPrefix: 'https://' });

linkConvertEmailAddress

Email addresses inserted as link are converted to mailto: links.

CODE EXAMPLE

$('.selector').froalaEditor({ linkConvertEmailAddress: false });

linkEditButtons

The list of buttons that appear in the edit link popup, when clicking on an existing link from the editor.

CODE EXAMPLE

$('.selector').froalaEditor({ linkEditButtons: ['linkEdit', 'linkRemove'] });

linkInsertButtons

The list of buttons that appear in the insert link popup, when inserting a new link into the WYSIWYG editor.

CODE EXAMPLE

$('.selector').froalaEditor({ linkInsertButtons: ['linkBack'] });

linkList

Set a predefined list of links to select from when inserting or editing a link.

CODE EXAMPLE

$('.selector').froalaEditor({ linkList: [ { text: 'Google', href: 'http://google.com', target: '_blank', rel: 'nofollow' }, { displayText: 'Froala', href: 'https://froala.com', target: '_blank' } ] });

linkMultipleStyles

Allows multiple link styles to be selected at a time.

CODE EXAMPLE

$('.selector').froalaEditor({ linkMultipleStyles: false });

Set custom styles for the selected link. The classes should be defined in CSS, otherwise no changes will be visible on the link's appearance.

CODE EXAMPLE

$('.selector').froalaEditor({ linkStyles: { class1: 'Class 1', class2: 'Class 2', class3: 'Class 3' } });

linkText

This option allows to edit the link text inside the edit link popup.

CODE EXAMPLE

$('.selector').froalaEditor({ linkText: true });

multiLine

Allows new line to be inserted when ENTER key is hit.

CODE EXAMPLE

$('.selector').froalaEditor({ multiLine: false });

paragraphFormat

An Object with the options that will appear in the Paragraph Format dropdown from the toolbar. Where 'N' tag will be treated as a <p> when the enter option is set to $.FroalaEditor.ENTER_P and as a <div> when the enter option is set to $.FroalaEditor.ENTER_DIV.

CODE EXAMPLE

$('.selector').froalaEditor({ paragraphFormat: { N: 'Normal', H1: 'Heading 1', H2: 'Heading 2' } });

paragraphFormatSelection

The Paragraph Format button from the WYSIWYG editor's toolbar is replaced with a dropdown showing the actual paragraph format name for the current text selection.

CODE EXAMPLE

$('.selector').froalaEditor({ paragraphFormatSelection: true });

paragraphMultipleStyles

Allows multiple paragraph styles to be selected at a time.

CODE EXAMPLE

$('.selector').froalaEditor({ paragraphMultipleStyles: false });

paragraphStyles

Set custom styles for the selected paragraph. The classes should be defined in CSS, otherwise no changes will be visible on the paragraph's appearance.

CODE EXAMPLE

$('.selector').froalaEditor({ paragraphStyles: { class1: 'Class 1', class2: 'Class 2', class3: 'Class 3' } });

pasteAllowLocalImages

Removes images that have local path (file://) on paste. Enabling this option might result in having mixed content on HTTPS websites.

CODE EXAMPLE

$('.selector').froalaEditor({ pasteAllowLocalImages: true });

pasteDeniedAttrs

Attributes that are removed when pasting something into the rich text editor.

CODE EXAMPLE

$('.selector').froalaEditor({ pasteDeniedAttrs: ['class', 'id'] });

Tags that are removed together with their content when pasting something into the rich text editor.

CODE EXAMPLE

$('.selector').froalaEditor({ pasteDeniedTags: ['a', 'i'] });

pastePlain

Removes text formatting when pasting content into the rich text editor.

CODE EXAMPLE

$('.selector').froalaEditor({ pastePlain: true });

placeholderText

The placeholder used when the WYSIWYG editor body is empty.

CODE EXAMPLE

$('.selector').froalaEditor({ placeholderText: 'Placeholder' });

pluginsEnabled

The plugins that should be enabled in the current editor instance. By default, all plugins are enabled.

CODE EXAMPLE

$('.selector').froalaEditor({ pluginsEnabled: ['image', 'link'] });

quickInsertButtons

The buttons to display in quick insert.

CODE EXAMPLE

$('.selector').froalaEditor({ quickInsertButtons: ['image', 'table'] });

The list of tags for which the quick insert button will appear when empty.

CODE EXAMPLE

$('.selector').froalaEditor({ quickInsertTags: 8 });

An Object with additional header key/value pairs to send along with requests using the XMLHttpRequest transport.

CODE EXAMPLE

$('.selector').froalaEditor({ requestHeaders: { custom_header: 'My custom header data.' } });

requestWithCORS

Make AJAX requests using CORS. For more information refer to Cross-origin resource sharing.

CODE EXAMPLE

$('.selector').froalaEditor({ requestWithCORS: false });

saveInterval

Time in milliseconds that defines when the autosave should be triggered. Setting a higher interval helps preventing request overload on the server. The autosave will be triggered only if the content was changed from the last interval. Setting the value to 0 will disable autosave.
Note: It is not recommended to use values lower than 2000ms in order to prevent overload.

CODE EXAMPLE

$('.selector').froalaEditor({ saveInterval: 2500 });

saveMethod

The HTTP save request type.

CODE EXAMPLE

$('.selector').froalaEditor({ saveMethod: 'PUT' });

saveParam

The name of the parameter which contains the rich text editor's content on the save request.

CODE EXAMPLE

$('.selector').froalaEditor({ saveParam: 'content' });

saveParams

Additional parameters passed to the save request.

CODE EXAMPLE

$('.selector').froalaEditor({ saveParams: { id: 'my_editor' } });

saveURL

The URL where the save request is being made. The editor will initialize a HTTP request to the specified URL passing the editor's content in the body parameter of the HTTP request.

CODE EXAMPLE

$('.selector').froalaEditor({ saveURL: 'http://example.com/save' });

scrollableContainer

Sets the container in which the editor popups are added.

CODE EXAMPLE

$('.selector').froalaEditor({ scrollableContainer: '#my_scrollable_container' });

shortcutsEnabled

Granular control for enabling or disabling specific shortcuts.

CODE EXAMPLE

$('.selector').froalaEditor({ shortcutsEnabled: ['bold', 'italic'] });

shortcutsHint

When enabled, the shortcut is displayed in the button tooltip.

CODE EXAMPLE

$('.selector').froalaEditor({ shortcutsHint: false });

spellcheck

Enables browser spellcheck for the text inside the editing box.

CODE EXAMPLE

$('.selector').froalaEditor({ spellcheck: false });

tabSpaces

When TAB key is hit, the editor will add the specified number of space. If set to 0 the TAB key allows default navigation through the page.

CODE EXAMPLE

$('.selector').froalaEditor({ tabSpaces: 4 });

tableCellMultipleStyles

Allows multiple table cell styles to be selected at a time.

CODE EXAMPLE

$('.selector').froalaEditor({ tableCellMultipleStyles: false });

tableCellStyles

Set custom styles for the selected table cells. The classes should be defined in CSS, otherwise no changes will be visible.

CODE EXAMPLE

$('.selector').froalaEditor({ tableCellStyles: { class1: 'Class 1', class2: 'Class 2', class3: 'Class 3' } });

tableColors

The list of colors used in the edit table colors popup for the background of a table cell. Passing REMOVE as a value in the array will display the Clear Formatting button for the cell background color.

CODE EXAMPLE

$('.selector').froalaEditor({ tableColors: ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE'] });

tableColorsButtons

The list of buttons that appear in the edit table colors popup.

CODE EXAMPLE

$('.selector').froalaEditor({ tableColorsButtons: ['tableBack'] });

The number of colors displayed on a line in the edit table colors popup.

CODE EXAMPLE

$('.selector').froalaEditor({ tableColorsStep: 5 });

tableEditButtons

The list of buttons that appear in the edit table popup, when one or many cells are selected.

CODE EXAMPLE

$('.selector').froalaEditor({ tableEditButtons: ['tableRows', 'tableColumns', 'tableCells', 'tableCellVerticalAlign', 'tableRemove'] });

tableInsertButtons

The list of buttons that appear in the insert table popup, when the toolbarInline option is set to true.

CODE EXAMPLE

$('.selector').froalaEditor({ tableInsertButtons: ['tableBack'] });

tableInsertHelper

Insert rows and columns easier by going to the edge of the table.

CODE EXAMPLE

$('.selector').froalaEditor({ tableInsertHelper: false });

tableInsertHelperOffset

The offset for showing the table insert helper.

CODE EXAMPLE

$('.selector').froalaEditor({ tableInsertHelperOffset: 25 });

tableInsertMaxSize

The maximum number of lines and columns when inserting a table into the rich text editor.

CODE EXAMPLE

$('.selector').froalaEditor({ tableInsertMaxSize: 8 });

tableMultipleStyles

Allows multiple table styles to be selected at a time.

CODE EXAMPLE

$('.selector').froalaEditor({ tableMultipleStyles: false });

tableResizer

Enables resizing table cells.

CODE EXAMPLE

$('.selector').froalaEditor({ tableResizer: false });

tableResizerOffset

The distance in pixels from the table cell's left or right border at which to show the resizer.

CODE EXAMPLE

$('.selector').froalaEditor({ tableResizerOffset: 10 });

tableResizingLimit

The minimum width in pixels of a table cell allowed while resizing. The resizer cannot be dragged over this limit.

CODE EXAMPLE

$('.selector').froalaEditor({ tableResizingLimit: 20 });

tableStyles

Set custom styles for the selected table. The classes should be defined in CSS, otherwise no changes will be visible on the table's appearance.

CODE EXAMPLE

$('.selector').froalaEditor({ tableStyles: { class1: 'Class 1', class2: 'Class 2', class3: 'Class 3' } });

theme

Specify the theme name to use in the editor. The theme should be included as CSS. For more details please read the color themes example.

CODE EXAMPLE

$('.selector').froalaEditor({ theme: dark });

Enable or disable positioning the toolbar at the bottom of the editor.

CODE EXAMPLE

$('.selector').froalaEditor({ toolbarBottom: true });

The list of buttons that appear in the rich text editor's toolbar on large devices (≥ 1200px).

Note: | will insert a vertical separator line in the toolbar, and - a horizontal one.

Some of the buttons above require a specific plugin (read more):
• align button requires align.min.js plugin;
• color button requires colors.min.js plugin;
• emoticons button requires emoticons.min.js plugin;
• fontFamily button requires font_family.min.js plugin;
• fontSize button requires font_size.min.js plugin;
• formatOL and formatUL buttons require lists.min.js plugin;
• fullscreen button requires fullscreen.min.js plugin;
• html button requires code_view.min.js plugin;
• inlineStyle button requires inline_style.min.js plugin;
• insertFile button requires file.min.js plugin;
• insertImage button requires image.min.js plugin;
• insertLink button requires link.min.js plugin;
• insertTable button requires table.min.js plugin;
• insertVideo button requires video.min.js plugin;
• paragraphFormat button requires paragraph_format.min.js plugin;
• paragraphStyle button requires paragraph_style.min.js plugin;
• quote button requires quote.min.js plugin;

CODE EXAMPLE

$('.selector').froalaEditor({ toolbarButtons: ['bold', 'italic', 'underline'] });

The list of buttons that appear in the rich text editor's toolbar on medium devices (≥ 992px).

Note: Some of the buttons above require a specific plugin. See toolbarButtons option for more details.

CODE EXAMPLE

$('.selector').froalaEditor({ toolbarButtonsMD: ['bold', 'italic', 'underline'] });

The list of buttons that appear in the rich text editor's toolbar on small devices (≥ 768px).

Note: Some of the buttons above require a specific plugin. See toolbarButtons option for more details.

CODE EXAMPLE

$('.selector').froalaEditor({ toolbarButtonsSM: ['bold', 'italic', 'underline'] });

The list of buttons that appear in the rich text editor's toolbar on extra small devices (< 768px).

Note: Some of the buttons above require a specific plugin. See toolbarButtons option for more details.

CODE EXAMPLE

$('.selector').froalaEditor({ toolbarButtonsXS: ['bold', 'italic', 'underline'] });

toolbarContainer

A custom HTML selector placing the toolbar inside.

CODE EXAMPLE

$('.selector').froalaEditor({ toolbarContainer: '#toolbarContainer' });

Enable or disable inline mode.

CODE EXAMPLE

$('.selector').froalaEditor({ toolbarInline: true });

Keeps the toolbar at the top of the editing box in basic mode. Disabling this option, will keep the toolbar at the top of the page when scrolling down.

CODE EXAMPLE

$('.selector').froalaEditor({ toolbarSticky: false });

The offset of the sticky toolbar from top of the page. If toolbarBottom option is used, then this option will define the offset of the toolbar from the bottom of the page.

CODE EXAMPLE

$('.selector').froalaEditor({ toolbarStickyOffset: 50 });

Keeps the editor visible next to the cursor even when there is no selection.
Note: This option is available only when the toolbarInline option is set to true.

CODE EXAMPLE

$('.selector').froalaEditor({ toolbarVisibleWithoutSelection: true });

Time in milliseconds to define how long the typing pause may be without the change to be saved in the undo stack. The minimum value that can be set is 500.

CODE EXAMPLE

$('.selector').froalaEditor({ typingTimer: 750 });

useClasses

When this options is disabled the edited content will have the external CSS properties converted to inline style.
Note: For this option to work correctly, it is necessary to load the CSS files from the same domain the editor is running on.

CODE EXAMPLE

$('.selector').froalaEditor({ useClasses: false });

videoDefaultAlign

Sets the default video alignment when it is inserted into the WYSIWYG editor. Possible values are left, center and right.

CODE EXAMPLE

$('.selector').froalaEditor({ videoDefaultAlign: 'left' });

videoDefaultDisplay

Sets the default display for videos when they are inserted into the WYSIWYG editor. Possible options are: "inline" and "block".

CODE EXAMPLE

$('.selector').froalaEditor({ videoDefaultDisplay: 'inline' });

videoEditButtons

The buttons that appear in the edit video popup, when a video is selected.

CODE EXAMPLE

$('.selector').froalaEditor({ videoEditButtons: ['videoDisplay', 'videoRemove'] });

videoInsertButtons

The buttons that appear in the insert video popup, when a video is inserted into the WYSIWYG editor.

CODE EXAMPLE

$('.selector').froalaEditor({ videoInsertButtons: ['videoBack', '|', 'videoByURL'] });

videoMove

Allows changing the position of the videos by dragging them.

CODE EXAMPLE

$('.selector').froalaEditor({ videoMove: false });

videoResize

Enable or disable resizing the videos inside the editor.

CODE EXAMPLE

$('.selector').froalaEditor({ videoResize: false });

videoSizeButtons

The buttons that appear in the edit video size popup, when changing the size of a selected video.

CODE EXAMPLE

$('.selector').froalaEditor({ videoSizeButtons: ['videoBack'] });

videoSplitHTML

Enables splitting the HTML when inserting a new view.

CODE EXAMPLE

$('.selector').froalaEditor({ videoSplitHTML: true });

videoTextNear

Allows text near a video when it is aligned to the left or to the right. Disabling this option will make the display button for image editor popup unavailable.

CODE EXAMPLE

$('.selector').froalaEditor({ videoTextNear: false });

width

Sets the width of the editing box.

CODE EXAMPLE

$('.selector').froalaEditor({ width: '800' });

zIndex

The zIndex to set on the editor toolbars and popups.

Note: The maximum allowed value for tooltips is 9995.

CODE EXAMPLE

$('.selector').froalaEditor({ zIndex: 2501 });

Classic Shell View topic - How To: Change the Start Button or Customize the Start Menu Options in Windows 7 - TechNet - Microsoft


390