FroalaOption
class FroalaOption
Class FroalaOption
Constants
| EDITOR_MIN_HEIGHT_PX |
|
Properties
| protected string | $name | ||
| protected mixed | $value |
Methods
FroalaOption constructor.
The static string value froala
Remove the Powered By Froala message.
Set to true, if co-editing session should start automatically on init(config). Set to
false to initialize but delay start the co-editing (see the start() client API). Default
setting is true.
Focus the editor instance when the page is loaded.
Enables or disables the display of the character counter.
The maximum number of characters allowed to be inserted into the rich text editor. -1 means that
there is not limit set.
Specify the options for Code Beautifier.
Disable or enable using the CodeMirror library to highlight the HTML view.
Note: This option
requires the CodeMirror library to be included.
Specify the options for CodeMirror.
A list of buttons to keep active while editor is in Code View mode.
Set options for codox plugin.
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.
Set the buttons the colors popup.
Show HEX input to choose custom color.
The number of colors displayed on a line in the colors popup.
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.
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.
Disables the default browser context menu. It's recommended to be used if <a href="#toolbarVisibleWithoutSelection" title="toolbarVisibleWithoutSelection" target="_blank">toolbarVisibleWithoutSelection option is enabled.
A unique identifier for the document. In a content management service, this could for example be the resource identifier for the document.
Turns on the editor best setup for editing documents.
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.
Edit the text inside the HTML element on which the editor is initialized on in a popup.
Set a custom class for the WYSIWYG editor editing box.
The buttons that appear in the edit Embed.ly popup, when an embedded object is selected.
The buttons that appear in the insert Embed.ly popup, when an embeded object is inserted into the WYSIWYG editor.
Your key from Embed.ly to remove the "Powered By Banner".
The default script path for the Embedly JS.
Buttons set for emoticons popup.
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.
The number of emoticons displayed on a line in the insert emoticon popup.
Use EmojiOne svg images instead of Unicode text.
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.
A list with the characters that are reserved in HTML. More details about using entities in HTML can be found on <a href="https://dev.w3.org/html5/html-author/charref" target="_blank" rel="nofollow">W3C and <a href="https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" target="_blank" rel="nofollow">Wikipedia.
The options used for WebSpellChecker.
The list of Font Awesome buttons to show in the popup for inserting icons.
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.
The list of buttons that appear in the insert file popup, when inserting a new file into the WYSIWYG editor.
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.
Enable or disable file upload.
The HTTP file upload request type.
Customize the name of the parameter that contains the file in the upload request.
Pass additional parameters to the file upload request.
Set the options for file upload to S3. All the fields from the example below are required. Also make sure that you
have enabled <a href="http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html" title="CORS" target="_blank"
rel="nofollow">CORS on Amazon.
Note: uploadURL property can be used
instead of bucket and region properties to specify a custom URL from Amazon where to
upload the image.
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 <a
href="#requestWithCORS" title="requestWithCORS" target="_blank">requestWithCORS option and make specific
customizations on the server. For more information please refer to Cross-origin resource sharing.
Enables using the file's name instead of the selected text when a file is inserted.
The list of Font Awesome icons to show in the modal for inserting icons.
Set the template to be used for the Font Awesome icons inserted in the editor.
Defines the fonts that appear under the Font Family button from the rich text editor's toolbar.
The text to display when the font family is unkown or nothing is selected.
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.
Defines the font sizes that appear under the Font Size button from the rich text editor's toolbar.
The text to display when the font size is unkown or nothing is selected.
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.
The unit to be used for the font size.
Buttons for form edit popup.
To enable applying multiple css on form elements.
Options for applying styles on form.
Buttons for form popup.
Allows the usage of HTML, HEAD, BODY tags and DOCTYPE
declaration.
Note: Enabling this option will automatically enables the <a href="#iframe"
title="iframe" target="_blank">iframe option.
No description
No description
Set a height for the rich text editor's editing box.
Set a maximum height for the rich text editor's editing box.
Set a minimum height for the rich text editor's editing box.
An object of items to show in the help modal.
Allow comments inside the edited HTML.
The list of allowed attributes to be used for tags.
The list of tags that are not removed when they have no content inside.
The list of allowed CSS attributes to be used for tags.
The list of allowed tags.
The list of tags that should not be wrapped inside block tags.
Allow running scripts that are entered in Code View.
A list of CSS properties to be ignored when useClasses option is disabled and the CSS from external
stylesheets is converted to inline style.
The list of tags that are removed together with their content.
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.
Leave the HTML inside the editor untouched without doing any special processing to it except HTML cleaning.
Set the template to be used for the icons inside the editor UI.
When this option is enabled, the editor's content will be placed in an iframe and isolated from the rest of the page.
Default style needed by the editor to be used inside the iframe to display content.
Custom style to be used inside the iframe to display content. This style is added over the
iframeDefaultStyle style.
An array with custom CSS files to inject inside the iframe to display content.
Add new line after inserting an image when enabled.
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.
The list of buttons that appear in the edit image alternate text popup, when changing the alternate text of the image.
Proxy server to be used for reading images inserted by URL and upload them to a custom server. By default we provide a proxy hosted on our servers, however for full control, we recommend setting up your own proxy by using the details from CORS Anywhere.
Sets the default image alignment when it is inserted in the rich text editor. Possible values are
'left', 'center' and 'right'.
Sets the default display for an image when is is inserted in the rich text. Possible options are:
'inline' and 'block'.
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.
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.
The list of buttons that appear in the edit image popup, when an image is selected. If Image Aviary
plugin is included, then 'aviary' can be used as an option as well.
The list of buttons that appear in the insert image popup, when inserting a new image into the WYSIWYG editor.
The HTTP image manager delete image request type.
Additional parameters passed to the image manager image delete request.
The URL where the HTTP request is done to delete the image. The request will contain the image source as
src parameter.
The HTTP image manager load images request type.
Additional parameters passed to the load images request from the image manager.
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:
The number of images loaded per page in the image manager.
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.
The distance in pixels from the bottom of the scrollable content at which to trigger the loading of the next page of images.
To enable/disable toggle of filter tags for image manager popup.
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.
The minimum width in PX the image can be resized to.
Allows changing the position of the images by dragging them. This option will work correctly only when including the draggable plugin.
Allows multiple image styles to be selected at a time.
When this option is enabled, the images will get the width and height set as attribute in the output.
Allows pasting images from clipboard.
Use default image settings for pasted images.
Disables image resize when set to false.
By default the image resize is using PX. Enabling this option will use % instead when resizing an image inside the editor.
Force image percent to round to integer while resizing.
The list of buttons that appear in the edit image size popup, when editing the image's width and height.
Enables splitting the HTML when inserting a new image.
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.
Set options for TUI editor plugin.
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.
Enable or disable image upload.
The HTTP image upload request type.
Customize the name of the parameter that contains the image file in the upload request.
Pass additional parameters to the upload request.
Upload images inserted by URL to custom server instead of linking them by URL.
Set the options for image upload to S3. All the fields from the example below are required. Also make sure that
you have enabled <a href="http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html" title="CORS" target="_blank"
rel="nofollow">CORS on Amazon.
Note: uploadURL property can be used
instead of bucket and region properties to specify a custom URL from Amazon where to
upload the image.
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 <a href="../docs/concepts/image-upload" title="Image Upload Concept"
target="_blank">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.
The number of pixels to use for indenting the current line.
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.
Set custom classes for the selected text. This option is an Object where the key is the name of the new class that appears in the dropdown and the value specifies the class name for it.
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.
Keep format of the selected text when it is deleted.
Select the language to be used in the rich text editor's interface. The corresponding language file is required: /langs/es.js.
The distance in pixels from the left or right of an element at which to show the line-breaker.
The distance in pixels from the top or bottom of an element at which to show the line-breaker.
The list of HTML tags between which the line-breaker should appear.
Set the line height for the current selected paragraph.
When enabled, all links open in a new tab and no option to set this action would be presented in the UI.
Specifies if the rel="nofollow" attribute should be added on all links.
An object with additional attributes that could be customized for a link.
Sets the default URL prefix.
Email addresses inserted as link are converted to mailto: links.
The list of buttons that appear in the edit link popup, when clicking on an existing link from the editor.
The list of buttons that appear in the insert link popup, when inserting a new link into the WYSIWYG editor.
Set a predefined list of links to select from when inserting or editing a link.
Allows multiple link styles to be selected at a time.
Disables adding the noopener attribute when link is set to open in a new tab.
Disables adding the noreferrer attribute when link is set to open in a new tab.
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.
This option allows to edit the link text inside the edit link popup.
Enables list advanced types for the bullets.
Allows new line to be inserted when ENTER key is hit.
The default option to select for Paragraph Format.
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 <a href="#enter" title="enter"
target="_blank">enter option is set to FroalaEditor.ENTER_DIV.
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.
Allows multiple paragraph styles to be selected at a time.
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.
Removes images that have local path (file://) on paste. Enabling this option might result in having mixed content on HTTPS websites.
The list of allowed CSS attributes to be used for tags on paste.
Attributes that are removed when pasting something into the rich text editor.
Tags that are removed together with their content when pasting something into the rich text editor.
Removes text formatting when pasting content into the rich text editor, but keeps the content's structure.
The placeholder used when the WYSIWYG editor body is empty.
The plugins that should be enabled in the current editor instance. By default, all plugins are enabled. Available
plugins are: align, charCounter, codeBeautifier, codeView,
colors, draggable, embedly, emoticons, entities,
file, fontAwesome, fontFamily, fontSize,
fullscreen, image, imageTUI, imageManager,
inlineStyle, inlineClass, lineBreaker, lineHeight,
link, lists, paragraphFormat, paragraphStyle,
quickInsert, quote, save, table, url,
video, wordPaste.
Note: Each plugin requires you to include the
corresponding JS and CSS files. Here is the <a href="../docs/plugins/" class="f-link" title="Plugins"
target="_blank">complete list of plugins and the files required by them.
The buttons to display in quick insert.
To enable quick insert functionality.
The list of tags for which the quick insert button will appear when empty.
No description
An Object with additional header key/value pairs to send along with requests using the XMLHttpRequest transport.
Make AJAX requests using CORS. For more information refer to <a rel="nofollow" target="_blank" href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing" title="Cross-origin Resource Sharing">Cross-origin resource sharing.
A that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. For more information refer to <a rel="nofollow" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials" title="XMLHttpRequest.withCredentials">XMLHttpRequest.withCredentials.
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.
The HTTP save request type.
The name of the parameter which contains the rich text editor's content on the save request.
Additional parameters passed to the save request.
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.
Sets the container in which the editor popups are added.
Granular control for enabling or disabling specific shortcuts.
When enabled, the shortcut is displayed in the button tooltip.
The list of special characters buttons for popup.
The list of special characters to show.
Enables browser spellcheck for the text inside the editing box.
The tabIndex to set on the editor element.
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.
Allows multiple table cell styles to be selected at a time.
Set custom styles for the selected table cells. The classes should be defined in CSS, otherwise no changes will be visible.
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.
The list of buttons that appear in the edit table colors popup.
The number of colors displayed on a line in the edit table colors popup.
The size of the table when it is inserted in the editor.
The list of buttons that appear in the edit table popup, when one or many cells are selected.
The list of buttons that appear in the insert table popup, when the <a href="#toolbarInline" title="toolbarInline"
target="_blank">toolbarInline option is set to true.
Insert rows and columns easier by going to the edge of the table.
The offset for showing the table insert helper.
The maximum number of lines and columns when inserting a table into the rich text editor.
Allows multiple table styles to be selected at a time.
Enables resizing table cells.
The distance in pixels from the table cell's left or right border at which to show the resizer.
The minimum width in pixels of a table cell allowed while resizing. The resizer cannot be dragged over this limit.
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.
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.
Enable or disable positioning the toolbar at the bottom of the editor. This option is not available on mobile devices.
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. Here is the <a
href="../docs/plugins/" class="f-link" title="Plugins" target="_blank">complete list of plugins and the files
required by each them.
• align button requires align plugin;
•
color button requires colors plugin;
• embedly button requires
embedly plugin;
• emoticons button requires emoticons plugin;
•
fontFamily button requires fontFamily plugin;
• fontSize button
requires fontSize plugin;
• formatOL and formatUL buttons require
lists plugin;
• fullscreen button requires fullscreen plugin;
•
getPDF button requires print plugin;
• html button requires codeView plugin;
• inlineStyle button requires inlineStyle plugin;
• inlineClass button requires inlineClass plugin;
• insertFile button requires file plugin;
• insertImage button requires image plugin;
• insertLink button requires link plugin;
• insertTable button requires table plugin;
• insertVideo button requires video plugin;
• paragraphFormat button requires paragraphFormat plugin;
• paragraphStyle button requires paragraphStyle plugin;
• print button requires print plugin;
• quote button requires quote plugin;
• specialCharacters button requires specialCharacters plugin;
The list of buttons that appear in the rich text editor's toolbar on medium devices (≥ 992px). By default on MD
screens, the editor uses the same buttons as for toolbarButtons.
Note: Some of the buttons above require a specific plugin. See
toolbarButtons option for more details.
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 <a
href="#toolbarButtons" title="toolbarButtons option">toolbarButtons option for more details.
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 <a
href="#toolbarButtons" title="toolbarButtons option">toolbarButtons option for more details.
A custom HTML selector placing the toolbar inside.
Enable or disable inline mode.
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.
The offset of the sticky toolbar from top of the page. If <a href="#toolbarBottom" target="_blank" title="toolbarBottom">toolbarBottom option is used, then this option will define the offset of the toolbar from the bottom of the page.
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.
Control if tooltips are shown when getting with mouse over the buttons from the toolbar.
Time in milliseconds to define how long the typing pause may be without the change to be saved in the undo stack.
When this options is disabled the edited content will have the external CSS properties converted to inline style.
The name of the user joining the co-editing session. For a content management service, this should be set for each logged-in user based on their credentials. This name will be displayed during real-time co-editing sessions.
The list of video providers allowed to be inserted as URL.
The list of video 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.
Sets the default video alignment when it is inserted into the WYSIWYG editor. Possible values are
left, center and right.
Sets the default display for videos when they are inserted into the WYSIWYG editor. Possible options are: "inline" and "block".
Sets the default width of the video when it is inserted in the rich text editor. Setting it to 0 will
not set any width.
The buttons that appear in the edit video popup, when a video is selected.
The buttons that appear in the insert video popup, when a video is inserted into the WYSIWYG editor.
The maximum video size allowed on upload in bytes. The default value is 30MB. Although this makes an additional check before uploading the video, it is highly recommended to check image size on your server too.
Allows changing the position of the videos by dragging them.
Enable or disable resizing the videos inside the editor.
Enable or disable inserting responsive videos in the Froala Editor.
The buttons that appear in the edit video size popup, when changing the size of a selected video.
Enables splitting the HTML when inserting a new view.
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.
Enable or disable video upload.
The HTTP video upload request type.
Customize the name of the parameter that contains the video file in the upload request.
Pass additional parameters to the upload request.
Set the options for video upload to S3. All the fields from the example below are required. Also make sure that
you have enabled <a href="http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html" title="CORS" target="_blank"
rel="nofollow">CORS on Amazon.
Note: uploadURL property can be used
instead of bucket and region properties to specify a custom URL from Amazon where to
upload the video.
The URL where the videos uploaded by the user are saved. When a video 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 video.
Sets the width of the editing box.
The list of allowed CSS attributes to be used for tags when pasting from Word.
Attributes that are removed when pasting something into the rich text editor from Word.
Tags that are removed together with their content when pasting something into the rich text editor from Word.
Choose the default action when wordPasteModal option is enabled.
Show modal to choose if to keep or not styles pasted from Word. If set to false, the default action
is to keep the formatting.
The zIndex to set on the editor toolbars and popups.
Details
at line 31
__construct(string $name, mixed $value)
FroalaOption constructor.
at line 3323
static FroalaOption
apiKey(string $apiKey)
The API key for Froala's Codox integration. You can obtain a key from your Wave account. Froala Editor activation instructions can be found here.
Default: required
at line 3275
static FroalaOption
app(string $app)
The static string value froala
Default: required
at line 823
static FroalaOption
attribution(bool $attribution)
Remove the Powered By Froala message.
Default: true
at line 3340
static FroalaOption
autoStart(bool $autoStart)
Set to true, if co-editing session should start automatically on init(config). Set to
false to initialize but delay start the co-editing (see the start() client API). Default
setting is true.
Default: optional
at line 838
static FroalaOption
autofocus(bool $autofocus)
Focus the editor instance when the page is loaded.
Default: false
at line 70
static FroalaOption
charCounterCount(bool $charCounterCount)
Enables or disables the display of the character counter.
Default: true
at line 86
static FroalaOption
charCounterMax(int $charCounterMax)
The maximum number of characters allowed to be inserted into the rich text editor. -1 means that
there is not limit set.
Default: -1
at line 109
static FroalaOption
codeBeautifierOptions(array $codeBeautifierOptions)
Specify the options for Code Beautifier.
Default: { 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: '\t', indent_size: 1, wrap_line_length: 0 }
at line 125
static FroalaOption
codeMirror(bool $codeMirror)
Disable or enable using the CodeMirror library to highlight the HTML view.
Note: This option
requires the CodeMirror library to be included.
Default: window.CodeMirror
at line 147
static FroalaOption
codeMirrorOptions(array $codeMirrorOptions)
Specify the options for CodeMirror.
Default: { indentWithTabs: true, lineNumbers: true, lineWrapping: true, mode: 'text/html', tabMode: 'indent', tabSize: 2 }
at line 162
static FroalaOption
codeViewKeepActiveButtons(array $codeViewKeepActiveButtons)
A list of buttons to keep active while editor is in Code View mode.
Default: ["fullscreen"]
at line 3260
static FroalaOption
codoxOptions(array $codoxOptions)
Set options for codox plugin.
Default: events: { 'initialized': function() { //Adding Wave configuration const editor = this; var config = { "app" : "froala", "docId" : "mydoc", "username" : "Chris", "editor" : editor, "apiKey" : "Your-codox-key-here" }; codox.init(config); } }
at line 183
static FroalaOption
colorsBackground(array $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.
Default: [ '#61BD6D', '#1ABC9C', '#54ACD2', '#2C82C9', '#9365B8', '#475577', '#CCCCCC', '#41A85F', '#00A885', '#3D8EB9', '#2969B0', '#553982', '#28324E', '#000000', '#F7DA64', '#FBA026', '#EB6B56', '#E25041', '#A38F84', '#EFEFEF', '#FFFFFF', '#FAC51C', '#F37934', '#D14841', '#B8312F', '#7C706B', '#D1D5D8', 'REMOVE' ]
at line 198
static FroalaOption
colorsButtons(array $colorsButtons)
Set the buttons the colors popup.
Default: ["colorsBack", "|", "-"]
at line 213
static FroalaOption
colorsHEXInput(bool $colorsHEXInput)
Show HEX input to choose custom color.
Default: true
at line 228
static FroalaOption
colorsStep(int $colorsStep)
The number of colors displayed on a line in the colors popup.
Default: 7
at line 249
static FroalaOption
colorsText(array $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.
Default: [ '#61BD6D', '#1ABC9C', '#54ACD2', '#2C82C9', '#9365B8', '#475577', '#CCCCCC', '#41A85F', '#00A885', '#3D8EB9', '#2969B0', '#553982', '#28324E', '#000000', '#F7DA64', '#FBA026', '#EB6B56', '#E25041', '#A38F84', '#EFEFEF', '#FFFFFF', '#FAC51C', '#F37934', '#D14841', '#B8312F', '#7C706B', '#D1D5D8', 'REMOVE' ]
at line 856
static FroalaOption
direction(string $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.
Default: 'auto'
at line 873
static FroalaOption
disableRightClick(bool $disableRightClick)
Disables the default browser context menu. It's recommended to be used if <a href="#toolbarVisibleWithoutSelection" title="toolbarVisibleWithoutSelection" target="_blank">toolbarVisibleWithoutSelection option is enabled.
Default: false
at line 3291
static FroalaOption
docId(string $docId)
A unique identifier for the document. In a content management service, this could for example be the resource identifier for the document.
Default: required
at line 888
static FroalaOption
documentReady(bool $documentReady)
Turns on the editor best setup for editing documents.
Default: false
at line 265
static FroalaOption
dragInline(bool $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.
Default: true
at line 903
static FroalaOption
editInPopup(bool $editInPopup)
Edit the text inside the HTML element on which the editor is initialized on in a popup.
Default: false
at line 918
static FroalaOption
editorClass(string $editorClass)
Set a custom class for the WYSIWYG editor editing box.
Default: null
at line 295
static FroalaOption
embedlyEditButtons(array $embedlyEditButtons)
The buttons that appear in the edit Embed.ly popup, when an embedded object is selected.
Default: ['embedlyRemove']
at line 310
static FroalaOption
embedlyInsertButtons(array $embedlyInsertButtons)
The buttons that appear in the insert Embed.ly popup, when an embeded object is inserted into the WYSIWYG editor.
Default: ['embedlyBack', '|']
at line 280
static FroalaOption
embedlyKey(string $embedlyKey)
Your key from Embed.ly to remove the "Powered By Banner".
Default: null
at line 325
static FroalaOption
embedlyScriptPath(string $embedlyScriptPath)
The default script path for the Embedly JS.
Default: 'https://cdn.embedly.com/widgets/platform.js'
at line 340
static FroalaOption
emoticonsButtons(array $emoticonsButtons)
Buttons set for emoticons popup.
Default: ["emoticonsBack", "|"]
at line 419
static FroalaOption
emoticonsSet(array $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.
Default: [ {code: '1f600', desc: 'Grinning face'}, {code: '1f601', desc: 'Grinning face with smiling eyes'}, {code: '1f602', desc: 'Face with tears of joy'}, {code: '1f603', desc: 'Smiling face with open mouth'}, {code: '1f604', desc: 'Smiling face with open mouth and smiling eyes'}, {code: '1f605', desc: 'Smiling face with open mouth and cold sweat'}, {code: '1f606', desc: 'Smiling face with open mouth and tightly-closed eyes'}, {code: '1f607', desc: 'Smiling face with halo'},
{code: '1f608', desc: 'Smiling face with horns'}, {code: '1f609', desc: 'Winking face'}, {code: '1f60a', desc: 'Smiling face with smiling eyes'}, {code: '1f60b', desc: 'Face savoring delicious food'}, {code: '1f60c', desc: 'Relieved face'}, {code: '1f60d', desc: 'Smiling face with heart-shaped eyes'}, {code: '1f60e', desc: 'Smiling face with sunglasses'}, {code: '1f60f', desc: 'Smirking face'},
{code: '1f610', desc: 'Neutral face'}, {code: '1f611', desc: 'Expressionless face'}, {code: '1f612', desc: 'Unamused face'}, {code: '1f613', desc: 'Face with cold sweat'}, {code: '1f614', desc: 'Pensive face'}, {code: '1f615', desc: 'Confused face'}, {code: '1f616', desc: 'Confounded face'}, {code: '1f617', desc: 'Kissing face'},
{code: '1f618', desc: 'Face throwing a kiss'}, {code: '1f619', desc: 'Kissing face with smiling eyes'}, {code: '1f61a', desc: 'Kissing face with closed eyes'}, {code: '1f61b', desc: 'Face with stuck out tongue'}, {code: '1f61c', desc: 'Face with stuck out tongue and winking eye'}, {code: '1f61d', desc: 'Face with stuck out tongue and tightly-closed eyes'}, {code: '1f61e', desc: 'Disappointed face'}, {code: '1f61f', desc: 'Worried face'},
{code: '1f620', desc: 'Angry face'}, {code: '1f621', desc: 'Pouting face'}, {code: '1f622', desc: 'Crying face'}, {code: '1f623', desc: 'Persevering face'}, {code: '1f624', desc: 'Face with look of triumph'}, {code: '1f625', desc: 'Disappointed but relieved face'}, {code: '1f626', desc: 'Frowning face with open mouth'}, {code: '1f627', desc: 'Anguished face'},
{code: '1f628', desc: 'Fearful face'}, {code: '1f629', desc: 'Weary face'}, {code: '1f62a', desc: 'Sleepy face'}, {code: '1f62b', desc: 'Tired face'}, {code: '1f62c', desc: 'Grimacing face'}, {code: '1f62d', desc: 'Loudly crying face'}, {code: '1f62e', desc: 'Face with open mouth'}, {code: '1f62f', desc: 'Hushed face'},
{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'} ]
at line 449
static FroalaOption
emoticonsStep(int $emoticonsStep)
The number of emoticons displayed on a line in the insert emoticon popup.
Default: 8
at line 434
static FroalaOption
emoticonsUseImage(bool $emoticonsUseImage)
Use EmojiOne svg images instead of Unicode text.
Default: true
at line 934
static FroalaOption
enter(string $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.
Default: FroalaEditor.ENTER_P
at line 468
static FroalaOption
entities(string $entities)
A list with the characters that are reserved in HTML. More details about using entities in HTML can be found on <a href="https://dev.w3.org/html5/html-author/charref" target="_blank" rel="nofollow">W3C and <a href="https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" target="_blank" rel="nofollow">Wikipedia.
Default: '"'¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿŒœŠšŸƒˆ˜ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρςστυφχψωϑϒϖ –—‘’‚“”„†‡•…‰′″‹›‾⁄€ℑ℘ℜ™ℵ←↑→↓↔↵⇐⇑⇒⇓⇔∀∂∃∅∇∈∉∋∏∑−∗√∝∞∠∧∨∩∪∫∴∼≅≈≠≡≤≥⊂⊃⊄⊆⊇⊕⊗⊥⋅⌈⌉⌊⌋⟨⟩◊♠♣♥♦'
at line 3232
static FroalaOption
events(array $events)
The options used for WebSpellChecker.
Default: window.WEBSPELLCHECKER_CONFIG = { autoSearch: true, autoDestroy: true, serviceId: '1:long-identifier-received-from-webspellchecker-after-subscription' };
at line 3153
static FroalaOption
faButtons(array $faButtons)
The list of Font Awesome buttons to show in the popup for inserting icons.
Default: ["fontAwesomeBack", "|"]
at line 484
static FroalaOption
fileAllowedTypes(array $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.
Default: ['*']
at line 499
static FroalaOption
fileInsertButtons(array $fileInsertButtons)
The list of buttons that appear in the insert file popup, when inserting a new file into the WYSIWYG editor.
Default: ['fileBack', '|']
at line 515
static FroalaOption
fileMaxSize(int $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.
Default: 1024 1024 10
at line 530
static FroalaOption
fileUpload(bool $fileUpload)
Enable or disable file upload.
Default: true
at line 545
static FroalaOption
fileUploadMethod(string $fileUploadMethod)
The HTTP file upload request type.
Default: 'POST'
at line 560
static FroalaOption
fileUploadParam(string $fileUploadParam)
Customize the name of the parameter that contains the file in the upload request.
Default: 'file'
at line 575
static FroalaOption
fileUploadParams(array $fileUploadParams)
Pass additional parameters to the file upload request.
Default: }
at line 594
static FroalaOption
fileUploadToS3(array $fileUploadToS3)
Set the options for file upload to S3. All the fields from the example below are required. Also make sure that you
have enabled <a href="http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html" title="CORS" target="_blank"
rel="nofollow">CORS on Amazon.
Note: uploadURL property can be used
instead of bucket and region properties to specify a custom URL from Amazon where to
upload the image.
Default: false
at line 619
static FroalaOption
fileUploadURL(string $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 <a
href="#requestWithCORS" title="requestWithCORS" target="_blank">requestWithCORS option and make specific
customizations on the server. For more information please refer to Cross-origin resource sharing.
Default: 'http://i.froala.com/upload'
at line 634
static FroalaOption
fileUseSelectedText(bool $fileUseSelectedText)
Enables using the file's name instead of the selected text when a file is inserted.
Default: false
at line 3168
static FroalaOption
fontAwesomeSets(array $fontAwesomeSets)
The list of Font Awesome icons to show in the modal for inserting icons.
Default: }
at line 3183
static FroalaOption
fontAwesomeTemplate(string $fontAwesomeTemplate)
Set the template to be used for the Font Awesome icons inserted in the editor.
Default: ' '
at line 656
static FroalaOption
fontFamily(array $fontFamily)
Defines the fonts that appear under the Font Family button from the rich text editor's toolbar.
Default: { 'Arial,Helvetica,sans-serif': 'Arial', 'Georgia,serif': 'Georgia', 'Impact,Charcoal,sans-serif': 'Impact', 'Tahoma,Geneva,sans-serif': 'Tahoma', "'Times New Roman',Times,serif": 'Times New Roman', 'Verdana,Geneva,sans-serif': 'Verdana' }
at line 671
static FroalaOption
fontFamilyDefaultSelection(string $fontFamilyDefaultSelection)
The text to display when the font family is unkown or nothing is selected.
Default: 'Font Family'
at line 687
static FroalaOption
fontFamilySelection(bool $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.
Default: false
at line 718
static FroalaOption
fontSize(array $fontSize)
Defines the font sizes that appear under the Font Size button from the rich text editor's toolbar.
Default: ['8', '9', '10', '11', '12', '14', '18', '24', '30', '36', '48', '60', '72', '96']
at line 733
static FroalaOption
fontSizeDefaultSelection(string $fontSizeDefaultSelection)
The text to display when the font size is unkown or nothing is selected.
Default: '12'
at line 703
static FroalaOption
fontSizeSelection(bool $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.
Default: false
at line 748
static FroalaOption
fontSizeUnit(string $fontSizeUnit)
The unit to be used for the font size.
Default: 'px'
at line 763
static FroalaOption
formEditButtons(array $formEditButtons)
Buttons for form edit popup.
Default: ["inputStyle", "inputEdit"]
at line 778
static FroalaOption
formMultipleStyles(bool $formMultipleStyles)
To enable applying multiple css on form elements.
Default: true
at line 793
static FroalaOption
formStyles(array $formStyles)
Options for applying styles on form.
Default: {fr-rounded: "Rounded", fr-large: "Large"}
at line 808
static FroalaOption
formUpdateButtons(array $formUpdateButtons)
Buttons for form popup.
Default: ["inputBack", "|"]
at line 951
static FroalaOption
fullPage(bool $fullPage)
Allows the usage of HTML, HEAD, BODY tags and DOCTYPE
declaration.
Note: Enabling this option will automatically enables the <a href="#iframe"
title="iframe" target="_blank">iframe option.
Default: false
at line 39
string
getName()
No description
at line 46
mixed
getValue()
No description
at line 966
static FroalaOption
height(int $height)
Set a height for the rich text editor's editing box.
Default: null
at line 981
static FroalaOption
heightMax(int $heightMax)
Set a maximum height for the rich text editor's editing box.
Default: null
at line 996
static FroalaOption
heightMin(int $heightMin)
Set a minimum height for the rich text editor's editing box.
Default: null
at line 1985
static FroalaOption
helpSets(array $helpSets)
An object of items to show in the help modal.
Default: [ { title: 'Inline Editor', commands: [ { val: 'OSkeyE', desc: 'Show the editor' } ] }, { title: 'Common actions', commands: [ { val: 'OSkeyC', desc: 'Copy' }, { val: 'OSkeyX', desc: 'Cut' }, { val: 'OSkeyV', desc: 'Paste' }, { val: 'OSkeyZ', desc: 'Undo' }, { val: 'OSkeyShift+Z', desc: 'Redo' }, { val: 'OSkeyK', desc: 'Insert Link' }, { val: 'OSkeyP', desc: 'Insert Image' } ] }, { title: 'Basic Formatting', commands: [ { val: 'OSkeyA', desc: 'Select All' }, { val: 'OSkeyB', desc: 'Bold' }, { val: 'OSkeyI', desc: 'Italic' }, { val: 'OSkeyU', desc: 'Underline' }, { val: 'OSkeyS', desc: 'Strikethrough' }, { val: 'OSkey]', desc: 'Increase Indent' }, { val: 'OSkey[', desc: 'Decrease Indent' } ] }, { title: 'Quote', commands: [ { val: 'OSkey\'', desc: 'Increase quote level' }, { val: 'OSkeyShift+\'', desc: 'Decrease quote level' } ] }, { title: 'Image / Video', commands: [ { val: 'OSkey+', desc: 'Resize larger' }, { val: 'OSkey-', desc: 'Resize smaller' } ] }, { title: 'Table', commands: [ { val: 'Alt+Space', desc: 'Select table cell' }, { val: 'Shift+Left/Right arrow', desc: 'Extend selection one cell' }, { val: 'Shift+Up/Down arrow', desc: 'Extend selection one row' } ] }, { title: 'Navigation', commands: [ { val: 'OSkey/', desc: 'Shortcuts' }, { val: 'Alt+F10', desc: 'Focus popup / toolbar' }, { val: 'Esc', desc: 'Return focus to previous position' } ] } ]
at line 1012
static FroalaOption
htmlAllowComments(bool $htmlAllowComments)
Allow comments inside the edited HTML.
Default: true
at line 1037
static FroalaOption
htmlAllowedAttrs(array $htmlAllowedAttrs)
The list of allowed attributes to be used for tags.
Default: ['accept', 'accept-charset', 'accesskey', 'action', 'align', 'allowfullscreen', 'allowtransparency', 'alt', 'aria-.', 'async', 'autocomplete', 'autofocus', 'autoplay', 'autosave', 'background', 'bgcolor', 'border', 'charset', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'color', 'cols', 'colspan', 'content', 'contenteditable', 'contextmenu', 'controls', 'coords', 'data', 'data-.', 'datetime', 'default', 'defer', 'dir', 'dirname', 'disabled', 'download', 'draggable', 'dropzone', 'enctype', 'for', 'form', 'formaction', 'frameborder', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'http-equiv', 'icon', 'id', 'ismap', 'itemprop', 'keytype', 'kind', 'label', 'lang', 'language', 'list', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'mozallowfullscreen', 'multiple', 'muted', 'name', 'novalidate', 'open', 'optimum', 'pattern', 'ping', 'placeholder', 'playsinline', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'reversed', 'rows', 'rowspan', 'sandbox', 'scope', 'scoped', 'scrolling', 'seamless', 'selected', 'shape', 'size', 'sizes', 'span', 'src', 'srcdoc', 'srclang', 'srcset', 'start', 'step', 'summary', 'spellcheck', 'style', 'tabindex', 'target', 'title', 'type', 'translate', 'usemap', 'value', 'valign', 'webkitallowfullscreen', 'width', 'wrap']
at line 1053
static FroalaOption
htmlAllowedEmptyTags(array $htmlAllowedEmptyTags)
The list of tags that are not removed when they have no content inside.
Default: ['textarea', 'a', 'iframe', 'object', 'video', 'style', 'script', '.fa', '.fr-emoticon', '.fr-inner', 'path', 'line', 'hr']
at line 1068
static FroalaOption
htmlAllowedStyleProps(array $htmlAllowedStyleProps)
The list of allowed CSS attributes to be used for tags.
Default: []
at line 1091
static FroalaOption
htmlAllowedTags(array $htmlAllowedTags)
The list of allowed tags.
Default: ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'pre', 'progress', 'queue', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'style', 'section', 'select', 'small', 'source', 'span', 'strike', 'strong', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr']
at line 1106
static FroalaOption
htmlDoNotWrapTags(array $htmlDoNotWrapTags)
The list of tags that should not be wrapped inside block tags.
Default: ['script', 'style']
at line 1121
static FroalaOption
htmlExecuteScripts(bool $htmlExecuteScripts)
Allow running scripts that are entered in Code View.
Default: true
at line 1137
static FroalaOption
htmlIgnoreCSSProperties(array $htmlIgnoreCSSProperties)
A list of CSS properties to be ignored when useClasses option is disabled and the CSS from external
stylesheets is converted to inline style.
Default: []
at line 1152
static FroalaOption
htmlRemoveTags(array $htmlRemoveTags)
The list of tags that are removed together with their content.
Default: ['script', 'style']
at line 1169
static FroalaOption
htmlSimpleAmpersand(bool $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.
Default: false
at line 1184
static FroalaOption
htmlUntouched(bool $htmlUntouched)
Leave the HTML inside the editor untouched without doing any special processing to it except HTML cleaning.
Default: false
at line 1199
static FroalaOption
iconsTemplate(string $iconsTemplate)
Set the template to be used for the icons inside the editor UI.
Default: 'svg'
at line 1215
static FroalaOption
iframe(bool $iframe)
When this option is enabled, the editor's content will be placed in an iframe and isolated from the rest of the page.
Default: false
at line 1231
static FroalaOption
iframeDefaultStyle(string $iframeDefaultStyle)
Default style needed by the editor to be used inside the iframe to display content.
Default: 'html{margin: 0px;}body{padding:10px;background:transparent;color:#000000;position:relative;z-index: 2;-webkit-user-select:auto;margin:0px;overflow:hidden;}body:after{content:"";clear:both;display:block}'
at line 1247
static FroalaOption
iframeStyle(string $iframeStyle)
Custom style to be used inside the iframe to display content. This style is added over the
iframeDefaultStyle style.
Default: ''
at line 1262
static FroalaOption
iframeStyleFiles(array $iframeStyleFiles)
An array with custom CSS files to inject inside the iframe to display content.
Default: []
at line 2408
static FroalaOption
imageAddNewLine(bool $imageAddNewLine)
Add new line after inserting an image when enabled.
Default: false
at line 2001
static FroalaOption
imageAllowedTypes(array $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.
Default: ['jpeg', 'jpg', 'png', 'gif', 'webp']
at line 2017
static FroalaOption
imageAltButtons(array $imageAltButtons)
The list of buttons that appear in the edit image alternate text popup, when changing the alternate text of the image.
Default: ['imageBack', '|']
at line 2035
static FroalaOption
imageCORSProxy(string $imageCORSProxy)
Proxy server to be used for reading images inserted by URL and upload them to a custom server. By default we provide a proxy hosted on our servers, however for full control, we recommend setting up your own proxy by using the details from CORS Anywhere.
Default: 'https://cors-anywhere.froala.com'
at line 2051
static FroalaOption
imageDefaultAlign(string $imageDefaultAlign)
Sets the default image alignment when it is inserted in the rich text editor. Possible values are
'left', 'center' and 'right'.
Default: 'center'
at line 2067
static FroalaOption
imageDefaultDisplay(string $imageDefaultDisplay)
Sets the default display for an image when is is inserted in the rich text. Possible options are:
'inline' and 'block'.
Default: 'block'
at line 2083
static FroalaOption
imageDefaultMargin(int $imageDefaultMargin)
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.
Default: 5
at line 2099
static FroalaOption
imageDefaultWidth(int $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.
Default: 300
at line 2116
static FroalaOption
imageEditButtons(array $imageEditButtons)
The list of buttons that appear in the edit image popup, when an image is selected. If Image Aviary
plugin is included, then 'aviary' can be used as an option as well.
Default: ['imageReplace', 'imageAlign', 'imageCaption', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize']
at line 2131
static FroalaOption
imageInsertButtons(array $imageInsertButtons)
The list of buttons that appear in the insert image popup, when inserting a new image into the WYSIWYG editor.
Default: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager']
at line 2527
static FroalaOption
imageManagerDeleteMethod(string $imageManagerDeleteMethod)
The HTTP image manager delete image request type.
Default: 'POST'
at line 2542
static FroalaOption
imageManagerDeleteParams(array $imageManagerDeleteParams)
Additional parameters passed to the image manager image delete request.
Default: }
at line 2558
static FroalaOption
imageManagerDeleteURL(string $imageManagerDeleteURL)
The URL where the HTTP request is done to delete the image. The request will contain the image source as
src parameter.
Default: ''
at line 2573
static FroalaOption
imageManagerLoadMethod(string $imageManagerLoadMethod)
The HTTP image manager load images request type.
Default: 'GET'
at line 2588
static FroalaOption
imageManagerLoadParams(array $imageManagerLoadParams)
Additional parameters passed to the load images request from the image manager.
Default: }
at line 2604
static FroalaOption
imageManagerLoadURL(string $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:
Default: 'http://i.froala.com/load-files'
at line 2619
static FroalaOption
imageManagerPageSize(int $imageManagerPageSize)
The number of images loaded per page in the image manager.
Default: 12
at line 2635
static FroalaOption
imageManagerPreloader(string $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.
Default: ''
at line 2651
static FroalaOption
imageManagerScrollOffset(int $imageManagerScrollOffset)
The distance in pixels from the bottom of the scrollable content at which to trigger the loading of the next page of images.
Default: 20
at line 2666
static FroalaOption
imageManagerToggleTags(bool $imageManagerToggleTags)
To enable/disable toggle of filter tags for image manager popup.
Default: true
at line 2147
static FroalaOption
imageMaxSize(int $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.
Default: 1024 1024 10
at line 2162
static FroalaOption
imageMinWidth(int $imageMinWidth)
The minimum width in PX the image can be resized to.
Default: 16
at line 2178
static FroalaOption
imageMove(bool $imageMove)
Allows changing the position of the images by dragging them. This option will work correctly only when including the draggable plugin.
Default: true
at line 2193
static FroalaOption
imageMultipleStyles(bool $imageMultipleStyles)
Allows multiple image styles to be selected at a time.
Default: true
at line 2284
static FroalaOption
imageOutputSize(bool $imageOutputSize)
When this option is enabled, the images will get the width and height set as attribute in the output.
Default: false
at line 2208
static FroalaOption
imagePaste(bool $imagePaste)
Allows pasting images from clipboard.
Default: true
at line 2223
static FroalaOption
imagePasteProcess(bool $imagePasteProcess)
Use default image settings for pasted images.
Default: false
at line 2238
static FroalaOption
imageResize(bool $imageResize)
Disables image resize when set to false.
Default: true
at line 2254
static FroalaOption
imageResizeWithPercent(bool $imageResizeWithPercent)
By default the image resize is using PX. Enabling this option will use % instead when resizing an image inside the editor.
Default: false
at line 2269
static FroalaOption
imageRoundPercent(bool $imageRoundPercent)
Force image percent to round to integer while resizing.
Default: false
at line 2299
static FroalaOption
imageSizeButtons(array $imageSizeButtons)
The list of buttons that appear in the edit image size popup, when editing the image's width and height.
Default: ['imageBack', '|']
at line 2314
static FroalaOption
imageSplitHTML(bool $imageSplitHTML)
Enables splitting the HTML when inserting a new image.
Default: false
at line 2333
static FroalaOption
imageStyles(array $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.
Default: { 'fr-rounded': 'Rounded', 'fr-bordered': 'Bordered' }
at line 2362
static FroalaOption
imageTUIOptions(array $imageTUIOptions)
Set options for TUI editor plugin.
Default: { includeUI: { initMenu: "filter", menuBarPosition: "left", theme: { "menu.activeIcon.path": "https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/svg/icon-b.svg", "menu.disabledIcon.path": "https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/svg/icon-a.svg", "menu.hoverIcon.path": "https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/svg/icon-c.svg", "menu.normalIcon.path": "https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/svg/icon-d.svg", "submenu.activeIcon.name": "icon-c", "submenu.activeIcon.path": "https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/svg/icon-c.svg", "submenu.normalIcon.name": "icon-d", "submenu.normalIcon.path": "https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/svg/icon-d.svg" } }
at line 2378
static FroalaOption
imageTextNear(bool $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.
Default: true
at line 2393
static FroalaOption
imageUpload(bool $imageUpload)
Enable or disable image upload.
Default: true
at line 2423
static FroalaOption
imageUploadMethod(string $imageUploadMethod)
The HTTP image upload request type.
Default: 'POST'
at line 2438
static FroalaOption
imageUploadParam(string $imageUploadParam)
Customize the name of the parameter that contains the image file in the upload request.
Default: 'file'
at line 2453
static FroalaOption
imageUploadParams(array $imageUploadParams)
Pass additional parameters to the upload request.
Default: }
at line 2468
static FroalaOption
imageUploadRemoteUrls(bool $imageUploadRemoteUrls)
Upload images inserted by URL to custom server instead of linking them by URL.
Default: true
at line 2487
static FroalaOption
imageUploadToS3(array $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 <a href="http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html" title="CORS" target="_blank"
rel="nofollow">CORS on Amazon.
Note: uploadURL property can be used
instead of bucket and region properties to specify a custom URL from Amazon where to
upload the image.
Default: false
at line 2512
static FroalaOption
imageUploadURL(string $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 <a href="../docs/concepts/image-upload" title="Image Upload Concept"
target="_blank">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.
Default: null
at line 1277
static FroalaOption
indentMargin(int $indentMargin)
The number of pixels to use for indenting the current line.
Default: 20
at line 1294
static FroalaOption
initOnClick(bool $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.
Default: false
at line 2705
static FroalaOption
inlineClasses(array $inlineClasses)
Set custom classes for the selected text. This option is an Object where the key is the name of the new class that appears in the dropdown and the value specifies the class name for it.
Default: { 'fr-class-code': 'Code', 'fr-class-highlighted': 'Highlighted', 'fr-class-transparency': 'Transparent' }
at line 2685
static FroalaOption
inlineStyles(array $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.
Default: { 'Big Red': 'font-size: 20px; color: red;', 'Small Blue': 'font-size: 14px; color: blue;' }
at line 1309
static FroalaOption
keepFormatOnDelete(bool $keepFormatOnDelete)
Keep format of the selected text when it is deleted.
Default: false
at line 2721
static FroalaOption
language(string $language)
Select the language to be used in the rich text editor's interface. The corresponding language file is required: /langs/es.js.
Default: null
at line 2736
static FroalaOption
lineBreakerHorizontalOffset(int $lineBreakerHorizontalOffset)
The distance in pixels from the left or right of an element at which to show the line-breaker.
Default: 10
at line 2751
static FroalaOption
lineBreakerOffset(int $lineBreakerOffset)
The distance in pixels from the top or bottom of an element at which to show the line-breaker.
Default: 15
at line 2766
static FroalaOption
lineBreakerTags(array $lineBreakerTags)
The list of HTML tags between which the line-breaker should appear.
Default: ['table', 'hr', 'form', 'dl', 'span.fr-video', '.fr-embedly', '.fr-img-caption']
at line 3078
static FroalaOption
lineHeights(array $lineHeights)
Set the line height for the current selected paragraph.
Default: { Default: '', Single: '1', '1.15': '1.15', '1.5': '1.5', Double: '2' }
at line 2781
static FroalaOption
linkAlwaysBlank(bool $linkAlwaysBlank)
When enabled, all links open in a new tab and no option to set this action would be presented in the UI.
Default: false
at line 2796
static FroalaOption
linkAlwaysNoFollow(bool $linkAlwaysNoFollow)
Specifies if the rel="nofollow" attribute should be added on all links.
Default: true
at line 2811
static FroalaOption
linkAttributes(array $linkAttributes)
An object with additional attributes that could be customized for a link.
Default: }
at line 2826
static FroalaOption
linkAutoPrefix(string $linkAutoPrefix)
Sets the default URL prefix.
Default: 'http://'
at line 2841
static FroalaOption
linkConvertEmailAddress(bool $linkConvertEmailAddress)
Email addresses inserted as link are converted to mailto: links.
Default: true
at line 2856
static FroalaOption
linkEditButtons(array $linkEditButtons)
The list of buttons that appear in the edit link popup, when clicking on an existing link from the editor.
Default: ['linkOpen', 'linkStyle', 'linkEdit', 'linkRemove']
at line 2871
static FroalaOption
linkInsertButtons(array $linkInsertButtons)
The list of buttons that appear in the insert link popup, when inserting a new link into the WYSIWYG editor.
Default: ['linkBack', '|', 'linkList']
at line 2886
static FroalaOption
linkList(array $linkList)
Set a predefined list of links to select from when inserting or editing a link.
Default: []
at line 2901
static FroalaOption
linkMultipleStyles(bool $linkMultipleStyles)
Allows multiple link styles to be selected at a time.
Default: true
at line 2916
static FroalaOption
linkNoOpener(bool $linkNoOpener)
Disables adding the noopener attribute when link is set to open in a new tab.
Default: true
at line 2931
static FroalaOption
linkNoReferrer(bool $linkNoReferrer)
Disables adding the noreferrer attribute when link is set to open in a new tab.
Default: true
at line 2950
static FroalaOption
linkStyles(array $linkStyles)
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.
Default: { 'fr-green': 'Green', 'fr-strong': 'Thick' }
at line 2965
static FroalaOption
linkText(bool $linkText)
This option allows to edit the link text inside the edit link popup.
Default: false
at line 3093
static FroalaOption
listAdvancedTypes(bool $listAdvancedTypes)
Enables list advanced types for the bullets.
Default: true
at line 1324
static FroalaOption
multiLine(bool $multiLine)
Allows new line to be inserted when ENTER key is hit.
Default: true
at line 2980
static FroalaOption
paragraphDefaultSelection(string $paragraphDefaultSelection)
The default option to select for Paragraph Format.
Default: 'Paragraph Format'
at line 3005
static FroalaOption
paragraphFormat(array $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 <a href="#enter" title="enter"
target="_blank">enter option is set to FroalaEditor.ENTER_DIV.
Default: { N: 'Normal', H1: 'Heading 1', H2: 'Heading 2', H3: 'Heading 3', H4: 'Heading 4', PRE: 'Code' }
at line 3021
static FroalaOption
paragraphFormatSelection(bool $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.
Default: false
at line 3036
static FroalaOption
paragraphMultipleStyles(bool $paragraphMultipleStyles)
Allows multiple paragraph styles to be selected at a time.
Default: true
at line 3057
static FroalaOption
paragraphStyles(array $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.
Default: { 'fr-text-gray': 'Gray', 'fr-text-bordered': 'Bordered', 'fr-text-spaced': 'Spaced', 'fr-text-uppercase': 'Uppercase' }
at line 1355
static FroalaOption
pasteAllowLocalImages(bool $pasteAllowLocalImages)
Removes images that have local path (file://) on paste. Enabling this option might result in having mixed content on HTTPS websites.
Default: false
at line 1339
static FroalaOption
pasteAllowedStyleProps(array $pasteAllowedStyleProps)
The list of allowed CSS attributes to be used for tags on paste.
Default: []
at line 1370
static FroalaOption
pasteDeniedAttrs(array $pasteDeniedAttrs)
Attributes that are removed when pasting something into the rich text editor.
Default: ['class', 'id', 'style']
at line 1385
static FroalaOption
pasteDeniedTags(array $pasteDeniedTags)
Tags that are removed together with their content when pasting something into the rich text editor.
Default: []
at line 1400
static FroalaOption
pastePlain(bool $pastePlain)
Removes text formatting when pasting content into the rich text editor, but keeps the content's structure.
Default: false
at line 1415
static FroalaOption
placeholderText(string $placeholderText)
The placeholder used when the WYSIWYG editor body is empty.
Default: 'Type Something'
at line 1440
static FroalaOption
pluginsEnabled(array $pluginsEnabled)
The plugins that should be enabled in the current editor instance. By default, all plugins are enabled. Available
plugins are: align, charCounter, codeBeautifier, codeView,
colors, draggable, embedly, emoticons, entities,
file, fontAwesome, fontFamily, fontSize,
fullscreen, image, imageTUI, imageManager,
inlineStyle, inlineClass, lineBreaker, lineHeight,
link, lists, paragraphFormat, paragraphStyle,
quickInsert, quote, save, table, url,
video, wordPaste.
Note: Each plugin requires you to include the
corresponding JS and CSS files. Here is the <a href="../docs/plugins/" class="f-link" title="Plugins"
target="_blank">complete list of plugins and the files required by them.
Default: null
at line 3108
static FroalaOption
quickInsertButtons(array $quickInsertButtons)
The buttons to display in quick insert.
Default: ['image', 'video', 'embedly', 'table', 'ul', 'ol', 'hr']
at line 3123
static FroalaOption
quickInsertEnabled(bool $quickInsertEnabled)
To enable quick insert functionality.
Default: true
at line 3138
static FroalaOption
quickInsertTags(array $quickInsertTags)
The list of tags for which the quick insert button will appear when empty.
Default: ['p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'blockquote']
at line 55
static FroalaOption
readonly(bool $readonly)
No description
at line 1455
static FroalaOption
requestHeaders(array $requestHeaders)
An Object with additional header key/value pairs to send along with requests using the XMLHttpRequest transport.
Default: }
at line 1490
static FroalaOption
requestWithCORS(bool $requestWithCORS)
Make AJAX requests using CORS. For more information refer to <a rel="nofollow" target="_blank" href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing" title="Cross-origin Resource Sharing">Cross-origin resource sharing.
Default: true
at line 1473
static FroalaOption
requestWithCredentials(bool $requestWithCredentials)
A that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. For more information refer to <a rel="nofollow" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials" title="XMLHttpRequest.withCredentials">XMLHttpRequest.withCredentials.
Default: false
at line 3358
static FroalaOption
saveInterval(int $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.
Default: 10000
at line 3373
static FroalaOption
saveMethod(string $saveMethod)
The HTTP save request type.
Default: 'POST'
at line 3388
static FroalaOption
saveParam(string $saveParam)
The name of the parameter which contains the rich text editor's content on the save request.
Default: 'body'
at line 3403
static FroalaOption
saveParams(array $saveParams)
Additional parameters passed to the save request.
Default: }
at line 3419
static FroalaOption
saveURL(string $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.
Default: null
at line 1505
static FroalaOption
scrollableContainer(string $scrollableContainer)
Sets the container in which the editor popups are added.
Default: 'body'
at line 1521
static FroalaOption
shortcutsEnabled(array $shortcutsEnabled)
Granular control for enabling or disabling specific shortcuts.
Default: ['show', 'bold', 'italic', 'underline', 'strikeThrough', 'indent', 'outdent', 'undo', 'redo', 'insertImage', 'createLink']
at line 1536
static FroalaOption
shortcutsHint(bool $shortcutsHint)
When enabled, the shortcut is displayed in the button tooltip.
Default: true
at line 3198
static FroalaOption
specialCharButtons(array $specialCharButtons)
The list of special characters buttons for popup.
Default: ["specialCharBack", "|"]
at line 3213
static FroalaOption
specialCharactersSets(array $specialCharactersSets)
The list of special characters to show.
Default: }
at line 1551
static FroalaOption
spellcheck(bool $spellcheck)
Enables browser spellcheck for the text inside the editing box.
Default: true
at line 1566
static FroalaOption
tabIndex(int $tabIndex)
The tabIndex to set on the editor element.
Default: null
at line 1582
static FroalaOption
tabSpaces(int $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.
Default: 0
at line 3434
static FroalaOption
tableCellMultipleStyles(bool $tableCellMultipleStyles)
Allows multiple table cell styles to be selected at a time.
Default: true
at line 3453
static FroalaOption
tableCellStyles(array $tableCellStyles)
Set custom styles for the selected table cells. The classes should be defined in CSS, otherwise no changes will be visible.
Default: { 'fr-highlighted': 'Highlighted', 'fr-thick': 'Thick' }
at line 3475
static FroalaOption
tableColors(array $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.
Default: [ '#61BD6D', '#1ABC9C', '#54ACD2', '#2C82C9', '#9365B8', '#475577', '#CCCCCC', '#41A85F', '#00A885', '#3D8EB9', '#2969B0', '#553982', '#28324E', '#000000', '#F7DA64', '#FBA026', '#EB6B56', '#E25041', '#A38F84', '#EFEFEF', '#FFFFFF', '#FAC51C', '#F37934', '#D14841', '#B8312F', '#7C706B', '#D1D5D8', 'REMOVE' ]
at line 3490
static FroalaOption
tableColorsButtons(array $tableColorsButtons)
The list of buttons that appear in the edit table colors popup.
Default: ['tableBack', '|']
at line 3505
static FroalaOption
tableColorsStep(int $tableColorsStep)
The number of colors displayed on a line in the edit table colors popup.
Default: 7
at line 3520
static FroalaOption
tableDefaultWidth(string $tableDefaultWidth)
The size of the table when it is inserted in the editor.
Default: 100%
at line 3536
static FroalaOption
tableEditButtons(array $tableEditButtons)
The list of buttons that appear in the edit table popup, when one or many cells are selected.
Default: ['tableHeader', 'tableRemove', '|', 'tableRows', 'tableColumns', 'tableStyle', '-', 'tableCells', 'tableCellBackground', 'tableCellVerticalAlign', 'tableCellHorizontalAlign', 'tableCellStyle']
at line 3552
static FroalaOption
tableInsertButtons(array $tableInsertButtons)
The list of buttons that appear in the insert table popup, when the <a href="#toolbarInline" title="toolbarInline"
target="_blank">toolbarInline option is set to true.
Default: ['tableBack', '|']
at line 3567
static FroalaOption
tableInsertHelper(bool $tableInsertHelper)
Insert rows and columns easier by going to the edge of the table.
Default: true
at line 3582
static FroalaOption
tableInsertHelperOffset(int $tableInsertHelperOffset)
The offset for showing the table insert helper.
Default: 15
at line 3597
static FroalaOption
tableInsertMaxSize(int $tableInsertMaxSize)
The maximum number of lines and columns when inserting a table into the rich text editor.
Default: 10
at line 3612
static FroalaOption
tableMultipleStyles(bool $tableMultipleStyles)
Allows multiple table styles to be selected at a time.
Default: true
at line 3627
static FroalaOption
tableResizer(bool $tableResizer)
Enables resizing table cells.
Default: true
at line 3642
static FroalaOption
tableResizerOffset(int $tableResizerOffset)
The distance in pixels from the table cell's left or right border at which to show the resizer.
Default: 5
at line 3657
static FroalaOption
tableResizingLimit(int $tableResizingLimit)
The minimum width in pixels of a table cell allowed while resizing. The resizer cannot be dragged over this limit.
Default: 30
at line 3676
static FroalaOption
tableStyles(array $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.
Default: { 'fr-dashed-borders': 'Dashed Borders', 'fr-alternate-rows': 'Alternate Rows' }
at line 1598
static FroalaOption
theme(string $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.
Default: null
at line 1614
static FroalaOption
toolbarBottom(bool $toolbarBottom)
Enable or disable positioning the toolbar at the bottom of the editor. This option is not available on mobile devices.
Default: false
at line 1657
static FroalaOption
toolbarButtons(array $toolbarButtons)
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. Here is the <a
href="../docs/plugins/" class="f-link" title="Plugins" target="_blank">complete list of plugins and the files
required by each them.
• align button requires align plugin;
•
color button requires colors plugin;
• embedly button requires
embedly plugin;
• emoticons button requires emoticons plugin;
•
fontFamily button requires fontFamily plugin;
• fontSize button
requires fontSize plugin;
• formatOL and formatUL buttons require
lists plugin;
• fullscreen button requires fullscreen plugin;
•
getPDF button requires print plugin;
• html button requires codeView plugin;
• inlineStyle button requires inlineStyle plugin;
• inlineClass button requires inlineClass plugin;
• insertFile button requires file plugin;
• insertImage button requires image plugin;
• insertLink button requires link plugin;
• insertTable button requires table plugin;
• insertVideo button requires video plugin;
• paragraphFormat button requires paragraphFormat plugin;
• paragraphStyle button requires paragraphStyle plugin;
• print button requires print plugin;
• quote button requires quote plugin;
• specialCharacters button requires specialCharacters plugin;
Default: { 'moreText': { 'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'] }, 'moreParagraph': { 'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'] }, 'moreRich': { 'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR'] }, 'moreMisc': { 'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'], 'align': 'right', 'buttonsVisible': 2 } }
at line 1675
static FroalaOption
toolbarButtonsMD(array $toolbarButtonsMD)
The list of buttons that appear in the rich text editor's toolbar on medium devices (≥ 992px). By default on MD
screens, the editor uses the same buttons as for toolbarButtons.
Note: Some of the buttons above require a specific plugin. See
toolbarButtons option for more details.
Default: null
at line 1713
static FroalaOption
toolbarButtonsSM(array $toolbarButtonsSM)
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 <a
href="#toolbarButtons" title="toolbarButtons option">toolbarButtons option for more details.
Default: { 'moreText': { 'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'], 'buttonsVisible': 2 }, 'moreParagraph': { 'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'], 'buttonsVisible': 2 }, 'moreRich': { 'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR'], 'buttonsVisible': 2 }, 'moreMisc': { 'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'], 'align': 'right', 'buttonsVisible': 2 } }
at line 1751
static FroalaOption
toolbarButtonsXS(array $toolbarButtonsXS)
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 <a
href="#toolbarButtons" title="toolbarButtons option">toolbarButtons option for more details.
Default: { 'moreText': { 'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'], 'buttonsVisible': 0 }, 'moreParagraph': { 'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'], 'buttonsVisible': 0 }, 'moreRich': { 'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR'], 'buttonsVisible': 0 }, 'moreMisc': { 'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'], 'align': 'right', 'buttonsVisible': 2 } }
at line 1766
static FroalaOption
toolbarContainer(bool $toolbarContainer)
A custom HTML selector placing the toolbar inside.
Default: null
at line 1781
static FroalaOption
toolbarInline(bool $toolbarInline)
Enable or disable inline mode.
Default: false
at line 1797
static FroalaOption
toolbarSticky(bool $toolbarSticky)
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.
Default: true
at line 1814
static FroalaOption
toolbarStickyOffset(int $toolbarStickyOffset)
The offset of the sticky toolbar from top of the page. If <a href="#toolbarBottom" target="_blank" title="toolbarBottom">toolbarBottom option is used, then this option will define the offset of the toolbar from the bottom of the page.
Default: 0
at line 1831
static FroalaOption
toolbarVisibleWithoutSelection(bool $toolbarVisibleWithoutSelection)
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.
Default: false
at line 1846
static FroalaOption
tooltips(bool $tooltips)
Control if tooltips are shown when getting with mouse over the buttons from the toolbar.
Default: true
at line 1862
static FroalaOption
typingTimer(int $typingTimer)
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.
Default: 500
at line 1879
static FroalaOption
useClasses(bool $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.
Default: true
at line 3307
static FroalaOption
username(string $username)
The name of the user joining the co-editing session. For a content management service, this should be set for each logged-in user based on their credentials. This name will be displayed during real-time co-editing sessions.
Default: required
at line 3691
static FroalaOption
videoAllowedProviders(array $videoAllowedProviders)
The list of video providers allowed to be inserted as URL.
Default: ['.*']
at line 3707
static FroalaOption
videoAllowedTypes(array $videoAllowedTypes)
The list of video 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.
Default: ['mp4', 'webm', 'ogg']
at line 3723
static FroalaOption
videoDefaultAlign(string $videoDefaultAlign)
Sets the default video alignment when it is inserted into the WYSIWYG editor. Possible values are
left, center and right.
Default: 'center'
at line 3739
static FroalaOption
videoDefaultDisplay(string $videoDefaultDisplay)
Sets the default display for videos when they are inserted into the WYSIWYG editor. Possible options are: "inline" and "block".
Default: 'block'
at line 3755
static FroalaOption
videoDefaultWidth(int $videoDefaultWidth)
Sets the default width of the video when it is inserted in the rich text editor. Setting it to 0 will
not set any width.
Default: 600
at line 3770
static FroalaOption
videoEditButtons(array $videoEditButtons)
The buttons that appear in the edit video popup, when a video is selected.
Default: ['videoReplace', 'videoRemove', '|' 'videoDisplay', 'videoAlign', 'videoSize']
at line 3785
static FroalaOption
videoInsertButtons(array $videoInsertButtons)
The buttons that appear in the insert video popup, when a video is inserted into the WYSIWYG editor.
Default: ['videoBack', '|', 'videoByURL', 'videoEmbed', 'videoUpload']
at line 3801
static FroalaOption
videoMaxSize(int $videoMaxSize)
The maximum video size allowed on upload in bytes. The default value is 30MB. Although this makes an additional check before uploading the video, it is highly recommended to check image size on your server too.
Default: 1024 1024 30
at line 3816
static FroalaOption
videoMove(bool $videoMove)
Allows changing the position of the videos by dragging them.
Default: true
at line 3831
static FroalaOption
videoResize(bool $videoResize)
Enable or disable resizing the videos inside the editor.
Default: true
at line 3846
static FroalaOption
videoResponsive(bool $videoResponsive)
Enable or disable inserting responsive videos in the Froala Editor.
Default: false
at line 3861
static FroalaOption
videoSizeButtons(array $videoSizeButtons)
The buttons that appear in the edit video size popup, when changing the size of a selected video.
Default: ['videoBack', '|']
at line 3876
static FroalaOption
videoSplitHTML(bool $videoSplitHTML)
Enables splitting the HTML when inserting a new view.
Default: false
at line 3892
static FroalaOption
videoTextNear(bool $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.
Default: true
at line 3907
static FroalaOption
videoUpload(bool $videoUpload)
Enable or disable video upload.
Default: true
at line 3922
static FroalaOption
videoUploadMethod(string $videoUploadMethod)
The HTTP video upload request type.
Default: 'POST'
at line 3937
static FroalaOption
videoUploadParam(string $videoUploadParam)
Customize the name of the parameter that contains the video file in the upload request.
Default: 'file'
at line 3952
static FroalaOption
videoUploadParams(array $videoUploadParams)
Pass additional parameters to the upload request.
Default: }
at line 3971
static FroalaOption
videoUploadToS3(array $videoUploadToS3)
Set the options for video upload to S3. All the fields from the example below are required. Also make sure that
you have enabled <a href="http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html" title="CORS" target="_blank"
rel="nofollow">CORS on Amazon.
Note: uploadURL property can be used
instead of bucket and region properties to specify a custom URL from Amazon where to
upload the video.
Default: false
at line 3996
static FroalaOption
videoUploadURL(string $videoUploadURL)
The URL where the videos uploaded by the user are saved. When a video 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 video.
Note 1: By default, the videos 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 videos stored on our servers,
may be deleted at any time without any notice.
Note 2: If the domain where the video is saved
is not the same with the one where the editor is running, you may need to enable <a href="#requestWithCORS"
title="requestWithCORS" target="_blank">requestWithCORS option and make specific customizations on the server.
For more information please refer to <a target="_blank"
href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing" title="Cross-origin Resource Sharing"
rel="nofollow">Cross-origin resource sharing.
Default: null
at line 1894
static FroalaOption
width(string $width)
Sets the width of the editing box.
Default: 'auto'
at line 4013
static FroalaOption
wordAllowedStyleProps(array $wordAllowedStyleProps)
The list of allowed CSS attributes to be used for tags when pasting from Word.
Default: ['font-family', 'font-size', 'background', 'color', 'width', 'text-align', 'vertical-align', 'background-color', 'padding', 'margin', 'height', 'margin-top', 'margin-left', 'margin-right', 'margin-bottom', 'text-decoration', 'font-weight', 'font-style', 'text-indent', 'border', 'border-.*']
at line 4028
static FroalaOption
wordDeniedAttrs(array $wordDeniedAttrs)
Attributes that are removed when pasting something into the rich text editor from Word.
Default: []
at line 4043
static FroalaOption
wordDeniedTags(array $wordDeniedTags)
Tags that are removed together with their content when pasting something into the rich text editor from Word.
Default: []
at line 4074
static FroalaOption
wordPasteKeepFormatting(bool $wordPasteKeepFormatting)
Choose the default action when wordPasteModal option is enabled.
Default: true
at line 4059
static FroalaOption
wordPasteModal(bool $wordPasteModal)
Show modal to choose if to keep or not styles pasted from Word. If set to false, the default action
is to keep the formatting.
Default: true
at line 1909
static FroalaOption
zIndex(int $zIndex)
The zIndex to set on the editor toolbars and popups.
Default: 1