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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>