Программирование, Дизайн, Оптимизация

Размещаем Quill на странице

{"ops":[{"attributes":{"size":"18px","font":"courier","color":"red","bold":true},"insert":"Quill"},{"attributes":{"size":"18px"},"insert":" — это современный богатый совместимый и расширяемый текстовый редактор от известной компании Salesforce.com. «Перо» было разработано с целью избавиться от классического представления о"},{"attributes":{"size":"18px","color":"green"},"insert":" "},{"attributes":{"size":"18px","color":"green","font":"courier"},"insert":"WYSIWYG"},{"attributes":{"size":"18px"},"insert":". На самом деле"},{"attributes":{"size":"18px","color":"red","bold":true},"insert":" "},{"attributes":{"size":"18px","color":"red","font":"courier","bold":true},"insert":"Quill "},{"attributes":{"size":"18px"},"insert":"очень гибкий и очень очень модульный. Стоит посмотреть документацию к"},{"attributes":{"size":"18px","color":"green"},"insert":" "},{"attributes":{"size":"18px","color":"green","font":"courier"},"insert":"API"},{"attributes":{"size":"18px"},"insert":", после чего сразу будет понятно, что написан проект по-умному."},{"insert":"\n"},{"attributes":{"size":"18px"},"insert":"После загрузки "},{"attributes":{"size":"18px","color":"red","font":"courier","bold":true},"insert":"Quill"},{"attributes":{"size":"18px"},"insert":" (смотрите в предыдущей статье) установим "},{"attributes":{"size":"18px","color":"red","font":"courier","bold":true},"insert":"Quill"},{"attributes":{"size":"18px"},"insert":" в наш проект, для этого в "},{"attributes":{"size":"18px","color":"green","font":"courier"},"insert":"Html"},{"attributes":{"font":"courier","size":"18px"},"insert":" "},{"attributes":{"size":"18px"},"insert":"нашей страницы, создадим "},{"attributes":{"size":"18px","color":"green","font":"courier","bold":true},"insert":"form"},{"attributes":{"font":"courier","size":"18px","color":"green"},"insert":"."},{"insert":"\n"}]}

{"ops":[{"attributes":{"size":"18px"},"insert":"В"},{"attributes":{"size":"18px","color":"green","bold":true},"insert":" form"},{"attributes":{"size":"18px"},"insert":" вставим "},{"attributes":{"size":"18px","color":"green","bold":true},"insert":"div"},{"attributes":{"size":"18px"},"insert":", туда, где у нас должно быть поле для ввода текста, у формы обязательно задаем "},{"attributes":{"size":"18px","color":"#008a00","bold":true},"insert":"id=\" \""},{"attributes":{"size":"18px"},"insert":" :"},{"insert":"\n

"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"

"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"
"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"size":"18px"},"insert":"Добавим в "},{"attributes":{"size":"18px","color":"green","bold":true},"insert":"div"},{"attributes":{"size":"18px","color":"green"},"insert":" "},{"attributes":{"size":"18px","color":"green","bold":true},"insert":"style"},{"attributes":{"size":"18px"},"insert":", чтобы отрегулировать ширину поля ввода:"},{"insert":"\n

"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"size":"18px"},"insert":"Добавляем в "},{"attributes":{"size":"18px","color":"green","bold":true},"insert":"form"},{"attributes":{"size":"18px"},"insert":" поле "},{"attributes":{"size":"18px","color":"green","bold":true},"insert":"input"},{"attributes":{"size":"18px"},"insert":" c "},{"attributes":{"size":"18px","color":"green","bold":true},"insert":"type=\"hidden\""},{"attributes":{"size":"18px","color":"#008a00","bold":true},"insert":" "},{"attributes":{"size":"18px"},"insert":"и пустым значением"},{"attributes":{"size":"18px","color":"green"},"insert":" "},{"attributes":{"size":"18px","color":"green","bold":true},"insert":"valui =\" \""},{"attributes":{"size":"18px"},"insert":","},{"attributes":{"size":"18px","color":"#e60000"},"insert":" "},{"attributes":{"size":"18px","color":"green","bold":true},"insert":"id"},{"attributes":{"size":"18px","color":"#e60000"},"insert":" и "},{"attributes":{"size":"18px","color":"green","bold":true},"insert":"class"},{"attributes":{"size":"18px","color":"#e60000"},"insert":" в "},{"attributes":{"size":"18px","color":"green","bold":true},"insert":"input"},{"attributes":{"size":"18px","color":"#e60000"},"insert":" и "},{"attributes":{"size":"18px","color":"green","bold":true},"insert":"div"},{"attributes":{"size":"18px","color":"#e60000"},"insert":" не должны совпадать, "},{"insert":"\n"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"size":"18px"},"insert":"он будет перехватывать значение текста и сохранять в "},{"attributes":{"size":"18px","color":"#008a00"},"insert":"MySQL"},{"attributes":{"size":"18px"},"insert":", поэтому в таблице имя столбца, куда будет сохраняться текст, должно совпадать с именем в "},{"attributes":{"size":"18px","color":"green","bold":true},"insert":"input"},{"attributes":{"size":"18px"},"insert":" "},{"attributes":{"size":"18px","color":"red","bold":true},"insert":"(рис.1)"},{"attributes":{"size":"18px"},"insert":". И не забываем добавить кнопку отправки формы и прописать "},{"attributes":{"size":"18px","color":"green","bold":true},"insert":"action"},{"attributes":{"size":"18px"},"insert":", для "},{"attributes":{"size":"18px","color":"red","font":"courier"},"insert":"Laravel"},{"attributes":{"size":"18px"},"insert":" будет, что-то типа "},{"attributes":{"size":"18px","color":"green","bold":true},"insert":"action =\"{{route('text.store')}\""},{"attributes":{"size":"18px"},"insert":", где"},{"attributes":{"size":"18px","color":"#008a00","bold":true},"insert":" "},{"attributes":{"size":"18px","color":"green","bold":true},"insert":"text"},{"attributes":{"size":"18px","color":"#008a00","bold":true},"insert":" "},{"attributes":{"size":"18px"},"insert":"(пишем с маленькой буквы), это часть имени контроллера "},{"attributes":{"size":"18px","color":"green","bold":true},"insert":"TextController.php"},{"attributes":{"size":"18px"},"insert":", а "},{"attributes":{"size":"18px","color":"green","bold":true},"insert":"store"},{"attributes":{"size":"18px"},"insert":" - функция в контроллере, для обработки или сохранения формы."},{"insert":"\n"}]}

{"ops":[{"attributes":{"size":"18px"},"insert":"Конечный результат будет выглядеть примерно так:"},{"insert":"\n

"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"
"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"

"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"
"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"
"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"
"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"
"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"size":"18px"},"insert":"Но, если сейчас вы перейдете на страницу, вы ничего не увидите"},{"attributes":{"size":"18px","color":"red","font":"courier"},"insert":" Quill "},{"attributes":{"size":"18px"},"insert":"нужно подключить, как правильно это сделать читайте в моей следующей статье. Буду рада если моя статья была вам полезна."},{"insert":"\n"}]}