A simple to use WYSIWYG text editor inspired by Medium and Medium Editor that gives you clean and predictable HTML from your user's input.
new window.Typester({ /* options */ })
.Right now Typester is only available via npm. We may look into offering CDN hosted options and/or downloadable and self-hostable options. But, for now, you can:
npm install typester-editor
or for the yarn folks:
yarn add typester-editor --save
Setting up Typester on your page is as easy as:
import Typester from 'typester-editor'
const typesterInstance = new Typester({ el: document.querySelector('[contenteditable]') }) // Where document.querySelector(...) is a single DOM element.
// If you need to tear down for any reason:
typesterInstance.destroy();
You can configure the formatters available for a specific typester instance in two ways:
new Typester({
el: document.querySelector('[contenteditable]'),
configs: {
toolbar: {
buttons: ['bold', 'italic', 'h1', 'h2', 'orderedlist', 'unorderedlist', 'quote', 'link']
},
styles: {
colors: {
flyoutBg: 'rgb(32, 31, 32)',
menuItemIcon: 'rgb(255, 255, 255)',
menuItemHover: 'rgb(0, 174, 239)',
menuItemActive: 'rgb(0, 156, 215)'
}
}
}
});
<div contenteditable='true' data-toolbar-buttons='["bold", "italic", "h1", "h2", "orderedlist", "unorderedlist", "quote", "link"]'></div>
The options available for the toolbar buttons are:
bold
, italic
h1
, h2
, h3
, h4
, h5
, h6
orderedlist
, unorderedlist
quote
link
Typester is released under the MIT license.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
If you want to contribute to this project we welcome your input.
You can either:
Please feel free to head over the our Issues page and submit your issue / feature request.
git checkout -b new-awesome-feature
)~> yarn test_unit
(for unit tests) & ~>yarn test_e2e
(end-to-end tests)git add -i
, add changes, git commit -m "Succinct description of change"
)git push origin new-awesome-feature
)Install all the node modules
~> yarn
For a one time build
~> yarn build
For a continuous reactive build that watches for changes
~> yarn watch
~> yarn dev-server
You should then be able to navigate your browser to:
http://localhost:9000
Make sure you build first
Unit tests (Karma & Jasmine)
~> yarn test_unit
e2e tests (nightwatch)
~> yarn test_e2e
all tests (unit & e2e)
~> yarn test
For a once off build:
~> yarn docs
For a continuous file change reactive build
~> yarn docs_watch
Then, to read the docs:
~> yarn docs_server
And point you browser to:
http://localhost:9001