chmln / Vue Wysiwyg
Licence: mit
A lightweight WYSIWYG HTML editor for Vue.js
Stars: ✭ 471
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Vue Wysiwyg
textbus
Textbus 是一个组件化的、数据驱动的富文本框架,支持在线协同编辑,同时也可以作为一个开箱即用的富文本编辑器,拥有非常好的扩展性和可定制性,是构建复杂富文本的不二之选!
Stars: ✭ 642 (+36.31%)
Mutual labels: wysiwyg, wysiwyg-editor
fluence
WYSIWYG wiki powered by Crystal, markdown, and Git
Stars: ✭ 44 (-90.66%)
Mutual labels: wysiwyg, wysiwyg-editor
react-web-editor
The react-web-editor is a WYSIWYG editor library. you can resize and drag your component. It also has simple rich text editor
Stars: ✭ 191 (-59.45%)
Mutual labels: wysiwyg, wysiwyg-editor
Graphviz Visual Editor
A web application for interactive visual editing of Graphviz graphs described in the DOT language.
Stars: ✭ 261 (-44.59%)
Mutual labels: wysiwyg, wysiwyg-editor
wysiwyg-editor-php-sdk
PHP SDK to ease the integration of Froala WYSIWYG Editor on server side.
Stars: ✭ 37 (-92.14%)
Mutual labels: wysiwyg, wysiwyg-editor
Awesome Web Editor
🔨 Open source WEB editor summary
Stars: ✭ 306 (-35.03%)
Mutual labels: wysiwyg, wysiwyg-editor
cazary
jQuery plugin of WYSIWYG editor that aims for fast, lightweight, stylish, customizable, cross-browser, and multi-language.
Stars: ✭ 12 (-97.45%)
Mutual labels: wysiwyg, wysiwyg-editor
rtexteditorview
A simple WYSIWYG editor for Android
Stars: ✭ 51 (-89.17%)
Mutual labels: wysiwyg, wysiwyg-editor
typester
✒️ A WYSIWYG that gives you predictable and clean HTML
Stars: ✭ 29 (-93.84%)
Mutual labels: wysiwyg, wysiwyg-editor
Trumbowyg
A lightweight and amazing WYSIWYG JavaScript editor under 10kB
Stars: ✭ 3,664 (+677.92%)
Mutual labels: wysiwyg, wysiwyg-editor
am-editor
A rich text collaborative editor framework that can use React and Vue custom plug-ins. 一个富文本实时协同编辑器框架,可以使用React和Vue自定义插件。
Stars: ✭ 542 (+15.07%)
Mutual labels: wysiwyg, wysiwyg-editor
Angular Editor
A simple native WYSIWYG editor component for Angular 6 -10+
Stars: ✭ 428 (-9.13%)
Mutual labels: wysiwyg, wysiwyg-editor
wysiwyg-editor-dotnet-sdk
.NET SDK to ease the integration of Froala WYSIWYG Editor on server side.
Stars: ✭ 23 (-95.12%)
Mutual labels: wysiwyg, wysiwyg-editor
wysihtml5-rails
A wysiwyg text editor for use in the Rails asset pipeline
Stars: ✭ 28 (-94.06%)
Mutual labels: wysiwyg, wysiwyg-editor
bangle.dev
Collection of higher level rich text editing tools. It powers the local only note taking app https://bangle.io
Stars: ✭ 541 (+14.86%)
Mutual labels: wysiwyg, wysiwyg-editor
Text
📑 Collaborative document editing using Markdown
Stars: ✭ 282 (-40.13%)
Mutual labels: wysiwyg, wysiwyg-editor
Usage
Install vue-wysiwyg
npm install vue-wysiwyg --save
OR
yarn add vue-wysiwyg
In your main.js
:
import wysiwyg from "vue-wysiwyg";
Vue.use(wysiwyg, {}); // config is optional. more below
Also make sure to load the stylesheet. The exact syntax will depend on what preprocessor you use.
@import "~vue-wysiwyg/dist/vueWysiwyg.css";
In your components:
<wysiwyg v-model="myHTML" />
Config options
All keys are optional.
{
// { [module]: boolean (set true to hide) }
hideModules: { "bold": true },
// you can override icons too, if desired
// just keep in mind that you may need custom styles in your application to get everything to align
iconOverrides: { "bold": "<i class='your-custom-icon'></i>" },
// if the image option is not set, images are inserted as base64
image: {
uploadURL: "/api/myEndpoint",
dropzoneOptions: {}
},
// limit content height if you wish. If not set, editor size will grow with content.
maxHeight: "500px",
// set to 'true' this will insert plain text without styling when you paste something into the editor.
forcePlainTextOnPaste: true,
// specify editor locale, if you don't specify this, the editor will default to english.
locale: 'hu'
}
Available Modules:
- bold
- italic
- underline
- justifyLeft
- justifyCenter
- justifyRight
- headings
- link
- code
- orderedList
- unorderedList
- image
- table
- removeFormat
- separator
Available Locales:
- english (default)
- hungarian
- dutch
- german
Note on the image upload API endpoint:
- Image is uploaded by
multipart/form-data
- Your endpoint must respond back with a string, the URL for the image - e.g.
http://myapp.com/images/12345.jpg
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].