yabwe / medium-editor

If you would be interested in helping to maintain one of the most successful WYSIWYG text editors on github, let us know! (See issue #1503) MediumEditor This is a clone of medium.com inline editor toolbar. MediumEditor has been written using vanilla JavaScript, no additional frameworks required. Browser Support Basic usage Demo __demo__: http://yabwe.github.io/medium-editor/ Installation **Via npm:** Run in your console: **Via bower:** **Via an external CDN** • Using jsDelivr. For the latest version: For a custom one: • Using CDNJS. **Manual installation:** Download the latest release and attach medium editor's stylesheets to your page: Find the files to below mentioned linking in the dist folder. (./medium-editor/dist/...) Usage The next step is to reference the editor's script You can now instantiate a new MediumEditor object: The above code will transform all the elements with the .editable class into HTML5 editable contents and add the medium editor toolbar to them. You can also pass a list of HTML elements: MediumEditor also supports textarea. If you provide a textarea element, the script will create a new div with , hide the textarea and link the textarea value to the div HTML content. Integrating with various frameworks People have contributed wrappers around MediumEditor for integrating with different frameworks and tech stacks. Take a look at the list of existing Wrappers and Integrations that have already been written for MediumEditor! MediumEditor Options View the MediumEditor Options documentation on all the various options for MediumEditor. Options to customize medium-editor are passed as the second argument to the MediumEditor constructor. Example: Core options • __activeButtonClass__: CSS class added to active buttons in the toolbar. Default: • __buttonLabels__: type of labels on the buttons. Values: | 'fontawesome'. Default: NOTE: Using as the buttonLabels requires version 4.1.0 of the fontawesome css to be on the page to ensure all icons will be displayed correctly • __delay__: time in milliseconds to show the toolbar or anchor tag preview. Default: • __disableReturn__: enables/disables the use of the return-key. You can also set specific element behavior by using setting a data-disable-return attribute. Default: • __disableDoubleReturn__: allows/disallows two (or more) empty new lines. You can also set specific element behavior by using setting a data-disable-double-return attribute. Default: • __disableExtraSpaces__: when set to true, it disallows spaces at the beginning and end of the element. Also it disallows entering 2 consecutive spaces between 2 words. Default: • __disableEditing__: enables/disables adding the contenteditable behavior. Useful for using the toolbar with customized buttons/actions. You can also set specific element behavior by using setting a data-disable-editing attribute. Default: • __elementsContainer__: specifies a DOM node to contain MediumEditor's toolbar and anchor preview elements. Default: • __extensions__: extension to use (see Custom Buttons and Extensions) for more. Default: • __spellcheck__: Enable/disable native contentEditable automatic spellcheck. Default: • __targetBlank__: enables/disables target="\_blank" for anchor tags. Default: Toolbar options The toolbar for MediumEditor is implemented as a built-in extension which automatically displays whenever the user selects some text. The toolbar can hold any set of defined built-in buttons, but can also hold any custom buttons passed in as extensions. Options for the toolbar are passed as an object that is a member of the outer options object. Example: • __allowMultiParagraphSelection__: enables/disables whether the toolbar should be displayed when selecting multiple paragraphs/block elements. Default: • __buttons__: the set of buttons to display on the toolbar. Default: • See Button Options for details on more button options • __diffLeft__: value in pixels to be added to the X axis positioning of the toolbar. Default: • __diffTop__: value in pixels to be added to the Y axis positioning of the toolbar. Default: • __firstButtonClass__: CSS class added to the first button in the toolbar. Default: • __lastButtonClass__: CSS class added to the last button in the toolbar. Default: • __relativeContainer__: DOMElement to append the toolbar to instead of the body. When passed, the toolbar will also be positioned instead of . Default: • __standardizeSelectionStart__: enables/disables standardizing how the beginning of a range is decided between browsers whenever the selected text is analyzed for updating toolbar buttons status. Default: • __static__: enable/disable the toolbar always displaying in the same location relative to the medium-editor element. Default: Options which only apply when the option is being used: • __align__: | | - When the __static__ option is , this aligns the static toolbar relative to the medium-editor element. Default: • __sticky__: When the __static__ option is , this enables/disables the toolbar "sticking" to the viewport and staying visible on the screen while the page scrolls. Default: • __updateOnEmptySelection__: When the __static__ option is , this enables/disables updating the state of the toolbar buttons even when the selection is collapsed (there is no selection, just a cursor). Default: To disable the toolbar (which also disables the anchor-preview extension), set the value of the option to : Button Options Button behavior can be modified by passing an object into the buttons array instead of a string. This allow for overriding some of the default behavior of buttons. The following options are some of the basic parts of buttons that you may override, but any part of the can be overridden via these button options. (Check out the source code for buttons to see what all can be overridden). • __name__: name of the button being overridden • __action__: argument to pass to when the button is clicked. • __aria__: value to add…