I need help to change an ckEditor icon: "New page" to a simple link to a page of the same website.
1 Answer
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
.
-
-
Yes Richard, I'm shure now your method we'll work. Thank you very much. Feb 22, 2019 at 18:00
-
1I 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