Redactor can work as a Vue3 component. Below is a complete example. Use it to modify it for your needs.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Redactor</title>
<link rel="stylesheet" href="/redactor.css">
</head>
<body>
<div id="app">
<Redactor :config="configOptions"></Redactor>
{{ content }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="/redactor.js"></script>
<script>
const app = Vue.createApp();
app.component('Redactor', {
template: '<textarea ref="redactor" />',
redactor: false,
props: {
config: {
default: {
content: '<p>...</p>',
},
type: Object
}
},
watch: {
value(newValue, oldValue) {}
},
mounted() {
this.init();
},
beforeDestroy() {
this.destroy()
},
methods: {
init() {
var me = this;
var subscribe = {
'editor.change': function(html) {
me.handleInput(html);
return html
}
};
// extend config
if (typeof this.config.subscribe === 'undefined') {
this.config.subscribe = subscribe;
}
else {
this.config.subscribe.changed = subscribe.changed;
}
// call Redactor
var app = Redactor(this.$refs.redactor, this.config);
// set instance
this.redactor = app;
this.$parent.redactor = app;
},
destroy() {
// Call destroy on redactor to cleanup event handlers
this.$refs.redactor.destroy();
// unset instance for garbage collection
this.redactor = null;
this.$parent.redactor = null;
},
handleInput(val) {
this.$emit('input', val);
}
}
});
app.mount('#app');
</script>
</body>
</html>
This example shows how to make a Vue component Redactor so that you can run multiple instances of the editor on a page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Redactor</title>
<link rel="stylesheet" href="/redactor.css">
</head>
<body>
<div id="app">
<Redactor :config="configOptions" :content="content1"></Redactor>
<br><br>
<Redactor :config="{ plugins: ['emoji'] }" :content="content2"></Redactor>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="/redactor.js"></script>
<script src="/your-folder-to-plugin/emoji.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
configOptions: {},
content1: '<p>Hello world 1!</p>',
content2: '<p>Hello world 2!</p>'
};
}
});
app.component('Redactor', {
template: '<textarea ref="redactor"></textarea>',
props: {
config: Object,
content: String
},
mounted() {
this.init();
},
beforeUnmount() {
this.destroy();
},
methods: {
init() {
const config = {
...this.config,
content: this.content,
subscribe: {
'editor.change': html => {
this.handleInput(html);
return html;
}
}
};
// Init Redactor
this.redactor = Redactor(this.$refs.redactor, config);
},
destroy() {
if (this.redactor) {
this.redactor.destroy();
}
},
handleInput(val) {
this.$emit('input', val);
}
}
});
app.mount('#app');
</script>
</body>
</html>