ankurk91 / Vue Trumbowyg
Licence: mit
Vue.js component for Trumbowyg WYSIWYG editor 📝
Stars: ✭ 224
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Trumbowyg
typester
✒️ A WYSIWYG that gives you predictable and clean HTML
Stars: ✭ 29 (-87.05%)
Mutual labels: wysiwyg, text-editor
Angular Froala Wysiwyg
Angular 4, 5, 6, 7, 8 and 9 plugin for Froala WYSIWYG HTML Rich Text Editor.
Stars: ✭ 696 (+210.71%)
Mutual labels: text-editor, wysiwyg
Graphviz Visual Editor
A web application for interactive visual editing of Graphviz graphs described in the DOT language.
Stars: ✭ 261 (+16.52%)
Mutual labels: text-editor, wysiwyg
Vue Codemirror
⌨️ @codemirror component for @vuejs
Stars: ✭ 2,115 (+844.2%)
Mutual labels: text-editor, vue-component
am-editor
A rich text collaborative editor framework that can use React and Vue custom plug-ins. 一个富文本实时协同编辑器框架,可以使用React和Vue自定义插件。
Stars: ✭ 542 (+141.96%)
Mutual labels: wysiwyg, text-editor
Wysiwyg.js
wysiwyg contenteditable editor (minified+compression: 6kb)
Stars: ✭ 520 (+132.14%)
Mutual labels: text-editor, wysiwyg
bangle.dev
Collection of higher level rich text editing tools. It powers the local only note taking app https://bangle.io
Stars: ✭ 541 (+141.52%)
Mutual labels: wysiwyg, text-editor
Yawysiwygee
Yet another what-you-see-is-what-you-get equation editor
Stars: ✭ 60 (-73.21%)
Mutual labels: text-editor, wysiwyg
ember-pell
Ember addon for simplest and smallest (1kB) WYSIWYG text editor for web, with no dependencies
Stars: ✭ 56 (-75%)
Mutual labels: wysiwyg, text-editor
Vue Trix
Trix text editor component for Vue.js
Stars: ✭ 159 (-29.02%)
Mutual labels: text-editor, vue-component
Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+2968.75%)
Mutual labels: text-editor, vue-component
Pell
📝 the simplest and smallest WYSIWYG text editor for web, with no dependencies
Stars: ✭ 11,653 (+5102.23%)
Mutual labels: text-editor, wysiwyg
Ngx Wig
Angular(...Angular 7, Angular 8, Angular 9, Angular 10, Angular 11) WYSIWYG HTML Rich Text Editor (from ngWig - https://github.com/stevermeister/ngWig)
Stars: ✭ 178 (-20.54%)
Mutual labels: text-editor, wysiwyg
Slate Plugins
A set of my personal Slate editor plugins, in a monorepo.
Stars: ✭ 191 (-14.73%)
Mutual labels: text-editor
Blindpad
Collaborative text editor (like Google Docs or CoderPad) with integrated semi-anonymizing voice chat intended to help reduce bias in technical communication.
Stars: ✭ 191 (-14.73%)
Mutual labels: text-editor
Vue Trumbowyg
Vue.js component for Trumbowyg WYSIWYG editor
Demo or JSFiddle
Version matrix
Vue.js version | Package version | Branch |
---|---|---|
2.x | 3.x | 3.x |
3.x | 4.x | master |
Installation
# yarn
yarn add vue-trumbowyg
# npm
npm install vue-trumbowyg
Features
- Reactive
v-model
value- You can change editor value programmatically
- Emits all possible events
- Supports most plugins
- Works with validation libraries like - vee-validate
Requirements
- jQuery >=1.8
- Vue v3.x
Usage
<template>
<div>
<trumbowyg v-model="content" :config="config" class="form-control" name="content"></trumbowyg>
</div>
</template>
<script>
// Import this component
import Trumbowyg from 'vue-trumbowyg';
// Import editor css
import 'trumbowyg/dist/ui/trumbowyg.css';
export default {
data () {
return {
content: null,
config: {
// Get options from
// https://alex-d.github.io/Trumbowyg/documentation
}
}
},
components: {
Trumbowyg
}
}
</script>
As plugin
import Vue from 'vue';
import VueTrumbowyg from 'vue-trumbowyg';
import 'trumbowyg/dist/ui/trumbowyg.css';
app.use(VueTrumbowyg);
This will register a global component <trumbowyg>
Events
- You can listen to various events like this
<trumbowyg v-model="body" @tbw-blur="yourMethod"></trumbowyg>
- 💡 Events names are prefixed with
tbw
and separated with a dash, for example:tbw-focus
Available props
The component accepts these props:
Attribute | Type | Default | Description |
---|---|---|---|
v-model | String / null | null |
Set or Get editor value (required) |
disabled | Boolean | false |
Enable/disable editor |
config | Object | {} |
Editor configuration options |
svg-path | String, Boolean | import 'trumbowyg/dist/ui/icons.svg' |
Set custom svg icon file URL |
Install in non-module environments (without webpack)
<!-- Editor dependencies-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Editor itself -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/ui/trumbowyg.min.css" rel="stylesheet">
<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script><
<script>
// Initialize as global component
yourAppInstance.component('Trumbowyg', VueTrumbowyg.default);
</script>
Troubleshoot
- Read the setup guide
Run examples on your localhost
- Clone this repo
- Make sure you have node-js
>=10.13
and yarn>=1.x
pre-installed - Install dependencies -
yarn install
- Run webpack dev server -
yarn start
- This should open the demo page at
http://localhost:9000
in your default web browser
Changelog
Please see CHANGELOG for more information what has changed recently.
License
MIT License
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].