استفاده از ویرایشگر Quill در php و mysql

Quill در php – یکی از ویرایشگر های WYSIWYG قدرتمند است که انتخاب خوبی برای ویرایش و افزودن محتوا در cms می باشد .

الگو (template) استفاده شده در این آموزش همان الگویی (template) است که در آموزش tinymce استفاده کرده بودیم . پس فقط بخش هایی که متفاوت از الگو است را در این جا به نمایش می گذارم .

1. اسکریپت toolbar_quill.php : تولبار Quill
2. اسکریپت create.php : فرم ایجاد مطلب
3. اسکریپت edit.php : فرم ویرایش مطلب
4. اسکریپت 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 شده و دیتابیس را وارد کنید .

دانلود سورس Quill در php