I am currently engaged in a Vue project that employs ckeditor within one of its components. My goal is to configure hyperlinks so that they open in a new tab whenever an external link is detected.
Based on the documentation, I understand that achieving this involves setting up an editorConfig object within the data property of the instance.
Below is the code snippet showcasing what I have implemented:
<template>
<div @click="toggleEdit">
<h3>Program Body</h3>
<div v-if="!editing" v-html="active.body" />
<ckeditor :config="editorConfig" :editor="editor" v-if="editing" v-model="form.body" />
<div v-if="editing" class="row row__end padding__sm">
<button class="btn btn__cancel" @click.stop="cancelUpdate">Cancel</button>
<button class="btn btn__green" @click.stop="updateProgram">Update</button>
</div>
</div>
</template>
<script>
import { mapActions } from "vuex";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
export default {
props: ["active", "user"],
data() {
return {
editor: ClassicEditor,
editorConfig: {
link: {
addTargetToExternalLinks: true
}
},
permissions: ["admin", "marketing"],
editing: false,
form: {
formObject: "programs",
formAction: "edit",
_id: this.active._id,
body: this.active.body
}
};
},
Even though I verified that the ckeditor tag uses the config by adjusting other properties, it fails to add any attributes to links that begin with http:// or https://.
Your assistance in resolving this issue would be highly appreciated.