Loading repository data…
yabwe / repository
Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
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)
This is a clone of medium.com inline editor toolbar.
MediumEditor has been written using vanilla JavaScript, no additional frameworks required.
demo: http://yabwe.github.io/medium-editor/
Via npm:
Run in your console: npm install medium-editor
Via bower:
bower install medium-editor
Via an external CDN
For the latest version:
<script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
For a custom one:
<script src="//cdn.jsdelivr.net/npm/medium-editor@5.23.2/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@5.23.2/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
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/...)
<link rel="stylesheet" href="css/medium-editor.css"> <!-- Core -->
<link rel="stylesheet" href="css/themes/default.css"> <!-- or any other theme -->
The next step is to reference the editor's script
<script src="js/medium-editor.js"></script>
You can now instantiate a new MediumEditor object:
<script>var editor = new MediumEditor('.editable');</script>
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:
var elements = document.querySelectorAll('.editable'),
editor = new MediumEditor(elements);
MediumEditor also supports textarea. If you provide a textarea element, the script will create a new div with contentEditable=true, hide the textarea and link the textarea value to the div HTML content.
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!
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:
var editor = new MediumEditor('.editor', {
// options go here
});
'medium-editor-button-active'false | 'fontawesome'. Default: falseUsing 'fontawesome' 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
0falsefalsefalsefalsedocument.body{}truefalseThe 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:
var editor = new MediumEditor('.editable', {
toolbar: {
/* These are the default options for the toolbar,
if nothing is passed this is what is used */
allowMultiParagraphSelection: true,
buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote'],
diffLeft: 0,
diffTop: -10,
firstButtonClass: 'medium-editor-button-first',
lastButtonClass: 'medium-editor-button-last',
relativeContainer: null,
standardizeSelectionStart: false,
static: false,
/* options which only apply when static is true */
align: 'center',
sticky: false,
updateOnEmptySelection: false
}
});
true['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote']
0-10'medium-editor-button-first''medium-editor-button-last'relative instead of absolute. Default: nullfalsefalsestatic option is being used:left|center|right - When the static option is true, this aligns the static toolbar relative to the medium-editor element. Default: centertrue, this enables/disables the toolbar "sticking" to the viewport and staying visible on the screen while the page scrolls. Default: falsetrue, this enables/disables updating the state of the toolbar buttons even when the selection is collapsed (there is no selection, just a cursor). Default: falseTo disable the toolbar (which also disables the anchor-preview extension), set the value of the toolbar option to false:
var editor = new MediumEditor('.editable', {
toolbar: false
});
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 MediumEditor.Extension.prototype can be overridden via these button options. (Check out the source code for buttons to see what all can be overridden).
MediumEditor.execAction() when the button is clicked.<b> or <strong> tag that indicates the text is already bold. So the array of tagNames for bold would be: ['b', 'strong']useQueryState is set to true.'font-weight' style property set to 700 or 'bold', that indicates the text is already bold. So the style object for bold would be { prop: 'font-weight', value: '700|bold' }useQueryState is set to true.'|')document.queryCommandState() method to determine whether the action has already been applied. If the action has already been applied, the button will be displayed as 'active' in the toolbar
document.queryCommandState('bold') which will return true ifSelected from shared topics, language and repository description—not editorial ratings.
sadra /
Medium.com WYSIWYG editor clone, with RTL support.
38/100 health