I'm trying to create a simple personal offline home page with text links that can be edited without the user having to go into the html code. I have the home page with some blank links done but need some way to edit the links from a form for people who don't understand html. Maybe there is a simple code I could add to each link entry where you can right click it and a mini pop up editor opens like when you right click on a link in your firefox toolbar, click on "properties" and you can edit the link? Thanks for any help!
I'd probably do it using jquery but it's equally do-able with vanilla javascript. Page comes up Click links Box pops up Paste link Save Stored in Javascript Local storage.
I spun up a minimal implementation for you. <!DOCTYPE html> <html lang="en"> <head> <title>URL editor</title> </head> <body> <form name="form1"> <p> Here is the link: <a href="#" id="link1">Link1</a> <p> <p> Enter the link's new name: <input type="text" name="newName"> <p> Enter the new link url: <input type="url" name="newUrl"> </p> <input type="button" name="button" value="Change Link"> </form> <script> myForm = document.form1; newName = form1.newName; newUrl = form1.newUrl; linkToBeChanged = document.getElementById("link1"); button = form1.button; function editLink() { linkToBeChanged.innerHTML = newName.value; link1.setAttribute("href", newUrl.value); } button.addEventListener("click", editLink); </script> </body> </html> Code (markup):
I just saw this...You're phenomenal! If this works I want to throw some cash at you for your work if you let me. Very cool of you. Thank you so much. I will text it out as soon as I find the time!
I think we could use localstorage to make it permanent (well, permanent up until they manually clear their browser/cookies/etc). The program I made only works for a single link. You wanted to be able to edit a series of links, right? If I had a better idea of your goals, I can try to code it up. It's good practice for me, plus people on this site have been very generous helping me out previously.
Yes I wanted to be able to edit links from within the browser essentially but have the save stick. It actually can be done through a right click "inspect element" and then "edit html", then "save file". But the page is for my father and I'm not sure if that route will be too complicated to remember because it takes him into the html. I imagine what I want would involve a lot of code and slow down the launching of the page, which kind of defeats the purpose.
I have say while that code is not quite what I was looking for, it's pretty fun. Thanks for doing that.
I think that JavaScript can't edit the source file. I believe that can be done with PHP. Usually they recommend that one uses a database for security purposes. Probably a bare-bones WordPress installation with some kind of plugin could do it and still load in a few seconds.