Edit mode API | Viseven Help Center

Sometimes you need to detect if a component is opened in the EDIT mode in eWizard Editor to change its behavior or settings. In this mode, eWizard.js removes the touch event listeners, so you can drag the component while editing. You can use the isEditMode$ observable for this purpose.

isEditMode$ is available as a part of the component $root.

The callback function of isEditMode$ subscriber receives the state of the edit mode as an argument.

watch: {
'$editor.mode': (mode) => {
if (mode === 'edit') {
// Do something.
}
}
},

You can use the Vue.js computed properties in the component index.vue file to add some logic to your component.

For example, this is the logic for the wiz-text component.

// ./demo/node_modules/wiz-text/index.vueexport default { computed: { isEditMode() { return this.$editor.mode === 'edit'; }, isDefaultText() { return />Double-click to add text</.tеst(this.value) && !/<a.*>Double-click to add text/.tеst(this.value); }, isVisible() { return this.isEditMode || !this.isDefaultText; }, value() { return this.text || defaultText; } } };

The wiz-text component has the Double-click to add text default text in the eWizard Editor EDIT mode. The component isn't visible in the eWizard Editor PREVIEW mode.

:--- TABS:

TAB: EDIT mode

TAB: PREVIEW mode

---: