
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
medium-editor
Advanced tools
This is a clone of medium.com inline editor toolbar.
Since I always had problems with bloated editors and I loved the simplicity of medium.com solution I've tried to implement their WYSIWYG approach with this script.
MediumEditor has been written using vanilla JavaScript, no additional frameworks required.
Tested on Google Chrome, Firefox and IE9+.
demo: http://daviferreira.github.io/medium-editor/
First, you need to attach medium editor's stylesheet to your page:
<link rel="stylesheet" href="css/medium-editor.css">
The next step is to reference the editor's script and instantiate a new MediumEditor object:
<script src="js/medium-editor.js"></script>
<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);
{'bold': '<b>b</b>', 'italic': '<i>i</i>'}
. Default: falseExample:
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
});
Medium Editor, by default, will show only the buttons listed above to avoid a huge toolbar. There are a couple of extra buttons you can use:
Check out the Wiki page for a list of available themes: https://github.com/daviferreira/medium-editor/wiki/Themes
Pavel Linkesch has developed a jQuery plugin to upload images following Medium.com functionality. Check it out at http://orthes.github.io/medium-editor-insert-plugin/
Thijs Wijnmaalen hacked together an AngularJS directive. Check it out at https://github.com/thijsw/angular-medium-editor
MediumEditor development tasks are managed by Grunt. To install all the necessary packages, just invoke:
npm install
These are the available grunt tasks:
The source files are located inside the src directory. MediumEditor stylesheet was created using sass/compass, make sure you have the compass gem installed on your system.
git checkout -b my-new-feature
)git commit -am 'Added some feature'
)git push origin my-new-feature
) project : medium-editor
repo age : 8 months
active : 82 days
commits : 354
files : 41
authors :
268 Davi Ferreira 75.7%
20 Maxime de Visscher 5.6%
8 Jarl Gunnar T. Flaten 2.3%
8 Derek Odegard 2.3%
8 Pedro Nasser 2.3%
4 Sebastian Zuchmanski 1.1%
4 minikomi 1.1%
3 Dmitri Cherniak 0.8%
3 arol 0.8%
3 Andrew Hubbs 0.8%
3 Troels Knak-Nielsen 0.8%
2 Nikita Korotaev 0.6%
1 Noah Paessel 0.3%
1 Pavel Linkesch 0.3%
1 Tom MacWright 0.3%
1 happyaccidents 0.3%
1 muescha 0.3%
1 t_kjaergaard 0.3%
1 typify 0.3%
1 Adam Mulligan 0.3%
1 waffleio 0.3%
1 Bitdeli Chef 0.3%
1 David Collien 0.3%
1 David Hellsing 0.3%
1 Denis Gorbachev 0.3%
1 Jeff Welch 0.3%
1 Mark Kraemer 0.3%
1 Max 0.3%
1 Maxime Dantec 0.3%
1 Maxime De Visscher 0.3%
1 Michael Kay 0.3%
1 Moore Adam 0.3%
"THE BEER-WARE LICENSE" (Revision 42):
As long as you retain this notice you can do whatever you want with this stuff. If we meet some day, and you think this stuff is worth it, you can buy me a beer in return.
FAQs
Medium.com WYSIWYG editor clone.
The npm package medium-editor receives a total of 16,738 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
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.