Преобразуйте иконку NewPage из CkEditor в простую ссылку

Question

Мне нужна помощь, чтобы изменить значок ckEditor: «Новая страница» на простую ссылку на страницу того же сайта.

введите описание изображения здесь

Answer 1

Во-первых, нам нужно найти способ выбрать элемент HTML на странице, который представляет значок.Это делается с помощью HTML-класса или атрибутов id.Щелкните правой кнопкой мыши элемент в браузере и «осмотрите» его.

На этой странице CkEditor монтируется на страницу в

<div id="cke_editor1 class="cke_1"></div>

В этомdiv элемент, есть ряд элементов HTML, которые представляют CkEditor.Нам нужно перейти к тому, который представляет создание нового документа.В этом примере я выберу кнопку «Вставить».

<div id="cke_14" class="cke_button__paste"></div>

Далее нам нужно выбрать этот HTML-элемент с помощью JavaScript.Существуют методы DOM JavaScript для выбора элементов HTML на основе класса или идентификатора.Поскольку предполагается, что идентификаторы являются уникальными для страницы, мы можем использовать это как способ получить ее.

let pasteButton = document.getElementById("cke_14") // or
//  pasteButton = document.querySelector("#cke_14")

Наконец, мы хотим определить, что происходит, когда событие click запускается для этого элемента.Мы можем сделать это, вызвав window.open, когда свойство onclick выбранного элемента запущено.

let pasteButton = document.getElementById("cke_14")

pasteButton.onclick = function() {
    let url = "https://ckeditor.com/docs/index.html"
    window.location.replace(url)  // or
    // window.open(url, '_self')
}

Откройте консоль JavaScript на этой странице и вставьте этот код.Затем попробуйте нажать на кнопку «Вставить».Страница изменится на https://ckeditor.com/docs/index.html.