# pasja-froala-responsive-layout

> Pasja is helping us to you for create responsive layouts in Froala Editor.

Latest version **1.0.4** (published 2022-06-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install pasja-froala-responsive-layout
pnpm add pasja-froala-responsive-layout
yarn add pasja-froala-responsive-layout
bun add pasja-froala-responsive-layout
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2022-06-25 |
| First published | 2022-06-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 43.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | berkaycoban |

## Links

- npm: https://www.npmjs.com/package/pasja-froala-responsive-layout
- npm.io page: https://npm.io/package/pasja-froala-responsive-layout

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.2.37
- [froala-editor](https://npm.io/package/froala-editor.md) ^4.0.12

## Recent versions

- 1.0.4 (latest) — 2022-06-25
- 1.0.1 — 2022-06-25
- 1.0.0 — 2022-06-25
- 0.7.3 — 2022-06-24
- 0.7.2 — 2022-06-24
- 0.7.1 — 2022-06-24
- 0.7.0 — 2022-06-24
- 0.6.0 — 2022-06-24
- 0.5.0 — 2022-06-24
- 0.4.0 — 2022-06-24
- 0.3.0 — 2022-06-24
- 0.2.0 — 2022-06-24
- 0.1.0 — 2022-06-24

## 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_**](#requirements)
- [**_Installation_**](#installation)
- [**_Usage_**](#usage)
  - [**\_Implementation**](#implementation)
  - [**\_Froala Registration**](#froala-registration)
  - [**\_Bootstrap**](#bootstrap)
- [**_Authors && Contributors_**](#authors-&&-Contributors)
- [**_License_**](#license)

# Requirements

- [Vue.js](https://vuejs.org/)
- [FroalaEditor](https://froala.com/wysiwyg-editor/)
- [Bootstrap Grid](https://getbootstrap.com/docs/4.0/layout/grid/)

# Installation

## npm

```bash

$ npm i pasja-froala-responsive-layout


```

## yarn

```bash

$ yarn add pasja-froala-responsive-layout

```

## Usage

### Implementation

How to use Pasja Froala Responsive Layout

Added PasjaFroalaResponsiveLayout to VueApp instance.

```javascript
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

```html
<template>
  <PasjaFroalaGrid />
  <PasjaFroalaAlign />
</template>
```

### Froala Registration

Froala registration,

```javascript
// 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

```scss
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap-grid.min.css');
```

## Demo

- [See the full demo codes](https://github.com/berkaycoban/pasja-froala-responsive-layout/blob/main/src/components/Demo.vue)

# Authors && Contributors

- [berkaycoban](https://github.com/berkaycoban)

# License

[The MIT License](http://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/pasja-froala-responsive-layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._