Размещаем Quill на странице
{"ops":[{"attributes":{"bold":true},"insert":"Quill"},{"insert":" — это современный богатый совместимый и расширяемый текстовый редактор от известной компании Salesforce.com. «Перо» было разработано с целью избавиться от классического представления о WYSIWYG. На самом деле "},{"attributes":{"bold":true},"insert":"Quill "},{"insert":"очень гибкий и очень очень модульный. Стоит посмотреть документацию к API, после чего сразу будет понятно, что написан проект по-умному.\nПосле загрузки"},{"attributes":{"bold":true},"insert":" Quill"},{"insert":" (смотрите в предыдущей статье) установим "},{"attributes":{"bold":true},"insert":"Quill"},{"insert":" в наш проект, для этого в "},{"attributes":{"bold":true},"insert":"Html"},{"insert":" нашей страницы, создадим form.\n"}]}
{"ops":[{"insert":"В "},{"attributes":{"bold":true},"insert":"form"},{"insert":" вставим "},{"attributes":{"bold":true},"insert":"div,"},{"insert":" туда, где у нас должно быть поле для ввода текста, у формы обязательно задаем "},{"attributes":{"bold":true},"insert":"id=\" \" "},{"insert":":\n<form role=\"form\" method=\"post\" action=\" \" id=\"FormId\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"<div id=\"editor\" class=\"editor\"><p></p></div>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</form>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Добавим в "},{"attributes":{"bold":true},"insert":"div style"},{"insert":", чтобы отрегулировать ширину поля ввода:\n<div id=\"editor\" class=\"editor\" style=\"min-height: 200px;\"><p></p></div>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Добавляем в"},{"attributes":{"bold":true},"insert":" form "},{"insert":"поле "},{"attributes":{"bold":true},"insert":"input"},{"insert":" c "},{"attributes":{"bold":true},"insert":"type=\"hidden\""},{"insert":" и пустым значением "},{"attributes":{"bold":true},"insert":"valui =\" \""},{"insert":", "},{"attributes":{"bold":true},"insert":"id"},{"insert":" и "},{"attributes":{"bold":true},"insert":"class"},{"insert":" в"},{"attributes":{"bold":true},"insert":" input "},{"insert":"и "},{"attributes":{"bold":true},"insert":"div"},{"insert":" не должны совпадать, \n<input name=\"content\" id=\"content\" type=\"hidden\" class=\"form-control\" value=\"\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"он будет перехватывать значение текста и сохранять в "},{"attributes":{"bold":true},"insert":"MySQL"},{"insert":", поэтому в таблице имя столбца, куда будет сохраняться текст, должно совпадать с именем в"},{"attributes":{"bold":true},"insert":" input "},{"insert":"(рис.1). И не забываем добавить кнопку отправки формы и прописать "},{"attributes":{"bold":true},"insert":"action"},{"insert":", для "},{"attributes":{"bold":true},"insert":"Laravel"},{"insert":" будет, что-то типа "},{"attributes":{"bold":true},"insert":"action =\"{{route('text.store')}\""},{"insert":", где"},{"attributes":{"bold":true},"insert":" text"},{"insert":" (пишем с маленькой буквы), это часть имени контроллера "},{"attributes":{"bold":true},"insert":"TextController.php"},{"insert":", а "},{"attributes":{"bold":true},"insert":"store"},{"insert":" - функция в контроллере, для обработки или сохранения формы.\n"}]}
{"ops":[{"insert":"Конечный результат будет выглядеть примерно так:\n<form role=\"form\" method=\"post\" action=\"{{route('text.store')}\" enctype=\"multipart/form-data\" id=\"FormId\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <div class=\"form-group\" id=\"con\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <label for=\"content\">Контент</label>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <input name=\"content\" id=\"content\" type=\"hidden\" class=\"form-control\" value=\"\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <div id=\"editor\" class=\"editor\" style=\"min-height: 200px;\"><p></p></div>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" </div>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <div class=\"card-footer\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <button type=\"submit\" class=\"btn btn-primary\">Сохранить</button>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" </div> "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</form>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Но, если сейчас вы перейдете на страницу, вы ничего не увидите "},{"attributes":{"bold":true},"insert":"Quill"},{"insert":" нужно подключить, как правильно это сделать читайте в моей следующей статье. Буду рада если моя статья была вам полезна.\n"}]}
Другие статьи этого автора
