FormsBootstrap

A Laravel library to generate forms based on Laravel Collective Forms & HTML, Boostrap 5 CSS Framework, RichText editor, and Icons provided by FontAwesome. Current version: 2.1.7. Project on GitHub. Project on Packagist. Manages also results inputs of packages DateRangePickerHelper, Uploader, and Tags input. Includes form management and validation. This demosite sources available here.

Editor



<script type="text/javascript">
// assigns default init values for editor
var editorConfig = FormsBootstrapUtils::validateEditorParams([ //RichtextEditor values
	  'imageUpload' => false,
	  'fileUpload' => false,
	  'fonts' => false
  ],[ // replaces default editor labels
	  'linkText' => 'Link content'
])
</script>
{!! Form::bsEditor([
  'id' => 'text', //id of field submitted by form
  'labeltext' => 'Text', //label
  'value' => $content, // default content displayed in editor, html code
  'configvar' => 'editorConfig' // refers to above-defined js variable
]); !!}

Output:
<script type="text/javascript">
var editorConfig = { "fonts": false, "imageUpload": false, "fileUpload": false, "translations": { "title": "Title", "white": "White", "black": "Black", "brown": "Brown", "beige": "Beige", "darkBlue": "Dark Blue", "blue": "Blue", "lightBlue": "Light Blue", "darkRed": "Dark Red", "red": "Red", "darkGreen": "Dark Green", "green": "Green", "purple": "Purple", "darkTurquois": "Dark Turquois", "turquois": "Turquois", "darkOrange": "Dark Orange", "orange": "Orange", "yellow": "Yellow", "imageURL": "Image URL", "fileURL": "File URL", "linkText": "Link content", "url": "URL", "size": "Size", "responsive": "Responsive", "text": "Text", "openIn": "Open in", "sameTab": "Same tab", "newTab": "New tab", "align": "Align", "left": "Left", "center": "Center", "right": "Right", "rows": "Rows", "columns": "Columns", "add": "Add", "pleaseEnterURL": "Please enter an URL", "videoURLnotSupported": "Video URL not supported", "pleaseSelectImage": "Please select an image", "pleaseSelectFile": "Please select a file", "bold": "Bold", "italic": "Italic", "underline": "Underline", "alignLeft": "Align left", "alignCenter": "Align centered", "alignRight": "Align right", "addOrderedList": "Add ordered list", "addUnorderedList": "Add unordered list", "addHeading": "Add Heading\/title", "addFont": "Add font", "addFontColor": "Add font color", "addFontSize": "Add font size", "addImage": "Add image", "addVideo": "Add video", "addFile": "Add file", "addURL": "Add URL", "addTable": "Add table", "removeStyles": "Remove styles", "code": "Show HTML code", "undo": "Undo", "redo": "Redo", "close": "Close" } };
</script>
<div class="mb-3" id="text">
<label for="text-input" class="form-label">Text</label>
<textarea id="text-input" name="text" cols="50" rows="10"></textarea>
</div>
<script>
jQuery('#text').sebRichTextHelper(editorConfig);
jQuery('#text').data('sebrichtexthelper').loadContent('...');
</script>


Click here to get an example with several editors in same page, displayed in tabs.


Example




Results