All Projects → typecode → typester

typecode / typester

Licence: other
✒️ A WYSIWYG that gives you predictable and clean HTML

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects
shell
77523 projects

Projects that are alternatives of or similar to typester

bangle.dev
Collection of higher level rich text editing tools. It powers the local only note taking app https://bangle.io
Stars: ✭ 541 (+1765.52%)
Mutual labels:  wysiwyg, text-editor, rich-text-editor, wysiwyg-editor
Wysiwyg.js
wysiwyg contenteditable editor (minified+compression: 6kb)
Stars: ✭ 520 (+1693.1%)
Mutual labels:  wysiwyg, text-editor, rich-text-editor, wysiwyg-editor
Angular Froala Wysiwyg
Angular 4, 5, 6, 7, 8 and 9 plugin for Froala WYSIWYG HTML Rich Text Editor.
Stars: ✭ 696 (+2300%)
Mutual labels:  wysiwyg, text-editor, rich-text-editor, wysiwyg-editor
Pell
📝 the simplest and smallest WYSIWYG text editor for web, with no dependencies
Stars: ✭ 11,653 (+40082.76%)
Mutual labels:  wysiwyg, text-editor, rich-text-editor, wysiwyg-editor
am-editor
A rich text collaborative editor framework that can use React and Vue custom plug-ins. 一个富文本实时协同编辑器框架,可以使用React和Vue自定义插件。
Stars: ✭ 542 (+1768.97%)
Mutual labels:  wysiwyg, text-editor, rich-text-editor, wysiwyg-editor
Flutter Quill
Rich text editor for Flutter
Stars: ✭ 177 (+510.34%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor
Ng Quill
AngularJS Component for Quill rich text editor
Stars: ✭ 223 (+668.97%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor
wysihtml5-rails
A wysiwyg text editor for use in the Rails asset pipeline
Stars: ✭ 28 (-3.45%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor
Textbus
基于组件 + 数据驱动的现代富文本编辑器
Stars: ✭ 242 (+734.48%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor
Medium Editor
Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.
Stars: ✭ 15,421 (+53075.86%)
Mutual labels:  wysiwyg, rich-text-editor, medium-editor
cazary
jQuery plugin of WYSIWYG editor that aims for fast, lightweight, stylish, customizable, cross-browser, and multi-language.
Stars: ✭ 12 (-58.62%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor
svelte-slate
slate svelte view layer
Stars: ✭ 43 (+48.28%)
Mutual labels:  wysiwyg, text-editor, wysiwyg-editor
wysiwyg-editor-php-sdk
PHP SDK to ease the integration of Froala WYSIWYG Editor on server side.
Stars: ✭ 37 (+27.59%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor
iOS-HTMLTextEditor
A simple implementation of an HTML Editor using CKEditor in a web view.
Stars: ✭ 57 (+96.55%)
Mutual labels:  wysiwyg, rich-text-editor, html-editor
Awesome Wysiwyg
A curated list of awesome WYSIWYG editors.
Stars: ✭ 1,801 (+6110.34%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor
Canner Slate Editor
📝Rich Text / WYSIWYG Editor built for Modularity and Extensibility.
Stars: ✭ 1,071 (+3593.1%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor
ember-pell
Ember addon for simplest and smallest (1kB) WYSIWYG text editor for web, with no dependencies
Stars: ✭ 56 (+93.1%)
Mutual labels:  wysiwyg, text-editor, rich-text-editor
ngx-wall
Helps build content editor for note-taking application
Stars: ✭ 78 (+168.97%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor
Jodit
Jodit - Best WYSIWYG Editor for You
Stars: ✭ 947 (+3165.52%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor
Megadraft
Megadraft is a Rich Text editor built on top of Facebook's Draft.JS featuring a nice default base of components and extensibility
Stars: ✭ 982 (+3286.21%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor

Typester (typecode.github.io/typester)

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.

  • Single file import (batteries included): No need to import separate stylesheets and additional dependencies. Typester comes with everything it needs rolled into one JS file.
  • Engineered for modern JS modules Typester has been created using ES6+ JavaScript module patterns which means you need only import it and instantiate it. If you still prefer <script> imports that's fine too Typester will bind itself to the global scope allowing you to new window.Typester({ /* options */ }).
  • Minimal DOM footprint It wont clutter your beautifully laid out markup with multiple DOM injections for each editor instance. Need multiple editors on a single page? No problem, typester will inject single instances of its DOM requirements which will be shared between the editors.
  • Pure XSS-free DOM powered by DOMPurify Typester, thanks to the awesome power of DOMPurify, will make sure that the HTML you receive is sanitized against XSS exploits.

Try out the DEMO


Installation

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

Usage

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();

Configuration

You can configure the formatters available for a specific typester instance in two ways:

  1. When you instatiate a Typester instance via the custom configs option:
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)'
          }
        }
    }
});
  1. By using a data attribute on the editable container
<div contenteditable='true' data-toolbar-buttons='["bold", "italic", "h1", "h2", "orderedlist", "unorderedlist", "quote", "link"]'></div>

The options available for the toolbar buttons are:

  • Inline formatters: bold, italic
  • Headers: h1, h2, h3, h4, h5, h6
  • Lists: orderedlist, unorderedlist
  • Blockquotes: quote
  • Links: link

License

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.


Contributing

If you want to contribute to this project we welcome your input.

You can either:

  • Submit an issue / feature request which would help us greatly in figuring out what all this package needs to do
  • Resolve an already listed issue
  • Submit a tweak or new feature

Submit an issue / feature request

Please feel free to head over the our Issues page and submit your issue / feature request.

Resolve an issue / submit a tweak or new feature

  1. Fork this repo
    1. See below for instructions on how to setup local dev
  2. Create your feature branch (git checkout -b new-awesome-feature)
  3. Make sure all tests pass
    1. If you have added a new feature, make sure there is a test for it
    2. Run the following: ~> yarn test_unit (for unit tests) & ~>yarn test_e2e (end-to-end tests)
    3. If you have changed the codebase in a way that requires the tests to be updated please do so.
  4. Update the documentation if you've added any publicly accessible methods or options.
  5. Commit your changes as you would usually (git add -i, add changes, git commit -m "Succinct description of change")
  6. Push to your feature branch (git push origin new-awesome-feature)
  7. Create a new pull request.

Setup local dev environment

Install all the node modules

~> yarn

Run build scripts

For a one time build

~> yarn build

For a continuous reactive build that watches for changes

~> yarn watch

Run the dev server

~> yarn dev-server

You should then be able to navigate your browser to:

http://localhost:9000

Run the tests

Make sure you build first

Unit tests (Karma & Jasmine)

~> yarn test_unit

e2e tests (nightwatch)

~> yarn test_e2e

all tests (unit & e2e)

~> yarn test

Build and read the developer docs

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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].