kevinchappell / formBuilder

A jQuery plugin for drag and drop form creation
https://formbuilder.online
MIT License
2.63k stars 1.4k forks source link

Multiline Paragraph surrounded with div #1366

Closed a-powolozki closed 1 year ago

a-powolozki commented 1 year ago

Hello,

when i define a multi-line paragraph, its content is placed in a div tag. How can I use something else instead of a div tag?

Thank you in advance.

Regargs Alex

jeremiahsherrill commented 1 year ago

I haven't tested this, but you mean something like this

`class ParagraphField { constructor(config) { this.config = config; this.element = $('

'); this.element.attr('name', this.config.name); this.fields = []; if (this.config.fields) { this.config.fields.forEach(fieldConfig => { var field = $.fn.formBuilder.fields[fieldConfig.type].instantiate(fieldConfig); this.fields.push(field); this.element.append(field.getElement()); }); } }

getElement() { return this.element; }

getValue() { return this.fields.map(field => { return { name: field.config.name, value: field.getValue() }; }); } }

$.fn.formBuilder.addField({ type: 'paragraph', title: 'Paragraph', icon: '📄', template: '

', instantiate: function(config) { return new ParagraphField(config); }, fields: [ { type: 'text', label: 'Label', name: 'label' } ] });`

a-powolozki commented 1 year ago

Hi @jeremiahsherrill , excuse me please for delayed answer.

Could you please explain the code you provider a little bit? Unfortunately i don't realy understand it fully, especially not being an experienced web developer.

I especially don't see any place where multi line output and its surrounding is handled. Thank you a lot in advance.

Regards Alex

lucasnetau commented 1 year ago

Can you please explain what you are trying to achieve, what HTMLElement type would you use? The paragraph control will output the text wrapped in a <p> tag, and formRender will wrap the control in a div (which usually encompasses the label and the control). Multiline is achieved with
tags.

example output for this control definition

{"type":"paragraph","subtype":"p","label":"Line 1<br><br>Line 3<br>"}
<div class="">
  <p id="control-9909632">Line 1<br><br>Line 3<br></p>
</div>
lucasnetau commented 1 year ago

custom templates via layoutTemplates can also be used if you wish to override the wrapping element