how to add text input to right area

[xxl4]

Hello Everyone!

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

how can i start ? Thank you.

[givanz]

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]

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.