Question

我正在研究一个Vue项目，该项目在一个组件中使用ckeditor。我试图将超链接设置为在检测到外部链接时使用target =“ blank”打开。

根据文档，我可以使用实例的data属性中的editorConfig对象来执行此操作。

这是我的代码：

<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
      }
    };
  },

我已经确认ckeditor标记通过更改其他一些属性来使用配置，但是它从未向以http：//或https：//开头的链接添加任何属性。

感谢您的帮助。

Answer 1

确保更新至ckeditor / ckeditor5-vue的最新版本。因为这将解决您的问题。有关安装说明，请访问https://www.npmjs.com/package/@ckeditor/ckeditor5-vue/v/1.0.1

这里是简化的代码笔，显示了与1.0.1 https://www.npmjs.com/package/@ckeditor/ckeditor5-vue版一起使用的此功能

https://codepen.io/twickstrom/pen/rNOGZYb

访问笔，突出显示一个单词，添加链接并查看源代码，瞧！ _target属性已附加。

这是BASIC代码。

主要JS

Vue.use(CKEditor);

组件

<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>

data: {
  editor: ClassicEditor,
  editorData: '<h1>Title</h1><p>Content of the editor.</p>',
  editorConfig: {
    link: {
      addTargetToExternalLinks: true
    }
  }
}

如果在验证版本后仍然遇到问题，我将剔除基本知识之外的所有内容，并开始阅读复杂性，直到找到罪魁祸首为止。

Vue CKEditor外部链接

1 个答案: