استفاده از ویرایشگر Quill در php و mysql
Quill در php – یکی از ویرایشگر های WYSIWYG قدرتمند است که انتخاب خوبی برای ویرایش و افزودن محتوا در cms می باشد .
الگو (template) استفاده شده در این آموزش همان الگویی (template) است که در آموزش tinymce استفاده کرده بودیم . پس فقط بخش هایی که متفاوت از الگو است را در این جا به نمایش می گذارم .
- اسکریپت toolbar_quill.php : تولبار Quill
- اسکریپت create.php : فرم ایجاد مطلب
- اسکریپت edit.php : فرم ویرایش مطلب
- اسکریپت app.js : جهت config ویرایشگر Quill
ویدیوی کارکرد Quill.js
1- اسکریپت toolbar_quill.php
<div id="toolbar-container"> <span class="ql-formats"> <select class="ql-font"></select> <select class="ql-size"></select> </span> <span class="ql-formats"> <button class="ql-bold"></button> <button class="ql-italic"></button> <button class="ql-underline"></button> <button class="ql-strike"></button> </span> <span class="ql-formats"> <select class="ql-color"></select> <select class="ql-background"></select> </span> <span class="ql-formats"> <button class="ql-script" value="sub"></button> <button class="ql-script" value="super"></button> </span> <span class="ql-formats"> <select class="ql-header"> <option value="1">Heading 1</option> <option value="2">Heading 2</option> <option value="3">Heading 3</option> <option value="4">Heading 4</option> <option value="5">Heading 5</option> <option value="6">Heading 6</option> </select> <button class="ql-blockquote"></button> <button class="ql-code-block"></button> </span> <span class="ql-formats"> <button class="ql-list" value="ordered"></button> <button class="ql-list" value="bullet"></button> <button class="ql-indent" value="-1"></button> <button class="ql-indent" value="+1"></button> </span> <span class="ql-formats"> <button class="ql-direction" value="rtl"></button> <select class="ql-align"></select> </span> <span class="ql-formats"> <button class="ql-link"></button> <button class="ql-image"></button> <button class="ql-video"></button> <button class="ql-formula"></button> </span> <span class="ql-formats"> <button class="ql-clean"></button> </span> </div>
2- اسکریپت create.php
<?php require_once "parts/dashboard/header.php";?> <?php show_form_error(true);?> <form action="process.php" method="post"> <input type="text" name="title" id="title" placeholder="عنوان" value="<?=form_value('title')?>"><br> <?php require_once "parts/dashboard/toolbar_quill.php";?> <div data-ql-type="hidden" data-ql-name="content" data-ql-id="content" class="editor"><?=form_value('content')?></div> <input type="hidden" name="ref" id="ref" value="<?=filename_to_ref(__FILE__)?>"> <input type="submit" name="save" id="save" value="ثبت"> </form> <?php require_once "parts/dashboard/footer.php";?>
3- اسکریپت edit.php
<?php require_once "parts/dashboard/header.php";?> <?php show_form_error(true);?> <?php $row = $GLOBALS['data_middleware_callback'];?> <form action="process.php" method="post"> <input type="text" name="title" id="title" placeholder="عنوان" value="<?=form_value('title', $row['title'])?>"><br> <?php require_once "parts/dashboard/toolbar_quill.php";?> <div data-ql-type="hidden" data-ql-name="content" data-ql-id="content" class="editor"><?=form_value('content', $row['content'])?></div> <input type="hidden" name="ref" id="ref" value="<?=filename_to_ref(__FILE__)?>"> <input type="hidden" name="id" id="id" value="<?=$_GET['id']?>"> <input type="submit" name="save" id="save" value="ثبت"> </form> <?php require_once "parts/dashboard/footer.php";?>
4- اسکریپت app.js
window.addEventListener("load" , function(){ function createElementAndAddAttrFromOther(parentNode , refNode ,attrPrefix = "",tag = "div"){ const newNode = document.createElement(tag); const refNodeAttrs = refNode.getAttributeNames(); for(const attr of refNodeAttrs){ if(attr.search(attrPrefix) != -1){ const attrKey = attr.replace(attrPrefix , ""); const attrValue = refNode.getAttribute(attr); newNode.setAttribute(attrKey , attrValue); } } parentNode.insertBefore(newNode , refNode); return newNode; } function triggerDirectionEditor(){ document.querySelector(".ql-direction").dispatchEvent(new Event("click")); } function updateInputHtml(editor , inputContent){ let html_content = editor.root.innerHTML; const raw_content = editor.root.textContent; if(!raw_content){ html_content = ""; } inputContent.value = html_content; } var options = { placeholder: 'چه در ذهن خود داری !', modules: { toolbar: '#toolbar-container' }, theme: 'snow' }; const editors = document.getElementsByClassName("editor"); for(const editorNode of editors){ window.editor = new Quill(editorNode , options); // add input to get save html content const inputContent = createElementAndAddAttrFromOther(editorNode.parentElement ,editorNode ,"data-ql-","input") // save html content to input editor.on('editor-change', function(){ updateInputHtml(editor,inputContent); }); // active right to left editor triggerDirectionEditor(); } });
قبل از استفاده از پروژه وارد inc/db.php شده و اطلاعات mysql را وارد کنید سپس وارد پوشه import database شده و دیتابیس را وارد کنید .
ارسال نظر