| Name | Type | Default |
|---|
|
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.
<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>
|
|
|
|
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>
|
|
|
| Name | Arguments | Return 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>
|