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: 3.0.3. 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 = Form::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 resetspecial" id="text">
<label for="text" class="form-label">Text</label>
<textarea name="text" id="text-input">
</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.