Description
Please do not submit issues/comments to this repo. Instead, submit it to
Although this is the original repository, we need the project to be tiny and
focused on the needs of the MindMup tool, which means that we do not want to
complicate it with all the various bits and pieces needed for other usages and
older browsers.
Meanwhile, Steve was kind enough to create a fork, backport it to older
browsers, extend and integrate all kinds of changes. Steve's fork does not need
to stay small, slim and focused, so please use his repo for all your needs if
this plugin does provide out of the box
bootstrap-wysiwyg alternatives and similar libraries
Based on the "Editors" category.
Alternatively, view bootstrap-wysiwyg alternatives based on common mentions on social networks and blogs.
-
quill
Quill is a modern WYSIWYG editor built for compatibility and extensibility. -
slate
A completely customizable framework for building rich text editors. (Currently in beta.) -
Quasar Framework
Quasar Framework - Build high-performance VueJS user interfaces in record time -
TOAST UI Editor
🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. -
medium-editor
Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution. -
TinyMCE
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular -
jsoneditor
A web-based tool to view, edit, format, and validate JSON -
CKEditor 5
Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing. -
SimpleMDE
A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking. -
wysihtml5
Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles. -
Froala Editor
The next generation Javascript WYSIWYG HTML Editor. -
bootstrap-wysihtml5
Simple, beautiful wysiwyg editor -
Trumbowyg
A lightweight and amazing WYSIWYG JavaScript editor under 10kB -
EpicEditor
EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more. For developers, it offers a robust API, can be easily themed, and allows you to swap out the bundled Markdown parser with anything you throw at it. -
ContentTools
A JS library for building WYSIWYG editors for HTML content. -
jquery-notebook
A modern, simple and elegant WYSIWYG rich text editor. -
React PDF viewer
A React component to view a PDF document -
Mobiledoc Kit
A toolkit for building WYSIWYG editors with Mobiledoc -
ckeditor-releases
Official distribution releases of CKEditor 4. -
Materio Free Vuetify VueJS Admin Template
Production Ready, Carefully Crafted, Extensive Vuetifty Free Admin Template 🤩 -
Monod
:notebook: Our cool, secure, and offline-first Markdown editor. -
raptor-editor
Raptor, an HTML5 WYSIWYG content editor! -
Bangle.dev
Collection of higher level rich text editing tools. It powers the local only note taking app https://bangle.io -
esprima
ECMAScript parsing infrastructure for multipurpose analysis -
Everright-formEditor
:guide_dog: Powerful lowcode|vue form editor,generator,designer,builder library. It provides an easy way to create custom forms. The project is extensible, easy to use and configure, and provides many commonly used form components and functions(vue可视化低代码表单设计器、表单编辑器、element-plus vant表单设计) -
walker.js
Simple & lightweight tracking implementation layer based on attributes -
URL Parser
Super fast spec-compliant URL state machine for Node.js -
ppo
ppo is a super small and useful utils library for JavaScript 🐝🐜 -
#<Sawyer::Resource:0x00007fbac98da410>
Basic operations on iterables -
Zepcode
⚗️ Zeplin extension that generates Swift snippets from colors, fonts, and layers -
React Chat UI
Build your own chat UI with React components in a few minutes. Chat UI Kit from minchat.io is an open source UI toolkit for developing web chat applications. -
react-component-widget
Component for resizing and repositioning charts, parsing transferred data when working with Recharts library.
Appwrite - The open-source backend cloud platform
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of bootstrap-wysiwyg or a related project?
README
bootstrap-wysiwyg
Important information for Github requests/issues
Please do not submit issues/comments to this repo. Instead, submit it to
https://github.com/steveathon/bootstrap-wysiwyg
Although this is the original repository, we need the project to be tiny and focused on the needs of the MindMup tool, which means that we do not want to complicate it with all the various bits and pieces needed for other usages and older browsers.
Meanwhile, Steve was kind enough to create a fork, backport it to older browsers, extend and integrate all kinds of changes. Steve's fork does not need to stay small, slim and focused, so please use his repo for all your needs if this plugin does provide out of the box
About the editor
Tiny bootstrap-compatible WISWYG rich text editor, based on browser execCommand, built originally for MindMup. Here are the key features:
- Automatically binds standard hotkeys for common operations on Mac and Windows
- Drag and drop files to insert images, support image upload (also taking photos on mobile devices)
- Allows a custom built toolbar, no magic markup generators, enabling the web site to use all the goodness of Bootstrap, Font Awesome and so on...
- Does not force any styling - it's all up to you
- Uses standard browser features, no magic non-standard code, toolbar and keyboard configurable to execute any supported browser command
- Does not create a separate frame, backup text areas etc - instead keeps it simple and runs everything inline in a DIV
- (Optionally) cleans up trailing whitespace and empty divs and spans
- Requires a modern browser (tested in Chrome 26, Firefox 19, Safari 6)
- Supports mobile devices (tested on IOS 6 Ipad/Iphone and Android 4.1.1 Chrome)
Basic Usage
See http://mindmup.github.com/bootstrap-wysiwyg/
Customising
You can assign commands to hotkeys and toolbar links. For a toolbar link, just put the execCommand command name into a data-edit attribute. For more info on execCommand, see http://www.quirksmode.org/dom/execCommand.html and https://developer.mozilla.org/en/docs/Rich-Text_Editing_in_Mozilla
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
<a class="btn btn-large" data-edit="bold"><i class="icon-bold"></i></a>
</div>
To pass arguments to a command, separate a command with a space.
<a data-edit="fontName Arial">...</a>
You can also use input type='text' with a data-edit attribute. When the value is changed, the command from the data-edit attribute will be applied using the input value as the command argument
<input type="text" data-edit="createLink">
If the input type is file, when a file is selected the contents will be read in using the FileReader API and the data URL will be used as the argument
<input type="file" data-edit="insertImage">
To change hotkeys, specify the map of hotkeys to commands in the hotKeys option. For example:
$('#editor').wysiwyg({
hotKeys: {
'ctrl+b meta+b': 'bold',
'ctrl+i meta+i': 'italic',
'ctrl+u meta+u': 'underline',
'ctrl+z meta+z': 'undo',
'ctrl+y meta+y meta+shift+z': 'redo'
}
});
Styling for mobile devices
This editor should work pretty well with mobile devices, but you'll need to consider the following things when styling it:
- keyboards on mobile devices take a huge part of the screen
- having to scroll the screen to touch the toolbar can cause the editing component to lose focus, and the mobile device keyboard might go away
- mobile devices tend to move the screen viewport around to ensure that the focused element is shown, so it's best that the edit box is glued to the top
For the content attachment editor on MindMup, we apply the following rules to mobile device styling:
- edit box is glued to the top, so the focus doesn't jump around
- toolbar is below the edit box
- on portrait screens, edit box size is 50% of the screen
- on landscape screens, edit box size is 30% of the screen
- as the screen gets smaller, non-critical toolbar buttons get hidden into a "other" menu
Dependencies
- jQuery http://jquery.com/
- jQuery HotKeys https://github.com/jeresig/jquery.hotkeys
- Bootstrap http://twitter.github.com/bootstrap/