1

I need help to change an ckEditor icon: "New page" to a simple link to a page of the same website.

enter image description here

1 Answer 1

2

First, we need to figure out a way to select the HTML element in the page that represents the icon. This is done using HTML class or id attributes. Right click on the element in the browser, and "Inspect" it.

In this page, the CkEditor is mounted into the page at

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

Within this div element, there is a number of HTML elements that represent the CkEditor. We need to navigate to the one that represents creating a new document. For this example, I'll pick the "Paste" button.

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

Next, we need to select this HTML element using JavaScript. There are JavaScript DOM methods to select HTML elements based on class or id. Since ids are suppose to be unique for a page, we can use that as a way to grab it.

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

Finally, we want to define what happens when the click event is fired on this element. We can do this by calling window.open when the onclick property of the selected element is fired.

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')
}

Open the JavaScript console on this page and paste in this code. Then, try clicking on the "Paste" button. The page will change to https://ckeditor.com/docs/index.html.

3
  • Thanks Richard, I'll try this method Feb 22, 2019 at 17:58
  • Yes Richard, I'm shure now your method we'll work. Thank you very much. Feb 22, 2019 at 18:00
  • 1
    I found the id of my icon: < a id="cke_8" . So I'll be able to work on it with javascript. Feb 22, 2019 at 18:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.