vue-text-editor-fy

Demo

Requirements

"vue": "^2.*",
"vuetify": "^2.4.*"

Installation

npm install --save vue-text-editor-fy

or

yarn add vue-text-editor-fy

Declaration

Global Import (In main.js file)

import VueTextEditorFy from "vue-text-editor-fy"
Vue.component("VueTextEditorFy", VueTextEditorFy);

Local Import (In any component)

<script>
import VueTextEditorFy from "vue-text-editor-fy"

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

Basic Usage

Example-1

<VueTextEditorFy
  :item="{
    id: 2,
    text: 'Dummy Text',
    bold: false,
    italic: false,
    color: '#000',
    background: '#607D8B',
    fontSize: 'title',
    fontFamily: 'monospace',
  }"
></VueTextEditorFy>

Example-2

<VueTextEditorFy
  type="v-text-field"
  :solo="true"
  :colors="['#000', '#fff']"
  :item="{
    id: 1,
    text: 'Dummy Text',
    bold: false,
    italic: false,
    color: '#000',
    background: '#607D8B',
    fontSize: 'body-2',
    fontFamily: 'sans-serif',
  }"
></VueTextEditorFy>

Properties

• item

  • Type - Object
  • Required - Yes
  • Description - This prop is going to have all values of edit propeties.
  • Properties - | Name | Type | Required | Description | Example Values | | ---- | ---- |--------- |------------ |--------------- | | id | Number/String | Yes | This is a unique value for each text component. | 1, 3816, 'abcd-234-sdf'| | text | String | Yes | The text to display | any string| | bold | Boolean | No | To bold the input text. | true/false | | italic | Boolean | No | To italic the text. | true/false | | color | String | No | To change the color of text. | any hex color value | | background | String | No | To change the background color of text field | any hex color value | | fontSize | String | No | To change the size of text | "subtitle-1","subtitle-2","body-1", "body-2","button","caption","overline" | | fontFamily | String | No | To change the background color of text field | "serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded","emoji","math","fangsong" |

• type

  • Type - String
  • Required - No
  • Description - To decide the type on text box, either textarea of input.
  • Default - "v-textarea"
  • Support values - "v-text-field", "v-textarea"

• colors

  • Type - Array
  • Required - No
  • Description - Choices for background and font colors.
  • Default - ["#F5F5F5", "#FFAC77", "#FFEB3B", "#CDDC39", "#41BBB4", "#FFC107", "#8BC34A", "#F587C7", "#FB8C01", "#4CAF50","#2196F3", "#607D8B","#E53935", "#1A76D2", "#E91E63", "#795548", "#9C27B0", "#000000"]
  • Support values - Array of any number of hex color values.

• solo

  • Type - boolean
  • Required - No
  • Description - To give text box a card kind of look.
  • Default - false
  • Support values - true/false.