# vue-editor-in-chief

> A vue2 text editor to beautify the text and text box with elegant editing properties.

Latest version **0.1.8** (published 2021-05-10) · 0 weekly downloads

## Install

```sh
npm install vue-editor-in-chief
pnpm add vue-editor-in-chief
yarn add vue-editor-in-chief
bun add vue-editor-in-chief
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.8 |
| Published | 2021-05-10 |
| First published | 2021-05-08 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 372 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Neha Soni |
| Maintainers | nehasoni988 |
| Keywords | vue2, text-editor, editor |

## Links

- npm: https://www.npmjs.com/package/vue-editor-in-chief
- Repository: https://github.com/Nehasoni988/vue-editor-in-chief
- Homepage: https://github.com/Nehasoni988/vue-editor-in-chief#readme
- Issues: https://github.com/Nehasoni988/vue-editor-in-chief/issues
- npm.io page: https://npm.io/package/vue-editor-in-chief

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.1.8 (latest) — 2021-05-10
- 0.1.7 — 2021-05-10
- 0.1.6 — 2021-05-09
- 0.1.5 — 2021-05-09
- 0.1.4 — 2021-05-09
- 0.1.3 — 2021-05-08
- 0.1.2 — 2021-05-08
- 0.1.1 — 2021-05-08
- 0.1.0 — 2021-05-08

## README

# vue-editor-in-chief

## Demo

![Demo](./src/assets/demo.gif)

#### [Codesandbox Example](https://codesandbox.io/s/vue-editor-chief-demo-7kyi9?file=/src/main.js)
## Installation

```
npm install --save vue-editor-in-chief
```

or

```
yarn add vue-editor-in-chief
```

## Declaration

#### Global Import (In main.js file)

```
import VueEditorChief from "vue-editor-in-chief";
import "vue-editor-in-chief/dist/vue-editor-in-chief.css";
Vue.component("VueEditorChief", VueEditorChief);
```

#### Local Import (In any component)

```
<script>
import VueEditorChief from "vue-editor-in-chief";
import "vue-editor-in-chief/dist/vue-editor-in-chief.css";

export default {
  name: "HelloWorld"
  components: {
    VueEditorChief
  }
}
<script>
```

## Basic Usage

#### Example-1

```
<VueEditorChief
  :config="{
    text: 'Hello Input',
    placeholder: 'Type inside input...',
    background: '#D3D3D3',
    family: 'cursive',
    size: 'medium',
    color: '#000000',
    bold: true,
    italic: false,
    width: 300,
    borderColor: '#D3D3D3'
  }"
></VueEditorChief>

```

#### Example-2

```
<VueEditorChief
  :config="{
    type: 'textarea',
    text: 'Hello Textarea',
    placeholder: 'Type inside textarea...',
    background: '#1A76D2',
    family: 'sans-serif',
    size: 'large',
    color: '#000000',
    bold: true,
    italic: true,
    width: 300,
    borderColor: '#1A76D2'
  }"
></VueEditorChief>
```

## Properties

- `config`

  - **Type** - Object
  - **Required** - Yes
  - **Description** - This prop is going to have all values of edit properties.
  - **Properties** -
    | Name | Type | Required | Description | Support Values |
    | ---- | ---- |--------- |------------ |--------------- |
    | text | String/Null | Yes | The text to display. | any string|
    | type | String | No | The type of the text field. | "input", "textarea"|
    | placeholder | String/Null | No | The placeholder for the text box. | any string|
    | bold | Boolean | No | To bold the text. | true/false |
    | italic | Boolean | No | To italic the text. | true/false |
    | color | String/Null | No | To change the color of the text. | any hex color value |
    | background | String/Null | No | To change the color of the text box. | any hex color value |
    | size | String/Null | No | To change the font size of the text. | "xx-small","x-small","small","medium","large","x-large","xx-large","xxx-large","smaller","larger","inherit","initial","unset", |
    | family | String/Null | No | To change the font family of the text. | "serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded","emoji","math","fangsong" |
    | width | String/Number | No | To change the width of the text box. | 300 or "300" |
    | borderColor | String | No | To change the border color of the text box. | any hex color value |

---
_Source: https://npm.io/package/vue-editor-in-chief · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._