pasja-froala-responsive-layout
v1.0.4
Published
Pasja is helping us to you for create responsive layouts in Froala Editor.
Downloads
10
Readme
Pasja Froala Responsive Layout
Pasja is helping us to you for create responsive layouts in Froala Editor.
- Use Bootstrap Grid system
- Supports Vue 3
Table of Contents
Requirements
Installation
npm
$ npm i pasja-froala-responsive-layout
yarn
$ yarn add pasja-froala-responsive-layout
Usage
Implementation
How to use Pasja Froala Responsive Layout
Added PasjaFroalaResponsiveLayout to VueApp instance.
import PasjaFroalaResponsiveLayout from 'pasja-froala-responsive-layout'
import 'pasja-froala-responsive-layout/dist/style.css'
app.use(PasjaFroalaResponsiveLayout)
Use global components in your project app.vue file
<template>
<PasjaFroalaGrid />
<PasjaFroalaAlign />
</template>
Froala Registration
Froala registration,
// froala.plugin.js
import FroalaEditor from 'froala-editor'
import 'froala-editor/css/froala_editor.pkgd.min.css'
import 'froala-editor/css/froala_style.min.css'
const froalaConfig = {
toolbarButtons: ['pasjaFroalaLayout'], // add pasjaFroalaLayout in froala editor toolbar
events: {
// for find added column and align columns
click: function (e: any) {
const clickedElement = e.target
const isHasColumnClass = clickedElement.className.indexOf('col') !== -1
if (isHasColumnClass) {
const froalaLayoutEvent = new CustomEvent('pasja-froala-align', { detail: { element: clickedElement } })
document.dispatchEvent(froalaLayoutEvent)
} else {
const froalaLayoutEvent = new CustomEvent('pasja-froala-align', { detail: { element: null } })
document.dispatchEvent(froalaLayoutEvent)
}
}
}
}
// Froala register pasjaResponsiveGrid
FroalaEditor.RegisterCommand('pasjaFroalaLayout', {
title: 'Pasja Responsive Grid',
icon: '-P-', // if you want added custom icon
refreshAfterCallback: true,
callback() {
this.selection.save() // save caret position
//
const froalaLayoutEvent = new CustomEvent('pasja-froala-grid', { detail: { froalaInstance: this } })
document.dispatchEvent(froalaLayoutEvent)
this.froalaLayoutPluginActive = true
},
refresh() {
if (this.froalaLayoutPluginActive) {
const froalaLayoutEvent = new CustomEvent('pasja-froala-grid', { detail: { froalaInstance: null } })
document.dispatchEvent(froalaLayoutEvent)
}
}
})
export FroalaEditor
Bootstrap
Add Bootstrap Grid system in style file
@import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-grid.min.css');