medium-editor
Advanced tools
This is a clone of medium.com inline editor toolbar.
MediumEditor has been written using vanilla JavaScript, no additional frameworks required.
demo: http://daviferreira.github.io/medium-editor/
Via npm:
Run in your console: npm install medium-editor
Via bower:
bower install medium-editor
Manual installation:
Download the latest release and attach medium editor's stylesheets to your page:
<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.
data-disable-toolbar attribute) the anchor preview is always disabled so this option will be ignored. Default: false['bold', 'italic', 'underline', 'anchor', 'header1', 'header2', 'quote']{'bold': '<b>b</b>', 'italic': '<i>i</i>'}. Default: falsedata-disable-toolbar attribute. Default: falseleft|center|right - when using the staticToolbar option, this aligns the static toolbar relative to the medium-editor element. Default: centertarget attribute of the created link. Default: falseOptions for paste are passed as an object that is a member of the outer options object. Example:
var editor = new MediumEditor('.editable', {
buttons: ['bold', 'italic', 'quote'],
paste: {
// This example includes the default options for paste, if nothing is passed this is what it used
forcePlainText: true,
cleanPastedHTML: false,
cleanReplacements: [],
cleanAttrs: ['class', 'style', 'dir'],
cleanTags: ['meta']
}
});
true OR when calling cleanPaste(text) helper method. Default: []true or when calling cleanPaste(text) or pasteHTML(html,options) helper methods. Default: ['class', 'style', 'dir']true or when calling cleanPaste(text) or pasteHTML(html,options) helper methods. Default: ['meta']var editor = new MediumEditor('.editable', {
anchorInputPlaceholder: 'Type a link',
buttons: ['bold', 'italic', 'quote'],
diffLeft: 25,
diffTop: 10,
firstHeader: 'h1',
secondHeader: 'h2',
delay: 1000,
targetBlank: true,
paste: {
cleanPastedHTML: true,
cleanAttrs: ['style', 'dir'],
cleanTags: ['label', 'meta']
}
});
Medium Editor, by default, will show only the buttons listed above to avoid a huge toolbar. There are a few extra buttons you can use:
Check out the Wiki page for a list of available themes: https://github.com/daviferreira/medium-editor/wiki/Themes
document.execCommanddocument.execCommand('createLink') commandsaveSelection() was calledon()delay optionimportSelection()exportSelection())For observing any changes on contentEditable, use the custom 'editableInput' event exposed via the subscribe() method:
var editor = new MediumEditor('.editable');
editor.subscribe('editableInput', function (event, editable) {
// Do some work
});
This event is supported in all browsers supported by MediumEditor (including IE9+)! To help with cases when one instance of MediumEditor is monitoring multiple elements, the 2nd argument passed to the event handler (editable in the example above) will be a reference to the contenteditable element that has actually changed.
This is handy when you need to capture any modifications to the contenteditable element including:
Why is this interesting and why should you use this event instead of just attaching to the input event on the contenteditable element?
So for most modern browsers (Chrome, Firefox, Safari, etc.), the input event works just fine. Infact, editableInput is just a proxy for the input event in those browsers. However, the input event is not supported for contenteditable elements in IE 9-11.
So, to properly support the editableInput event in Internet Explorer, MediumEditor uses a combination of the selectionchange and keypress events, as well as monitoring calls to document.execCommand.
Check the documentation in order to learn how to develop extensions for MediumEditor.
A list of existing extensions and plugins, such as Images and Media embeds, Tables and Markdown can be found here.
MediumEditor development tasks are managed by Grunt. To install all the necessary packages, just invoke:
npm install
To run all the test and build the dist files for testing on demo pages, just invoke:
grunt
These are the other available grunt tasks:
The source files are located inside the src directory. Be sure to make changes to these files and not files in the dist directory.
git checkout -b my-new-feature)git commit -am 'Added some feature')git push origin my-new-feature)To help create consistent looking code throughout the project, we use a few tools to help us. They have plugins for most popular editors/IDEs to make coding for our project, but you should use them in your project as well!
We use JSHint on each build to find easy-to-catch errors and potential problems in our js. You can find our JSHint settings in the .jshintrc file in the root of the project.
We use jscs on each build to enforce some code style rules we have for our project. You can find our jscs settings in the .jscsrc file in the root of the project.
We use EditorConfig to maintain consistent coding styles between various editors and IDEs. You can find our settings in the .editorconfig file in the root of the project.
Looking for something simple for a first contribution? Try fixing an easy first bug!
https://github.com/daviferreira/medium-editor/graphs/contributors
MIT: https://github.com/daviferreira/medium-editor/blob/master/LICENSE
FAQs
Medium.com WYSIWYG editor clone.
The npm package medium-editor receives a total of 13,083 weekly downloads. As such, medium-editor popularity was classified as popular.
We found that medium-editor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.