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.86k stars 1.58k forks source link

how to add text input to right area #331

Open xxl4 opened 7 months ago

xxl4 commented 7 months ago

Hello Everyone!

Today, i want to add the input on the right area ,like it.

image

how can i start ? Thank you.

givanz commented 5 months ago

Hi

You can check the preformatted component that has a textarea input to edit the content of the selected element https://github.com/givanz/VvvebJs/blob/master/libs/builder/components-html.js#L913-L914 it uses the innerHTML attribute.

You can add the same text property from preformatted component to the base component https://github.com/givanz/VvvebJs/blob/master/libs/builder/components-common.js#L75-L101 to make it available for all components.

The only thing missing is a CodeEditorInput or RichTextEditorInput to use instead of TextareaInput.

For this you can duplicate the TextareaInput code in https://github.com/givanz/VvvebJs/blob/master/libs/builder/inputs.js#L72-L86 and https://github.com/givanz/VvvebJs/blob/master/editor.html#L848-L854

CodeMirror library is already included and used for code editor and the code can be adapted for the input https://github.com/givanz/VvvebJs/blob/master/libs/builder/plugin-codemirror.js#L12

xxl4 commented 5 months ago

Hi

You can check the preformatted component that has a textarea input to edit the content of the selected element https://github.com/givanz/VvvebJs/blob/master/libs/builder/components-html.js#L913-L914 it uses the innerHTML attribute.

You can add the same text property from preformatted component to the base component https://github.com/givanz/VvvebJs/blob/master/libs/builder/components-common.js#L75-L101 to make it available for all components.

The only thing missing is a CodeEditorInput or RichTextEditorInput to use instead of TextareaInput.

For this you can duplicate the TextareaInput code in https://github.com/givanz/VvvebJs/blob/master/libs/builder/inputs.js#L72-L86 and https://github.com/givanz/VvvebJs/blob/master/editor.html#L848-L854

CodeMirror library is already included and used for code editor and the code can be adapted for the input https://github.com/givanz/VvvebJs/blob/master/libs/builder/plugin-codemirror.js#L12

Thank you for your reply.