search

givanz / VvvebJs

Drag and drop page builder library written in vanilla javascript without dependencies or build tools.
https://www.vvveb.com/vvvebjs/editor.html
Apache License 2.0
6.91k stars 1.59k forks source link

Make a input to change the page <title> #291

Closed vinumweb closed 8 months ago

vinumweb commented 1 year ago

How do i make a input to change the <title> tag on the page that im editing?

Thanks in advance. Peter

givanz commented 1 year ago

Hi

The easiest way is to add a component for <html> element that allows editing child elements like <title> You can use the following code to add the component.

Vvveb.Components.extend("_base", "html/html", {
    nodes: ["html"],
    name: "Html Page",
    image: "icons/posts.svg",
    html: `<html><body></body></html>`,
    properties: [{
        name: "Title",
        key: "title",
        htmlAttr: "innerHTML",
        inputtype: TextInput,
        child:"title",
    }, {
        name: "Meta description",
        key: "description",
        htmlAttr: "content",
        inputtype: TextInput,
        child:'meta[name=description]',
    }, {
        name: "Meta keywords",
        key: "keywords",
        htmlAttr: "content",
        inputtype: TextInput,
        child:'meta[name=keywords]',
    }]
});

The only downside is that to select the html element you need to first select body and then use the Select parent action from the element toolbar.

vinumweb commented 1 year ago

Hey Givanz. Thanks for the reply. I will try try that now. Just to be sure: Im making a website where my customers can create a website using vvvebjs. Is that okay? Or what. I really hope it is.

And just another question. When using the text editor on text in vvvebjs if i use the underline and all that it creates a element. How do i make that now appear when editing it again. Its very problematic editing text that has already been edited with underlines and bold text

givanz commented 1 year ago

Is that okay? Or what. I really hope it is.

Your question is related to license?

It is allowed, you can use VvvebJs for both free or commercial projects without any restriction.

VvvebJs is licensed under permissive Apache 2 license.

How do i make that now appear when editing it again.

You can't edit the new element that was created by underline button in text editor? Can you please provide more details? if possible a screencast or screenshot.

vinumweb commented 1 year ago

Wow, thanks for the quick reply. I think it is absolutely amazing that you want to share this project with other for FREE! You are the definition of a legend.

image

This is what i mean. It makes theese span elements and if i click the whole <h1> thing i cant delete the underline. I need to delete the whole text and retype it without underline.

givanz commented 1 year ago

I like the open source concept and I believe that collaboration is a better way to develop software, it also has the advantage of a wider audience that leads to more people using the code.

i cant delete the underline.

Thanks for the screenshot, this is a limitation (undo the underline/italic operation) of the text editor that will be fixed in the next update.

vinumweb commented 1 year ago

Alright! Thank you Givanz!

givanz commented 1 year ago

I disabled element highlighting and select inside text editor in the last commit to avoid issues with elements created by underline/bold etc actions.

vinumweb commented 1 year ago

Thanks! Where did you do it? In wich file. So i dont need to change everything

vinumweb commented 1 year ago

Oh im sorry the link showed me. Thanks!

vinumweb commented 1 year ago

It still shows the when hovering and still need to delete whole text

givanz commented 1 year ago

Try clearing browser cache, you can also check if it works here VvvebJs editor

vinumweb commented 1 year ago

It works kinda. still shows up as a element and it only works on italic and underline not bold

givanz commented 1 year ago

I rechecked and it works for bold also, please see https://gofile.io/d/9CFu1f

vinumweb commented 1 year ago

Ohh its because i wasnt too clear about what i meant. After you make all the changes then click on another element. Then if you try to change the bold and underline it wont work.

givanz commented 1 year ago

If you exit the text editor and then select the newly created element by bold button then it will treat it as a new text block this can't be avoided, but if you click on the same parent element and edit the text it will work as expected.

https://gofile.io/d/24Q2Bp

vinumweb commented 1 year ago

Alright but cant you make it so mouse ignores <span> elements if its inside a <h1> element?