Vue CKEditor Внешние ссылки - PullRequest
Новая
       27

Vue CKEditor Внешние ссылки

0 голосов
/ 01 мая 2020

Я работаю над проектом Vue, который использует ckeditor в одном компоненте. Я пытаюсь настроить открытие гиперссылок с помощью target = "blank" при обнаружении внешней ссылки.

В соответствии с документами я могу сделать это с объектом editorConfig в свойстве data экземпляра.

Вот мой код: 

<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://.

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 01 мая 2020

Обязательно обновите до последней версии 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 добавлен.

Вот код BASI C.

Основной 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
    }
  }
}

Если после проверки версии у вас все еще есть проблемы, я бы убрал все, кроме основ, и начал читать сложность, пока вы не найдете виновника.

...