Properties

NameTypeDefault
createCommand Function null

Sets or gets the jqxEditor's createCommand property. The property allows you to add new commands or override existing commands. 

<template>
  <JqxEditor ref="myEditor"
    :width="850" :height="400" :tools="'datetime backcolor'" :createCommand="createCommand">
    Editor Content Here...
  </JqxEditor>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
 
  export default {
    components: {
      JqxEditor
    },
    methods: {
      createCommand: function (name) {
        switch (name) {
          case 'datetime': 
            return { 
              type: 'list', 
              tooltip: 'Insert Date/Time', 
              init: function(widget) { 
                widget.jqxDropDownList({ placeHolder: 'Insert Custom HTML', width: 160, source: ['Insert Time', 'Insert Date'], autoDropDownHeight: true }); 
              }, 
              refresh: function(widget, style) { 
                // do something here when the selection is changed.
                widget.jqxDropDownList('clearSelection'); 
              }, 
              action: function(widget, editor) { 
                const widgetValue = widget.val(); 
                const date = new Date(); 
                // return object with command and value members.
                return { command: 'inserthtml', value: widgetValue == 'Insert Time' ? date.getHours() + ':' + date.getMinutes() : date.getDate() + '-' + date.getMonth() + '-' + date.getFullYear() }; 
              } 
            }
          case 'backcolor': 
            return { 
              type: 'colorPicker', 
              tooltip: 'Background', 
              init: function(widget) { 
                widget.jqxDropDownButton({ width: 160 }); 
                widget.jqxDropDownButton('setContent', 'Choose Background'); 
              }, 
              refresh: function(widget, style) { 
                // do something here when the selection is changed.
              }, 
              action: function(widget, editor) { 
                // return nothing and perform a custom action.
                const color = widget.val(); 
                editor.css('background', color); 
              } 
            }
          }
      }
    }
  }
</script>
disabled Boolean false

Sets or gets whether the jqxEditor is disabled. 

<template>
  <JqxEditor ref="myEditor"
    :width="850" :height="400" :tools="'bold italic underline | format font size'"
    :disabled="true">
    Editor Content Here...
  </JqxEditor>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
 
  export default {
    components: {
      JqxEditor
    }
  }
</script>
editable Boolean true

Sets or gets the jqxEditor's editable property. The property determines whether the jqxEditor is read only. 

<template>
  <JqxEditor ref="myEditor"
    :width="850" :height="400" :tools="'bold italic underline | format font size'"
    :editable="false">
    Editor Content Here...
  </JqxEditor>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
 
  export default {
    components: {
      JqxEditor
    }
  }
</script>
height String | Number null

Sets or gets the jqxEditor's height. 

<template>
  <JqxEditor ref="myEditor"
    :width="850" :height="400" :tools="'bold italic underline | format font size'">
    Editor Content Here...
  </JqxEditor>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
 
  export default {
    components: {
      JqxEditor
    }
  }
</script>
lineBreak String "default"

Sets or gets the jqxEditor's line break. The property determines whether the jqxEditor creates BR, P or DIV tag when the Enter key is pressed or uses the web browser's default mode. 

<template>
  <JqxEditor ref="myEditor"
    :width="850" :height="400" :tools="'bold italic underline | format font size'"
    :lineBreak="'div'">
    Editor Content Here...
  </JqxEditor>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
 
  export default {
    components: {
      JqxEditor
    }
  }
</script>
localization Object { "bold": "Bold", "italic": "Italic", "underline": "Underline", "format": "Format Block", "font": "Font Name", "size": "Font Size", "color": "Text Color", "background": "Fill Color", "left": "Align Left", "center": "Align Center", "right": "Align Right", "outdent": "Indent Less", "indent": "Indent More", "ul": "Insert unordered list", "ol": "Insert ordered list", "image": "Insert image", "link": "Insert link", "html": "View source", "clean": "Remove Formatting" }

Sets or gets the jqxEditor's localization. The property determines the localization of the jqxEditor. 

<template>
  <JqxEditor ref="myEditor"
    :width="850" :height="400" :tools="'bold italic underline | format font size'"
    :localization="localization">
    Editor Content Here...
  </JqxEditor>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
 
  export default {
    components: {
      JqxEditor
    },
    data: function () {
      return {
        localization: { 'bold': 'Fett', 'italic': 'Kursiv', 'underline': 'Unterstreichen', 'format': 'Block-Format', 'font': 'Schriftname', 'size': 'Schriftgröße', 'color': 'Textfarbe', 'background': 'Hintergrundfarbe', 'left': 'Links ausrichten', 'center': 'Mitte ausrichten', 'right': 'Rechts ausrichten', 'outdent': 'Weniger Einzug', 'indent': 'Mehr Einzug', 'ul': 'Legen Sie ungeordnete Liste', 'ol': 'Geordnete Liste einfügen', 'image': 'Bild einfügen', 'link': 'Link einfügen', 'html': 'html anzeigen', 'clean': 'Formatierung entfernen' }
      }
    }
  }
</script>
pasteMode String "html"

Sets or gets the jqxEditor's paste mode. The property determines whether the clipboard data is pasted as HTML or Plain Text. Possible values: "html" and "text". 

<template>
  <JqxEditor ref="myEditor"
    :width="850" :height="400" :tools="'bold italic underline | format font size'"
    :pasteMode="'text'">
    Editor Content Here...
  </JqxEditor>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
 
  export default {
    components: {
      JqxEditor
    }
  }
</script>
rtl Boolean false

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxEditor ref="myEditor"
    :width="850" :height="400" :tools="'bold italic underline | format font size'"
    :rtl="true">
    Editor Content Here...
  </JqxEditor>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
 
  export default {
    components: {
      JqxEditor
    }
  }
</script>
stylesheets Array []

Sets or gets the jqxEditor's stylesheets. The property allows you to include stylesheets into the jqxEditor's IFrame. 

<template>
  <JqxEditor ref="myEditor"
    :width="850" :height="400" :tools="'bold italic underline | format font size'"
    :stylesheets="stylesheets">
    Editor Content Here...
  </JqxEditor>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
 
  export default {
    components: {
      JqxEditor
    },
    data: function () {
      return {
        stylesheets: ['../../jqwidgets/styles/jqx.base.css']
      }
    }
  }
</script>
theme String ''

Sets the widget's theme.

  • Include the theme's CSS file after jqx.base.css.
    The following code example adds the 'material' theme. 
    

    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  • Set the widget's theme property to 'material' when you initialize it. 
<template>
  <JqxEditor ref="myEditor"
    :width="850" :height="400" :tools="'bold italic underline | format font size'"
    :theme="'material'">
    Editor Content Here...
  </JqxEditor>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
 
  export default {
    components: {
      JqxEditor
    }
  }
</script>
toolbarPosition String "top"

Sets or gets the jqxEditor's toolbar position. The property determines the position of the jqxEditor's toolbar. 

<template>
  <JqxEditor ref="myEditor"
    :width="850" :height="400" :tools="'bold italic underline | format font size'"
    :toolbarPosition="'bottom'">
    Editor Content Here...
  </JqxEditor>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
 
  export default {
    components: {
      JqxEditor
    }
  }
</script>
tools String "bold italic underline | format font size | color background | left center right | outdent indent | ul ol | image | link | clean | html"

Sets or gets the jqxEditor's tools. The property determines the visibility and layout of the jqxEditor's tools. 

<template>
  <JqxEditor ref="myEditor"
    :width="850" :height="400" :tools="'bold italic underline | format font size'">
    Editor Content Here...
  </JqxEditor>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
 
  export default {
    components: {
      JqxEditor
    }
  }
</script>
width Number | String null

Sets or gets the jqxEditor's width. 

<template>
  <JqxEditor ref="myEditor"
    :width="850" :height="400" :tools="'bold italic underline | format font size'">
    Editor Content Here...
  </JqxEditor>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
 
  export default {
    components: {
      JqxEditor
    }
  }
</script>

Events

change Event

This is triggered when the jqxEditor's value is changed.

Code examples

Bind to the change event of jqxEditor. 

<template>
  <JqxEditor ref="myEditor" @change="onChange($event)"
    :width="850" :height="400" :tools="'bold italic underline | format font size'">
    Editor Content Here...
  </JqxEditor>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
 
  export default {
    components: {
      JqxEditor
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Methods

NameArgumentsReturn Type
destroy None None

Destroys the widget. 

<template>
  <JqxEditor ref="myEditor"
    :width="850" :height="400" :tools="'bold italic underline | format font size'">
    Editor Content Here...
  </JqxEditor>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
 
  export default {
    components: {
      JqxEditor
    },
    mounted: function () {
      this.$refs.myEditor.destroy();
    }
  }
</script>
focus None None

Focuses the widget. 

<template>
  <JqxEditor ref="myEditor"
    :width="850" :height="400" :tools="'bold italic underline | format font size'">
    Editor Content Here...
  </JqxEditor>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
 
  export default {
    components: {
      JqxEditor
    },
    mounted: function () {
      this.$refs.myEditor.focus();
    }
  }
</script>
print None None

Prints the jqxEditor's value. 

<template>
    <div>
        <JqxEditor ref="myEditor"
                   :width="850" :height="400" :tools="'bold italic underline | format font size'">
             jqxEditor is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea or you can create it from a DIV element.
        </JqxEditor>
        <br />
        <JqxButton @click="print()" :width="120">Print</JqxButton>
    </div>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
        JqxEditor,
        JqxButton
    },
    methods: {
        print: function () {
            this.$refs.myEditor.print();
        }
    }
  }
</script>
setMode mode None

Sets the jqxEditor's mode. The method has one boolean parameter which determines whether the jqxEditor displays its value as formatted html or html code. 

<template>
  <JqxEditor ref="myEditor"
    :width="850" :height="400" :tools="'bold italic underline | format font size'">
    Editor Content Here...
  </JqxEditor>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
 
  export default {
    components: {
      JqxEditor
    },
    mounted: function () {
      this.$refs.myEditor.setMode(true);
    }
  }
</script>
val value String

Sets or gets the value. 

<template>
  <JqxEditor ref="myEditor"
    :width="850" :height="400" :tools="'bold italic underline | format font size'">
    Editor Content Here...
  </JqxEditor>
</template>
 
<script>
  import JqxEditor from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxeditor.vue';
 
  export default {
    components: {
      JqxEditor
    },
    mounted: function () {
      const value = this.$refs.myEditor.val('New Editor Value!');
    }
  }
</script>