diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..58c32c8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +/.project +/.settings/ diff --git a/Assets/MooEditable/MooEditable.css b/Assets/MooEditable/MooEditable.css index 0cfe3be..88987b5 100644 --- a/Assets/MooEditable/MooEditable.css +++ b/Assets/MooEditable/MooEditable.css @@ -132,11 +132,12 @@ .mooeditable-textarea{ margin: 0 !important; - padding: 0 !important; + padding: 16px !important; border: 0 !important; width: 100% !important; resize: none !important; /* disable resizable textareas in Webkit */ outline: 0 !important; /* disable focus ring in Safari */ + box-sizing: border-box; } .mooeditable-ui-dialog{ @@ -176,6 +177,41 @@ -webkit-outline: 0; } -.mooeditable-ui-button-overlay .overlay-content{ +.mooeditable-ui-statusbar{ + background-color: #eee; + border-top: 1px solid #aaa; + position: relative; + height: 37px; +} + +.mooeditable-ui-statusbar-nodepath{ padding: 10px; + float: left; +} + +.mooeditable-ui-statusbar-nodepath .node{ + cursor: pointer; +} + +.mooeditable-ui-statusbar-nodepath .node:hover{ + text-decoration: underline; +} + +.mooeditable-ui-statusbar-wordcount{ + float: right; + text-align: right; + padding: 10px; +} + +.mooeditable-ui-statusbar-resize{ + background: transparent url(Other/resize.png) no-repeat 0 0px; + display: inline-block; + clear: both; + bottom: 0; + height: 16px; + margin: 0; + position: absolute; + right: 0; + visibility: visible; + width: 16px; } \ No newline at end of file diff --git a/Assets/MooEditable/Other/resize.png b/Assets/MooEditable/Other/resize.png new file mode 100644 index 0000000..3c0492a Binary files /dev/null and b/Assets/MooEditable/Other/resize.png differ diff --git a/Demos/MooEditable/MooEditable.UI.Statusbar.html b/Demos/MooEditable/MooEditable.UI.Statusbar.html new file mode 100644 index 0000000..ede97dc --- /dev/null +++ b/Demos/MooEditable/MooEditable.UI.Statusbar.html @@ -0,0 +1,64 @@ + + +
+ +` tags when pressing 'Enter'. -* xhtml - (*boolean*: defaults to true) Whether or not to produce XHTML-valid output (empty/void elements with trailing slash). -* semantics - (*boolean*: defaults to true) Whether or not to produce semantic markup (strong/em instead of b/i). -* actions - (*string*: defaults to a string shown below) A string indicating the toolbar items and their arrangement (space-separated). - - 'bold italic underline strikethrough | insertunorderedlist insertorderedlist indent outdent | undo redo | createlink unlink, | urlimage | toggleview' -* handleSubmit - (*boolean*: defaults to true) Whether or not to attach a submit listener to the textarea's parent form, to save content to textarea before submit. -* handleLabel - (*boolean*: defaults to true) Whether or not to attach a click listener to the textarea's related label tag, to focus on the iframe instead. -* baseCSS - (*string*: defaults to a string shown below) A string indicating the base CSS code. - - html{ height: 100%; cursor: text } - body{ font-family: sans-serif; border: 0; } -* extraCSS - (*string*: defaults to null) A string indicating the extra CSS code besides the base. -* externalCSS - (*string*: defaults to null) A string indicating the URL of the external CSS file. No `` tag HTML needed. -* html - (*string*: defaults to a string show below) A string indicating the HTML of the iframe content. - - -
- - - {EXTERNALCSS} - - {CONTENT} - -* rootElement - (*string*: defaults to 'p') A string indicating the root element of the editor content. -* baseURL - (*string*: defaults to null) A string indicating the editor content's base URL for resolving relative URLs. -* dimensions - (*object*: defaults to null) An object with x/y values indicating the width and height of the editor. Useful when the editor is not displayed when initialized. - -### Events: - -* render - Executed when the editor is rendered. -* attach - Executed when the editor is attached. -* detach - Executed when the editor is detached. -* editorMouseUp - Executed when 'mouseup' event is fired on the editor. -* editorMouseDown - Executed when 'mousedown' event is fired on the editor. -* editorContextMenu - Executed when 'contextmenu' event is fired on the editor. -* editorClick - Executed when 'click' event is fired on the editor. -* editorDoubleClick - Executed when 'doubleclick' event is fired on the editor. -* editorKeyPress - Executed when 'keypress' event is fired on the editor. -* editorKeyUp - Executed when 'keyup' event is fired on the editor. -* editorKeyDown - Executed when 'keydown' event is fired on the editor. -* dialogOpen - Executed when dialog is opened. -* dialogClose - Executed when dialog is closed. - -### Example: - - var myMooEditable = new MooEditable('myTextarea', { - handleSubmit: false, - onRender: function(){ - alert('Done rendering.'); - } - }); - - - -MooEditable Method: attach {#MooEditable:attach} ------------------------------------------------- - -Attaches the editor and replace the textarea. - -### Syntax: - - myMooEditable.attach(); - -### Returns: - -* (*object*) This MooEditable instance. - - - -MooEditable Method: detach {#MooEditable:detach} ------------------------------------------------- - -Detaches the editor and replaced by the original textarea. - -### Syntax: - - myMooEditable.detach(); - -### Returns: - -* (*object*) This MooEditable instance. - - - -MooEditable Method: focus {#MooEditable:focus} ----------------------------------------------- - -Focus on the editor, regardless of which view is shown. - -### Syntax: - - myMooEditable.focus(); - -### Returns: - -* (*object*) This MooEditable instance. - - - -MooEditable Method: toggleView {#MooEditable:toggleView} --------------------------------------------------------- - -Toggles the editor view of the source or the WYSIWYG content. - -### Syntax: - - myMooEditable.toggleView(); - -### Returns: - -* (*object*) This MooEditable instance. - - - -MooEditable Method: getContent {#MooEditable:getContent} --------------------------------------------------------- - -Returns the source of the editor content. - -### Syntax: - - myMooEditable.getContent(); - -### Returns: - -* (*string*) The HTML source of the content - - - -MooEditable Method: setContent {#MooEditable:setContent} --------------------------------------------------------- - -Sets the source of the editor content. - -### Syntax: - - myMooEditable.setContent('Hello World.
'); - -### Returns: - -* (*object*) This MooEditable instance. - - - -MooEditable Method: saveContent {#MooEditable:saveContent} ----------------------------------------------------------- - -Saves the source of the WYSIWYG content to the textarea. - -### Syntax: - - myMooEditable.saveContent(); - -### Returns: - -* (*object*) This MooEditable instance. - - - -Object: MooEditable.UI {#MooEditable-UI} -======================================== - -This Object contains the interface classes for MooEditable. - - - -Class: MooEditable.UI.Toolbar {#MooEditable-UI-Toolbar} -======================================================= - -The toolbar interface. - -### Implements: - -[Events][], [Options][] - - -MooEditable.UI.Toolbar Method: constructor {#MooEditable-UI-Toolbar:constructor} --------------------------------------------------------------------------------- - -### Syntax: - - var myMooEditableToolbar = new MooEditable.UI.Toolbar([options]); - -### Arguments: - -1. options - (*object*, optional) The options object. - -### Options: - -* class - (*string*: defaults to null) The class name of the toolbar. - -### Events: - -* itemAction - Executed when an action of an item on the toolbar is executed. - - - -MooEditable.UI.Toolbar Method: addItem {#MooEditable-UI-Toolbar:addItem} ------------------------------------------------------------------------- - -Add an item to the toolbar. - -### Syntax: - - myMooEditableToolbar.addItem('item'); - -### Arguments: - -1. item - (*string*) An action name that matches one already specified in [MooEditable.Actions](#MooEditable-Actions) hash. - -### Returns: - -* (*object*) The MooEditable.UI.item instance. - - - -MooEditable.UI.Toolbar Method: getItem {#MooEditable-UI-Toolbar:getItem} ------------------------------------------------------------------------- - -Returns the item from the toolbar. - -### Syntax: - - var myItem = myMooEditableToolbar.getItem('item'); - -### Arguments: - -1. item - (*string*) An action name that matches one already specified in [MooEditable.Actions](#MooEditable-Actions) hash. - -### Returns: - -* (*object*) The MooEditable.Actions.item object. - - - -MooEditable.UI.Toolbar Method: addSeparator {#MooEditable-UI-Toolbar:addSeparator} ----------------------------------------------------------------------------------- - -Add a separator to the toolbar. - -### Syntax: - - myMooEditableToolbar.addSeparator(); - -### Returns: - -* (*object*) The Element object of the separator. - - - -MooEditable.UI.Toolbar Method: enable {#MooEditable-UI-Toolbar:enable} ----------------------------------------------------------------------- - -Enables all the items on the toolbar. - -### Syntax: - - myMooEditableToolbar.enable(); - -### Returns: - -* (*object*) This MooEditable.UI.Toolbar instance. - - - -MooEditable.UI.Toolbar Method: disable {#MooEditable-UI-Toolbar:disable} ------------------------------------------------------------------------- - -Disables the items on the toolbar. - -### Syntax: - - myMooEditableToolbar.disable(except); - -### Arguments: - -1. except - (*string*) An action name that matches one already specified in [MooEditable.Actions](#MooEditable-Actions) hash, to be excepted from becoming disabled on the toolbar. - -### Returns: - -* (*object*) This MooEditable.UI.Toolbar instance. - - - -MooEditable.UI.Toolbar Method: show {#MooEditable-UI-Toolbar:show} ------------------------------------------------------------------- - -Shows the toolbar. - -### Syntax: - - myMooEditableToolbar.show(); - -### Returns: - -* (*object*) This MooEditable.UI.Toolbar instance. - - - -MooEditable.UI.Toolbar Method: hide {#MooEditable-UI-Toolbar:hide} ------------------------------------------------------------------- - -Hides the toolbar. - -### Syntax: - - myMooEditableToolbar.hide(); - -### Returns: - -* (*object*) This MooEditable.UI.Toolbar instance. - - - -Class: MooEditable.UI.Button {#MooEditable-UI-Button} -===================================================== - -The button interface. - -### Implements: - -[Events][], [Options][] - - -MooEditable.UI.Button Method: constructor {#MooEditable-UI-Button:constructor} ------------------------------------------------------------------------------- - -### Syntax: - - var myMooEditableButton = new MooEditable.UI.Button([options]); - -### Arguments: - -1. options - (*object*, optional) The options object. - -### Options: - -* title - (*string*: defaults to null) The title of the button. -* name - (*string*: defaults to null) The unique name of the button. -* text - (*string*: defaults to 'Button') The text shown on the button. -* class - (*string*: defaults to null) The class name of the button. -* shortcut - (*string*: defaults to null) The keyboard shortcut key to trigger the action of the button. -* mode - (*string*: defaults to 'icon') Can be 'icon', 'text' or 'icon-text'. - * 'icon' - Iconic button - * 'text' - Textual button - * 'icon-text' - Icon and text shown on the button. - -### Events: - -* action - Executed when the action of the button is executed. - - - -MooEditable.UI.Button Method: enable {#MooEditable-UI-Button:enable} --------------------------------------------------------------------- - -Enables the button. - -### Syntax: - - myMooEditableButton.enable(); - -### Returns: - -* (*object*) This MooEditable.UI.Button instance. - - - -MooEditable.UI.Button Method: disable {#MooEditable-UI-Button:disable} ----------------------------------------------------------------------- - -Disables the button. - -### Syntax: - - myMooEditableButton.disable(); - -### Returns: - -* (*object*) This MooEditable.UI.Button instance. - - - -MooEditable.UI.Button Method: activate {#MooEditable-UI-Button:activate} ------------------------------------------------------------------------- - -Activates the button. - -### Syntax: - - myMooEditableButton.activate(); - -### Returns: - -* (*object*) This MooEditable.UI.Button instance. - - - -MooEditable.UI.Button Method: deactivate {#MooEditable-UI-Button:deactivate} ----------------------------------------------------------------------------- - -Deactivates the button. - -### Syntax: - - myMooEditableButton.deactivate(); - -### Returns: - -* (*object*) This MooEditable.UI.Button instance. - - - -Class: MooEditable.UI.Dialog {#MooEditable-UI-Dialog} -===================================================== - -The dialog interface. - -### Implements: - -[Events][], [Options][] - - -MooEditable.UI.Dialog Method: constructor {#MooEditable-UI-Dialog:constructor} ------------------------------------------------------------------------------- - -### Syntax: - - var myMooEditableDialog = new MooEditable.UI.Dialog([options]); - -### Arguments: - -1. options - (*object*, optional) The options object. - -### Options: - -* class - (*string*: defaults to null) The class name of the dialog. -* contentClass - (*string*: defaults to null) The class name of the dialog content. - -### Events: - -* open - Executed when the dialog is opened. -* close - Executed when the dialog is closed. - - - -MooEditable.UI.Dialog Method: open {#MooEditable-UI-Dialog:open} ----------------------------------------------------------------- - -Opens the dialog. - -### Syntax: - - myMooEditableDialog.open(); - -### Returns: - -* (*object*) This MooEditable.UI.Dialog instance. - - - -MooEditable.UI.Dialog Method: close {#MooEditable-UI-Dialog:close} ------------------------------------------------------------------- - -Closes the dialog. - -### Syntax: - - myMooEditableDialog.close(); - -### Returns: - -* (*object*) This MooEditable.UI.Dialog instance. - - - -Function: MooEditable.UI.AlertDialog {#MooEditable-UI-AlertDialog} -================================================================== - -The alert dialog interface. Replacement for `alert()`. - -### Syntax: - - var myMooEditableAlertDialog = MooEditable.UI.AlertDialog(text); - -### Arguments: - -1. text - (*string*) A string to be shown on the alert dialog. - - - -Function: MooEditable.UI.PromptDialog {#MooEditable-UI-PromptDialog} -================================================================== - -The prompt dialog interface. Replacement for `prompt()`. - -### Syntax: - - var myMooEditablePromptDialog = MooEditable.UI.PromptDialog(question[, answer, fn]); - -### Arguments: - -1. question - (*string*) A string to be shown as the question on the prompt dialog. -2. answer - (*string*, optional) A string to be shown in the answer field on the prompt dialog. -3. fn - (*function*, optional) Executed when the OK button of the prompt dialog is clicked. - - - -Hash: MooEditable.Actions {#MooEditable-Actions} -================================================ - -This Hash contains the objects that specifies all 'actions' for the editor. The list of actions are: - -* bold -* italic -* underline -* strikethrough -* insertunorderedlist -* insertorderedlist -* indent -* outdent -* undo -* redo -* unlink -* createlink -* urlimage -* toggleview - - - -Native: Element {#Element} -================================================ - -Custom Native to allow all of its methods to be used with any DOM element via the dollar function [$][]. - -Element Method: mooEditable {#Element:mooEditable} --------------------------------------------------- - -Initializes the MooEditable instance on the element. - -### Syntax: - - var myMooEditable = myElement.mooEditable([options]); - -### Arguments: - -* options - (*object*, optional) See [MooEditable](#MooEditable) for acceptable options. - -### Returns: - -* (*object*) The MooEditable instance that was created. - -### Examples: - - var myMooEditable = $('myElement').mooEditable({ - onRender: function(){ - alert('Done rendering.'); - } - }); - -### See Also: - -* [MooEditable](#MooEditable) - - - -[$]: http://mootools.net/docs/Element/Element/#dollar -[Events]: http://mootools.net/docs/Class/Class.Extras#Events +Class: MooEditable {#MooEditable} +================================= + +A simple web-based WYSIWYG editor. + +### Implements: + +[Events][], [Options][] + + +MooEditable Method: constructor {#MooEditable:constructor} +---------------------------------------------------------- + +### Syntax: + + var myMooEditableInstance = new MooEditable(textarea[, options]); + +### Arguments: + +1. textarea - (*mixed*) A string of the id for an Element or an Element reference of the textarea this editor modifies. +2. options - (*object*, optional) The options object. + +### Options: + +* toolbar - (*boolean*: defaults to true) Whether or not to show the toolbar. +* cleanup: - (*boolean*: defaults to true) Whether or not to clean up the HTML source. +* paragraphise - (*boolean*: defaults to true) Whether or not to create `` tags when pressing 'Enter'. +* xhtml - (*boolean*: defaults to true) Whether or not to produce XHTML-valid output (empty/void elements with trailing slash). +* semantics - (*boolean*: defaults to true) Whether or not to produce semantic markup (strong/em instead of b/i). +* actions - (*string*: defaults to a string shown below) A string indicating the toolbar items and their arrangement (space-separated). + + 'bold italic underline strikethrough | insertunorderedlist insertorderedlist indent outdent | undo redo | createlink unlink, | urlimage | toggleview' +* handleSubmit - (*boolean*: defaults to true) Whether or not to attach a submit listener to the textarea's parent form, to save content to textarea before submit. +* handleLabel - (*boolean*: defaults to true) Whether or not to attach a click listener to the textarea's related label tag, to focus on the iframe instead. +* baseCSS - (*string*: defaults to a string shown below) A string indicating the base CSS code. + + html{ height: 100%; cursor: text } + body{ font-family: sans-serif; border: 0; } +* extraCSS - (*string*: defaults to null) A string indicating the extra CSS code besides the base. +* externalCSS - (*string*: defaults to null) A string indicating the URL of the external CSS file. No `` tag HTML needed. +* html - (*string*: defaults to a string show below) A string indicating the HTML of the iframe content. + + +
+ + + {EXTERNALCSS} + + {CONTENT} + +* rootElement - (*string*: defaults to 'p') A string indicating the root element of the editor content. +* baseURL - (*string*: defaults to null) A string indicating the editor content's base URL for resolving relative URLs. +* dimensions - (*object*: defaults to null) An object with x/y values indicating the width and height of the editor. Useful when the editor is not displayed when initialized. + +### Events: + +* render - Executed when the editor is rendered. +* attach - Executed when the editor is attached. +* detach - Executed when the editor is detached. +* editorMouseUp - Executed when 'mouseup' event is fired on the editor. +* editorMouseDown - Executed when 'mousedown' event is fired on the editor. +* editorContextMenu - Executed when 'contextmenu' event is fired on the editor. +* editorClick - Executed when 'click' event is fired on the editor. +* editorDoubleClick - Executed when 'doubleclick' event is fired on the editor. +* editorKeyPress - Executed when 'keypress' event is fired on the editor. +* editorKeyUp - Executed when 'keyup' event is fired on the editor. +* editorKeyDown - Executed when 'keydown' event is fired on the editor. +* dialogOpen - Executed when dialog is opened. +* dialogClose - Executed when dialog is closed. + +### Example: + + var myMooEditable = new MooEditable('myTextarea', { + handleSubmit: false, + onRender: function(){ + alert('Done rendering.'); + } + }); + + + +MooEditable Method: attach {#MooEditable:attach} +------------------------------------------------ + +Attaches the editor and replace the textarea. + +### Syntax: + + myMooEditable.attach(); + +### Returns: + +* (*object*) This MooEditable instance. + + + +MooEditable Method: detach {#MooEditable:detach} +------------------------------------------------ + +Detaches the editor and replaced by the original textarea. + +### Syntax: + + myMooEditable.detach(); + +### Returns: + +* (*object*) This MooEditable instance. + + + +MooEditable Method: focus {#MooEditable:focus} +---------------------------------------------- + +Focus on the editor, regardless of which view is shown. + +### Syntax: + + myMooEditable.focus(); + +### Returns: + +* (*object*) This MooEditable instance. + + + +MooEditable Method: toggleView {#MooEditable:toggleView} +-------------------------------------------------------- + +Toggles the editor view of the source or the WYSIWYG content. + +### Syntax: + + myMooEditable.toggleView(); + +### Returns: + +* (*object*) This MooEditable instance. + + + +MooEditable Method: getContent {#MooEditable:getContent} +-------------------------------------------------------- + +Returns the source of the editor content. + +### Syntax: + + myMooEditable.getContent(); + +### Returns: + +* (*string*) The HTML source of the content + + + +MooEditable Method: setContent {#MooEditable:setContent} +-------------------------------------------------------- + +Sets the source of the editor content. + +### Syntax: + + myMooEditable.setContent('Hello World.
'); + +### Returns: + +* (*object*) This MooEditable instance. + + + +MooEditable Method: saveContent {#MooEditable:saveContent} +---------------------------------------------------------- + +Saves the source of the WYSIWYG content to the textarea. + +### Syntax: + + myMooEditable.saveContent(); + +### Returns: + +* (*object*) This MooEditable instance. + + + +Object: MooEditable.UI {#MooEditable-UI} +======================================== + +This Object contains the interface classes for MooEditable. + + + +Class: MooEditable.UI.Toolbar {#MooEditable-UI-Toolbar} +======================================================= + +The toolbar interface. + +### Implements: + +[Events][], [Options][] + + + +MooEditable.UI.Toolbar Method: constructor {#MooEditable-UI-Toolbar:constructor} +-------------------------------------------------------------------------------- + +### Syntax: + + var myMooEditableToolbar = new MooEditable.UI.Toolbar([options]); + +### Arguments: + +1. options - (*object*, optional) The options object. + +### Options: + +* class - (*string*: defaults to null) The class name of the toolbar. + +### Events: + +* itemAction - Executed when an action of an item on the toolbar is executed. + + + +MooEditable.UI.Toolbar Method: addItem {#MooEditable-UI-Toolbar:addItem} +------------------------------------------------------------------------ + +Add an item to the toolbar. + +### Syntax: + + myMooEditableToolbar.addItem('item'); + +### Arguments: + +1. item - (*string*) An action name that matches one already specified in [MooEditable.Actions](#MooEditable-Actions) hash. + +### Returns: + +* (*object*) The MooEditable.UI.item instance. + + + +MooEditable.UI.Toolbar Method: getItem {#MooEditable-UI-Toolbar:getItem} +------------------------------------------------------------------------ + +Returns the item from the toolbar. + +### Syntax: + + var myItem = myMooEditableToolbar.getItem('item'); + +### Arguments: + +1. item - (*string*) An action name that matches one already specified in [MooEditable.Actions](#MooEditable-Actions) hash. + +### Returns: + +* (*object*) The MooEditable.Actions.item object. + + + +MooEditable.UI.Toolbar Method: addSeparator {#MooEditable-UI-Toolbar:addSeparator} +---------------------------------------------------------------------------------- + +Add a separator to the toolbar. + +### Syntax: + + myMooEditableToolbar.addSeparator(); + +### Returns: + +* (*object*) The Element object of the separator. + + + +MooEditable.UI.Toolbar Method: enable {#MooEditable-UI-Toolbar:enable} +---------------------------------------------------------------------- + +Enables all the items on the toolbar. + +### Syntax: + + myMooEditableToolbar.enable(); + +### Returns: + +* (*object*) This MooEditable.UI.Toolbar instance. + + + +MooEditable.UI.Toolbar Method: disable {#MooEditable-UI-Toolbar:disable} +------------------------------------------------------------------------ + +Disables the items on the toolbar. + +### Syntax: + + myMooEditableToolbar.disable(except); + +### Arguments: + +1. except - (*string*) An action name that matches one already specified in [MooEditable.Actions](#MooEditable-Actions) hash, to be excepted from becoming disabled on the toolbar. + +### Returns: + +* (*object*) This MooEditable.UI.Toolbar instance. + + + +MooEditable.UI.Toolbar Method: show {#MooEditable-UI-Toolbar:show} +------------------------------------------------------------------ + +Shows the toolbar. + +### Syntax: + + myMooEditableToolbar.show(); + +### Returns: + +* (*object*) This MooEditable.UI.Toolbar instance. + + + +MooEditable.UI.Toolbar Method: hide {#MooEditable-UI-Toolbar:hide} +------------------------------------------------------------------ + +Hides the toolbar. + +### Syntax: + + myMooEditableToolbar.hide(); + +### Returns: + +* (*object*) This MooEditable.UI.Toolbar instance. + + + +Class: MooEditable.UI.Statusbar {#MooEditable-UI-Statusbar} +=========================================================== + +Attach a Statusbar with character and/or word counter, show html path, allows word and character/word entry limit to the interface. + +### Options: +* showwords - (*boolean*: defaults to true) - Show counter of words. +* showchars - (*boolean*: defaults to true) - Show counter of chars. +* shownode - (*boolean*: defaults to true) - Show html nodes. +* showmaxwords - (*boolean*: defaults to true) - Show word limit if set by maxwords. +* showmaxchars - (*boolean*: defaults to true) - Show chars limit if set by maxchars or maxrealchar. +* maxwords - (*integer*: defaults to null) - Word limit into Html View. +* maxchars - (*integer*: defaults to null) - Character limit into Html View (only text). +* maxrealchars - (*integer*: defaults to null) - Character limit into Code View (text + html-tags). +* resizeable - (*boolean*: defaults to true) - Is Editor resizable? +* resizedirection - (*object*: defaults to a object shown below) - Which directions is Editor resizable? + + {x: false, y: true} +* separator - (*string*: defaults to '/') - Seperator between words and characters counter. +* class - (*string*: defaults to null) - The additional class name of the statusbar. + +### Events: + +* editorResizeBeforeStart - Executed before resizing starts. +* editorResizeDrag - Executed on resizing. +* editorResizeComplete - Executed after resizing end. + + + +Class: MooEditable.UI.Button {#MooEditable-UI-Button} +===================================================== + +The button interface. + +### Implements: + +[Events][], [Options][] + + +MooEditable.UI.Button Method: constructor {#MooEditable-UI-Button:constructor} +------------------------------------------------------------------------------ + +### Syntax: + + var myMooEditableButton = new MooEditable.UI.Button([options]); + +### Arguments: + +1. options - (*object*, optional) The options object. + +### Options: + +* title - (*string*: defaults to null) The title of the button. +* name - (*string*: defaults to null) The unique name of the button. +* text - (*string*: defaults to 'Button') The text shown on the button. +* class - (*string*: defaults to null) The class name of the button. +* shortcut - (*string*: defaults to null) The keyboard shortcut key to trigger the action of the button. +* mode - (*string*: defaults to 'icon') Can be 'icon', 'text' or 'icon-text'. + * 'icon' - Iconic button + * 'text' - Textual button + * 'icon-text' - Icon and text shown on the button. + +### Events: + +* action - Executed when the action of the button is executed. + + + +MooEditable.UI.Button Method: enable {#MooEditable-UI-Button:enable} +-------------------------------------------------------------------- + +Enables the button. + +### Syntax: + + myMooEditableButton.enable(); + +### Returns: + +* (*object*) This MooEditable.UI.Button instance. + + + +MooEditable.UI.Button Method: disable {#MooEditable-UI-Button:disable} +---------------------------------------------------------------------- + +Disables the button. + +### Syntax: + + myMooEditableButton.disable(); + +### Returns: + +* (*object*) This MooEditable.UI.Button instance. + + + +MooEditable.UI.Button Method: activate {#MooEditable-UI-Button:activate} +------------------------------------------------------------------------ + +Activates the button. + +### Syntax: + + myMooEditableButton.activate(); + +### Returns: + +* (*object*) This MooEditable.UI.Button instance. + + + +MooEditable.UI.Button Method: deactivate {#MooEditable-UI-Button:deactivate} +---------------------------------------------------------------------------- + +Deactivates the button. + +### Syntax: + + myMooEditableButton.deactivate(); + +### Returns: + +* (*object*) This MooEditable.UI.Button instance. + + + +Class: MooEditable.UI.Dialog {#MooEditable-UI-Dialog} +===================================================== + +The dialog interface. + +### Implements: + +[Events][], [Options][] + + +MooEditable.UI.Dialog Method: constructor {#MooEditable-UI-Dialog:constructor} +------------------------------------------------------------------------------ + +### Syntax: + + var myMooEditableDialog = new MooEditable.UI.Dialog([options]); + +### Arguments: + +1. options - (*object*, optional) The options object. + +### Options: + +* class - (*string*: defaults to null) The class name of the dialog. +* contentClass - (*string*: defaults to null) The class name of the dialog content. + +### Events: + +* open - Executed when the dialog is opened. +* close - Executed when the dialog is closed. + + + +MooEditable.UI.Dialog Method: open {#MooEditable-UI-Dialog:open} +---------------------------------------------------------------- + +Opens the dialog. + +### Syntax: + + myMooEditableDialog.open(); + +### Returns: + +* (*object*) This MooEditable.UI.Dialog instance. + + + +MooEditable.UI.Dialog Method: close {#MooEditable-UI-Dialog:close} +------------------------------------------------------------------ + +Closes the dialog. + +### Syntax: + + myMooEditableDialog.close(); + +### Returns: + +* (*object*) This MooEditable.UI.Dialog instance. + + + +Function: MooEditable.UI.AlertDialog {#MooEditable-UI-AlertDialog} +================================================================== + +The alert dialog interface. Replacement for `alert()`. + +### Syntax: + + var myMooEditableAlertDialog = MooEditable.UI.AlertDialog(text); + +### Arguments: + +1. text - (*string*) A string to be shown on the alert dialog. + + + +Function: MooEditable.UI.PromptDialog {#MooEditable-UI-PromptDialog} +================================================================== + +The prompt dialog interface. Replacement for `prompt()`. + +### Syntax: + + var myMooEditablePromptDialog = MooEditable.UI.PromptDialog(question[, answer, fn]); + +### Arguments: + +1. question - (*string*) A string to be shown as the question on the prompt dialog. +2. answer - (*string*, optional) A string to be shown in the answer field on the prompt dialog. +3. fn - (*function*, optional) Executed when the OK button of the prompt dialog is clicked. + + + +Hash: MooEditable.Actions {#MooEditable-Actions} +================================================ + +This Hash contains the objects that specifies all 'actions' for the editor. The list of actions are: + +* bold +* italic +* underline +* strikethrough +* insertunorderedlist +* insertorderedlist +* indent +* outdent +* undo +* redo +* unlink +* createlink +* urlimage +* toggleview + + + +Native: Element {#Element} +================================================ + +Custom Native to allow all of its methods to be used with any DOM element via the dollar function [$][]. + +Element Method: mooEditable {#Element:mooEditable} +-------------------------------------------------- + +Initializes the MooEditable instance on the element. + +### Syntax: + + var myMooEditable = myElement.mooEditable([options]); + +### Arguments: + +* options - (*object*, optional) See [MooEditable](#MooEditable) for acceptable options. + +### Returns: + +* (*object*) The MooEditable instance that was created. + +### Examples: + + var myMooEditable = $('myElement').mooEditable({ + onRender: function(){ + alert('Done rendering.'); + } + }); + +### See Also: + +* [MooEditable](#MooEditable) + + + +[$]: http://mootools.net/docs/Element/Element/#dollar +[Events]: http://mootools.net/docs/Class/Class.Extras#Events [Options]: http://mootools.net/docs/Class/Class.Extras#Options \ No newline at end of file diff --git a/README.md b/README.md index 4f3e1df..f2852b7 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ MooEditable A simple web-based WYSIWYG editor, written in [MooTools](http://mootools.net/). - + Features -------- @@ -13,6 +13,8 @@ Features * Tango icons * Lightweight * Works in [A-graded desktop web browsers](http://developer.yahoo.com/yui/articles/gbs/) +* Resizeable (XY, X or Y direction) +* Statusbar with HTML-Path and word-/character counter How to Use ---------- diff --git a/Source/Locale/Locale.de-DE.MooEditable.js b/Source/Locale/Locale.de-DE.MooEditable.js index bfb04e0..86a398f 100644 --- a/Source/Locale/Locale.de-DE.MooEditable.js +++ b/Source/Locale/Locale.de-DE.MooEditable.js @@ -1,124 +1,129 @@ -/* ---- - -name: Locale.de-DE.MooEditable - -description: MooEditable messages for German. - -license: MIT-style license - -authors: -- André Fiedler\s*
\s*<\/p>/gi, '
\u00a0
'); - source = source.replace(/( |\s)*<\/p>/gi, '
\u00a0
'); - if (!this.options.semantics){ - source = source.replace(/\s*$1
$1
'); - } - - //tags around a list will get moved to after the list - if (!Browser.ie){ - //not working properly in safari? - source = source.replace(/
[\s\n]*(<(?:ul|ol)>.*?<\/(?:ul|ol)>)(.*?)<\/p>/ig, '$1
$2
'); - source = source.replace(/<\/(ol|ul)>\s*(?!<(?:p|ol|ul|img).*?>)((?:<[^>]*>)?\w.*)$/g, '$1>$2
'); - } - - source = source.replace(/\s*(]+>)\s*<\/p>/ig, '$1\n'); // if a
only contains , remove the
tags - - //format the source - source = source.replace(/
]*)>(.*?)<\/p>(?!\n)/g, '
$2
\n'); // break after paragraphs - source = source.replace(/<\/(ul|ol|p)>(?!\n)/g, '$1>\n'); // break after tags - source = source.replace(/>tags and empty
tags - source = source.replace(/
(?:\s*)
/g, '
'); - source = source.replace(/<\/p>\s*<\/p>/g, '
'); - - // Replace automatically added by some browsers
- source = source.replace(/]*>.*?<\/pre>/gi, function(match){
- return match.replace(/
/gi, '\n');
- });
-
- // Final trim
- source = source.trim();
- }
- while (source != oSource);
-
- return source;
- }
-
-});
-
-MooEditable.Selection = new Class({
-
- initialize: function(win){
- this.win = win;
- },
-
- getSelection: function(){
- this.win.focus();
- return (this.win.getSelection) ? this.win.getSelection() : this.win.document.selection;
- },
-
- getRange: function(){
- var s = this.getSelection();
-
- if (!s) return null;
-
- try {
- return s.rangeCount > 0 ? s.getRangeAt(0) : (s.createRange ? s.createRange() : null);
- } catch(e) {
- // IE bug when used in frameset
- return this.doc.body.createTextRange();
- }
- },
-
- setRange: function(range){
- if (range.select){
- Function.attempt(function(){
- range.select();
- });
- } else {
- var s = this.getSelection();
- if (s.addRange){
- s.removeAllRanges();
- s.addRange(range);
- }
- }
- },
-
- selectNode: function(node, collapse){
- var r = this.getRange();
- var s = this.getSelection();
-
- if (r.moveToElementText){
- Function.attempt(function(){
- r.moveToElementText(node);
- r.select();
- });
- } else if (s.addRange){
- collapse ? r.selectNodeContents(node) : r.selectNode(node);
- s.removeAllRanges();
- s.addRange(r);
- } else {
- s.setBaseAndExtent(node, 0, node, 1);
- }
-
- return node;
- },
-
- isCollapsed: function(){
- var r = this.getRange();
- if (r.item) return false;
- return r.boundingWidth == 0 || this.getSelection().isCollapsed;
- },
-
- collapse: function(toStart){
- var r = this.getRange();
- var s = this.getSelection();
-
- if (r.select){
- r.collapse(toStart);
- r.select();
- } else {
- toStart ? s.collapseToStart() : s.collapseToEnd();
- }
- },
-
- getContent: function(){
- var r = this.getRange();
- var body = new Element('body');
-
- if (this.isCollapsed()) return '';
-
- if (r.cloneContents){
- body.appendChild(r.cloneContents());
- } else if (r.item != undefined || r.htmlText != undefined){
- body.set('html', r.item ? r.item(0).outerHTML : r.htmlText);
- } else {
- body.set('html', r.toString());
- }
-
- var content = body.get('html');
- return content;
- },
-
- getText : function(){
- var r = this.getRange();
- var s = this.getSelection();
- return this.isCollapsed() ? '' : r.text || (s.toString ? s.toString() : '');
- },
-
- getNode: function(){
- var r = this.getRange();
-
- if (!Browser.ie || Browser.version >= 9){
- var el = null;
-
- if (r){
- el = r.commonAncestorContainer;
-
- // Handle selection a image or other control like element such as anchors
- if (!r.collapsed)
- if (r.startContainer == r.endContainer)
- if (r.startOffset - r.endOffset < 2)
- if (r.startContainer.hasChildNodes())
- el = r.startContainer.childNodes[r.startOffset];
-
- while (typeOf(el) != 'element') el = el.parentNode;
- }
-
- return document.id(el);
- }
-
- return document.id(r.item ? r.item(0) : r.parentElement());
- },
-
- insertContent: function(content){
- if (Browser.ie){
- var r = this.getRange();
- if (r.pasteHTML){
- r.pasteHTML(content);
- r.collapse(false);
- r.select();
- } else if (r.insertNode){
- r.deleteContents();
- if (r.createContextualFragment){
- r.insertNode(r.createContextualFragment(content));
- } else {
- var doc = this.win.document;
- var fragment = doc.createDocumentFragment();
- var temp = doc.createElement('div');
- fragment.appendChild(temp);
- temp.outerHTML = content;
- r.insertNode(fragment);
- }
- }
- } else {
- this.win.document.execCommand('insertHTML', false, content);
- }
- }
-
-});
-
-// Avoiding Locale dependency
-// Wrapper functions to be used internally and for plugins, defaults to en-US
-var phrases = {};
-MooEditable.Locale = {
-
- define: function(key, value){
- if (typeOf(window.Locale) != 'null') return Locale.define('en-US', 'MooEditable', key, value);
- if (typeOf(key) == 'object') Object.merge(phrases, key);
- else phrases[key] = value;
- },
-
- get: function(key){
- if (typeOf(window.Locale) != 'null') return Locale.get('MooEditable.' + key);
- return key ? phrases[key] : '';
- }
-
-};
-
-MooEditable.Locale.define({
- ok: 'OK',
- cancel: 'Cancel',
- bold: 'Bold',
- italic: 'Italic',
- underline: 'Underline',
- strikethrough: 'Strikethrough',
- unorderedList: 'Unordered List',
- orderedList: 'Ordered List',
- indent: 'Indent',
- outdent: 'Outdent',
- undo: 'Undo',
- redo: 'Redo',
- removeHyperlink: 'Remove Hyperlink',
- addHyperlink: 'Add Hyperlink',
- selectTextHyperlink: 'Please select the text you wish to hyperlink.',
- enterURL: 'Enter URL',
- enterImageURL: 'Enter image URL',
- addImage: 'Add Image',
- toggleView: 'Toggle View'
-});
-
-MooEditable.UI = {};
-
-MooEditable.UI.Toolbar= new Class({
-
- Implements: [Events, Options],
-
- options: {
- /*
- onItemAction: function(){},
- */
- 'class': ''
- },
-
- initialize: function(options){
- this.setOptions(options);
- this.el = new Element('div', {'class': 'mooeditable-ui-toolbar ' + this.options['class']});
- this.items = {};
- this.content = null;
- },
-
- toElement: function(){
- return this.el;
- },
-
- render: function(actions){
- if (this.content){
- this.el.adopt(this.content);
- } else {
- this.content = actions.map(function(action){
- if (action == '|') {
- return this.addSeparator();
- }
- else if (action == '/') {
- return this.addLineSeparator();
- }
- return this.addItem(action);
- }.bind(this));
- }
- return this;
- },
-
- addItem: function(action){
- var self = this;
- var act = MooEditable.Actions[action];
- if (!act) return;
- var type = act.type || 'button';
- var options = act.options || {};
- var item = new MooEditable.UI[type.camelCase().capitalize()](Object.append(options, {
- name: action,
- 'class': action + '-item toolbar-item',
- title: act.title,
- onAction: self.itemAction.bind(self)
- }));
- this.items[action] = item;
- document.id(item).inject(this.el);
- return item;
- },
-
- getItem: function(action){
- return this.items[action];
- },
-
- addSeparator: function(){
- return new Element('span.toolbar-separator').inject(this.el);
- },
-
- addLineSeparator: function(){
- return new Element('div.toolbar-line-separator').inject(this.el);
- },
-
- itemAction: function(){
- this.fireEvent('itemAction', arguments);
- },
-
- disable: function(except){
- Object.each(this.items, function(item){
- (item.name == except) ? item.activate() : item.deactivate().disable();
- });
- return this;
- },
-
- enable: function(){
- Object.each(this.items, function(item){
- item.enable();
- });
- return this;
- },
-
- show: function(){
- this.el.setStyle('display', '');
- return this;
- },
-
- hide: function(){
- this.el.setStyle('display', 'none');
- return this;
- }
-
-});
-
-MooEditable.UI.Button = new Class({
-
- Implements: [Events, Options],
-
- options: {
- /*
- onAction: function(){},
- */
- title: '',
- name: '',
- text: 'Button',
- 'class': '',
- shortcut: '',
- mode: 'icon'
- },
-
- initialize: function(options){
- this.setOptions(options);
- this.name = this.options.name;
- this.render();
- },
-
- toElement: function(){
- return this.el;
- },
-
- render: function(){
- var self = this;
- var key = (Browser.Platform.mac) ? 'Cmd' : 'Ctrl';
- var shortcut = (this.options.shortcut) ? ' ( ' + key + '+' + this.options.shortcut.toUpperCase() + ' )' : '';
- var text = this.options.title || name;
- var title = text + shortcut;
- this.el = new Element('button', {
- 'class': 'mooeditable-ui-button ' + self.options['class'],
- title: title,
- html: '',
- events: {
- click: self.click.bind(self),
- mousedown: function(e){ e.preventDefault(); }
- }
- });
- if (this.options.mode != 'icon') this.el.addClass('mooeditable-ui-button-' + this.options.mode);
-
- this.active = false;
- this.disabled = false;
-
- // add hover effect for IE
- if (Browser.ie) this.el.addEvents({
- mouseenter: function(e){ this.addClass('hover'); },
- mouseleave: function(e){ this.removeClass('hover'); }
- });
-
- return this;
- },
-
- click: function(e){
- e.preventDefault();
- if (this.disabled) return;
- this.action(e);
- },
-
- action: function(){
- this.fireEvent('action', [this].concat(Array.from(arguments)));
- },
-
- enable: function(){
- if (this.active) this.el.removeClass('onActive');
- if (!this.disabled) return;
- this.disabled = false;
- this.el.removeClass('disabled').set({
- disabled: false,
- opacity: 1
- });
- return this;
- },
-
- disable: function(){
- if (this.disabled) return;
- this.disabled = true;
- this.el.addClass('disabled').set({
- disabled: true,
- opacity: 0.4
- });
- return this;
- },
-
- activate: function(){
- if (this.disabled) return;
- this.active = true;
- this.el.addClass('onActive');
- return this;
- },
-
- deactivate: function(){
- this.active = false;
- this.el.removeClass('onActive');
- return this;
- }
-
-});
-
-MooEditable.UI.Dialog = new Class({
-
- Implements: [Events, Options],
-
- options:{
- /*
- onOpen: function(){},
- onClose: function(){},
- */
- 'class': '',
- contentClass: ''
- },
-
- initialize: function(html, options){
- this.setOptions(options);
- this.html = html;
-
- var self = this;
- this.el = new Element('div', {
- 'class': 'mooeditable-ui-dialog ' + self.options['class'],
- html: '',
- styles: {
- 'display': 'none'
- },
- events: {
- click: self.click.bind(self)
- }
- });
- },
-
- toElement: function(){
- return this.el;
- },
-
- click: function(){
- this.fireEvent('click', arguments);
- return this;
- },
-
- open: function(){
- this.el.setStyle('display', '');
- this.fireEvent('open', this);
- return this;
- },
-
- close: function(){
- this.el.setStyle('display', 'none');
- this.fireEvent('close', this);
- return this;
- }
-
-});
-
-MooEditable.UI.AlertDialog = function(alertText){
- if (!alertText) return;
- var html = alertText + ' ';
- return new MooEditable.UI.Dialog(html, {
- 'class': 'mooeditable-alert-dialog',
- onOpen: function(){
- var button = this.el.getElement('.dialog-ok-button');
- (function(){
- button.focus();
- }).delay(10);
- },
- onClick: function(e){
- e.preventDefault();
- if (e.target.tagName.toLowerCase() != 'button') return;
- if (document.id(e.target).hasClass('dialog-ok-button')) this.close();
- }
- });
-};
-
-MooEditable.UI.PromptDialog = function(questionText, answerText, fn){
- if (!questionText) return;
- var html = ' '
- + '';
- return new MooEditable.UI.Dialog(html, {
- 'class': 'mooeditable-prompt-dialog',
- onOpen: function(){
- var input = this.el.getElement('.dialog-input');
- (function(){
- input.focus();
- input.select();
- }).delay(10);
- },
- onClick: function(e){
- e.preventDefault();
- if (e.target.tagName.toLowerCase() != 'button') return;
- var button = document.id(e.target);
- var input = this.el.getElement('.dialog-input');
- if (button.hasClass('dialog-cancel-button')){
- input.set('value', answerText);
- this.close();
- } else if (button.hasClass('dialog-ok-button')){
- var answer = input.get('value');
- input.set('value', answerText);
- this.close();
- if (fn) fn.attempt(answer, this);
- }
- }
- });
-};
-
-MooEditable.Actions = {
-
- bold: {
- title: MooEditable.Locale.get('bold'),
- options: {
- shortcut: 'b'
- },
- states: {
- tags: ['b', 'strong'],
- css: {'font-weight': 'bold'}
- },
- events: {
- beforeToggleView: function(){
- if(Browser.firefox){
- var value = this.textarea.get('value');
- var newValue = value.replace(/]*)>/gi, '').replace(/<\/strong>/gi, '');
- if (value != newValue) this.textarea.set('value', newValue);
- }
- },
- attach: function(){
- if(Browser.firefox){
- var value = this.textarea.get('value');
- var newValue = value.replace(/]*)>/gi, '').replace(/<\/strong>/gi, '');
- if (value != newValue){
- this.textarea.set('value', newValue);
- this.setContent(newValue);
- }
- }
- }
- }
- },
-
- italic: {
- title: MooEditable.Locale.get('italic'),
- options: {
- shortcut: 'i'
- },
- states: {
- tags: ['i', 'em'],
- css: {'font-style': 'italic'}
- },
- events: {
- beforeToggleView: function(){
- if (Browser.firefox){
- var value = this.textarea.get('value');
- var newValue = value.replace(/