vue-froala-wysiwyg
Version:
Vue plugin for Froala WYSIWYG HTML rich text editor.
330 lines (231 loc) • 7.88 kB
Markdown
[](https://www.npmjs.com/package/vue-froala-wysiwyg)
[](https://www.npmjs.com/package/vue-froala-wysiwyg)
[](https://www.npmjs.com/package/vue-froala-wysiwyg)
>vue-froala-wyswiyg provides Vue bindings to the Froala WYSIWYG editor VERSION 3.
- v3 later
- Vue.js 3.x
Install `vue-froala-wysiwyg` from `npm`
```bash
npm install vue-froala-wysiwyg --save
```
```javascript
//Import Froala Editor
import 'froala-editor/js/plugins.pkgd.min.js';
//Import third party plugins
import 'froala-editor/js/third_party/embedly.min';
import 'froala-editor/js/third_party/font_awesome.min';
import 'froala-editor/js/third_party/spell_checker.min';
import 'froala-editor/js/third_party/image_tui.min';
// Import Froala Editor css files.
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/froala_style.min.css';
import App from './App'
import { createApp } from 'vue'
import VueFroala from 'vue-froala-wysiwyg';
const app = createApp(App);
app.use(VueFroala);
app.mount('#app');
```
```javascript
<template>
<div id="app">
<froala id="edit" :tag="'textarea'" :config="config" v-model:value="model"></froala>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
config: {
events: {
initialized: function () {
console.log('initialized')
}
}
},
model: 'Edit Your Content Here!'
}
}
}
</script>
```
```javascript
var webpack = require('webpack')
var path = require('path')
module.exports = {
module: {
loaders: [
// ...
// Css loader.
{
test: /\.css$/,
loader: 'cssLoader'
}
]
},
vue: {
loaders: {
// ...
// Css loader for Webpack 1.x .
css: 'cssLoader'
}
}
})
```
```javascript
// If model is initialized, 'Init text' text child will be overwritten.
<froala :tag="'textarea'" :config="config" v-model:value="model">Init text</froala>
```
**:tag** attr is used to tell on which tag the editor is initialized.
There are special tags: **a**, **button**, **img**, **input**.
You can pass editor options as component attribute (optional).
`:config="config"`
You can pass any existing Froala option. Consult the [Froala documentation](https://www.froala.com/wysiwyg-editor/docs/options) to view the list of all the available options:
```jon
config: {
placeholderText: 'Edit Your Content Here!',
charCounterCount: false
}
```
Aditional option is used:
* **immediateVueModelUpdate**: (default: false) This option updates the Vue model as soon as a key is released in the editor. Note that it may affect performances.
Events can be passed in with the options, with a key events and object where the key is the event name and the value is the callback function.
```javascript
config: {
placeholder: "Edit Me",
events : {
focus : function(e, editor) {
console.log(editor.selection.get());
}
}
}
```
Using the editor instance from the arguments of the callback you can call editor methods as described in the [method docs](http://froala.com/wysiwyg-editor/docs/methods).
Froala events are described in the [events docs](https://froala.com/wysiwyg-editor/docs/events).
The WYSIWYG HTML editor content model. Two way binding is suported.
`v-model:value="model"`
Use the content in other places:
```javascript
<input v-model:value="model"/>
```
You can also use the editor on **img**, **button**, **input** and **a** tags:
```javascript
<froala :tag="img" v-model:value="imgModel"></froala>
```
The model must be an object containing the attributes for your special tags. Example:
```javascript
imgModel: {
src: require('./image.jpg')
}
```
The model will change as the attributes change during usage.
* The model can contain a special attribute named **innerHTML** which inserts innerHTML in the element: If you are using 'button' tag, you can specify the button text like this:
```javascript
buttonModel: {
innerHTML: 'Click Me'
}
```
As the button text is modified by the editor, the **innerHTML** attribute from buttonModel model will be modified too.
* **vueIgnoreAttrs**: (default: null) This option is an array of attributes that you want to ignore when the editor updates the v-model:
```javascript
config: {
vueIgnoreAttrs: ['class', 'id']
}
```
You can pass the custom buttons to the editor by following way:
```javascript
<script>
import FroalaEditor from 'froala-editor';
FroalaEditor.DefineIcon('alert', {NAME: 'info', SVG_KEY: 'help'});
FroalaEditor.RegisterCommand('alert', {
title: 'Hello',
focus: false,
undo: false,
refreshAfterCallback: false,
callback: function () {
alert('Hello!');
}
});
FroalaEditor.DefineIcon('clear', {NAME: 'remove', SVG_KEY: 'remove'});
FroalaEditor.RegisterCommand('clear', {
title: 'Clear HTML',
focus: false,
undo: true,
refreshAfterCallback: true,
callback: function () {
this.html.set('');
this.events.focus();
}
});
FroalaEditor.DefineIcon('insert', {NAME: 'plus', SVG_KEY: 'add'});
FroalaEditor.RegisterCommand('insert', {
title: 'Insert HTML',
focus: true,
undo: true,
refreshAfterCallback: true,
callback: function () {
this.html.insert('My New HTML');
}
});
</script>
```
Now you can use these buttons in options:
```javascript
toolbarButtons: [['undo', 'redo' , 'bold'], ['alert', 'clear', 'insert']],
```
Gets the functionality to operate on the editor: create, destroy and get editor instance. Use it if you want to manually initialize the editor.
`:onManualControllerReady="initialize"`
```javascript
initialize: function(initControls) {
this.initControls = initControls;
this.deleteAll = () => {
this.initControls.getEditor().html.set('');
this.initControls.getEditor().undo.reset();
this.initControls.getEditor().undo.saveStep();
};
}
```
The object received by the function will contain the following methods:
- **initialize**: Call this method to initialize the Froala Editor
- **destroy**: Call this method to destroy the Froala Editor
- **getEditor**: Call this method to retrieve the editor that was created. This method will return *null* if the editor was not yet created
To display content created with the froala editor use the `froalaView` component.
```javascript
<froala v-model:value="content"></froala>
<froalaView v-model:value="content"></froalaView>
```
The `vue-froala-wyswiyg` project is under MIT license. However, in order to use Froala WYSIWYG HTML Editor plugin you should purchase a license for it.
Froala Editor has [3 different licenses](http://froala.com/wysiwyg-editor/pricing) for commercial use.
For details please see [License Agreement](http://froala.com/wysiwyg-editor/terms).
If you want to contribute to vue-froala-wyswiyg, you will first need to install the required tools to get the project going.
* [Node Package Manager](https://npmjs.org/) (NPM)
* [Git](http://git-scm.com/)
$ npm install
$ npm run build
$ npm run dev