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

ckeditor در php و js – این ویرایشگر یکی از با سابقه ترین rich text editor ها می باشد که همچنان پر قدرت تا الان مسیر خود را ادامه داده است .

از این رو مطالب یک cms ساده را با این ادیتور مدیریت می کنیم .

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

1. اسکریپت create.php : فرم ایجاد مطلب
2. اسکریپت edit.php : فرم ویرایش مطلب
3. اسکریپت app.js : نصب و config ویرایشگر ckeditor

ویدیوی ckeditor

1- اسکریپت 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" class="text-align-end" placeholder="عنوان" value="<?=form_value('title')?>"><br>
            <div id="toolbar-container"></div>
            <div data-cke-type="hidden" data-cke-name="content" data-cke-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";?>

2- اسکریپت 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" class="text-align-end" placeholder="عنوان" value="<?=form_value('title', $row['title'])?>"><br>
            <div data-cke-type="hidden" data-cke-name="content" data-cke-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";?>

3- اسکریپت app.js

window.addEventListener("load" , function(){

    function ckeditorFocusIn(editor , editorInputContent){
              addHtmlToInput(editor , editorInputContent);
              fixDirectionEditor(editor , editorInputContent);
    }


    function addHtmlToInput(editor , editorInputContent){
               const htmlContent = editor.getData();
               editorInputContent.value = htmlContent;
    }

    function fixDirectionEditor(editor , editorInputContent){

        const editorNode = editor.sourceElement;

        editorNode.setAttribute("style" , "text-align:right");
        editorNode.removeAttribute("dir");
               
        const DOMRight = document.querySelectorAll(".ck-content > *[style *='rtl']");
        const DOMLeft = document.querySelectorAll(".ck-content > *:not([style *='rtl'])");
        const DOMAll = document.querySelectorAll(".ck-content > *");
        

        // direction RTL actions
        for(let item of DOMRight){
           item.setAttribute("style" , "direction: rtl;text-align:right");
        }

        // direction LTR actions
        for(let item of DOMLeft){
            item.setAttribute("style" , "direction: ltr;text-align:left");
        }

        // when editor is empty
        if(DOMAll.length == 0 || (DOMAll.length == 1 && !DOMAll[0].textContent.trim())){
            document.querySelector(".ck-direction-dropdown .ck-reset .ck-off").dispatchEvent(new Event('click'))
        }


    }

    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;
    }

    const editors = document.querySelectorAll( '.editor' );
    let i = 0;
    for(let editorNode of editors){
    const editorNodeParent = editorNode.parentElement;
    DecoupledEditor.create(editorNode , {
        toolbar : [ 
        'heading', '|',
        'fontfamily', 'fontsize', '|',
        'alignment', '|',
        'fontColor', 'fontBackgroundColor', '|',
        'bold', 'italic', 'strikethrough', 'underline', 'subscript', 'superscript', '|',
        'link', '|',
        'outdent', 'indent', '|',
        'bulletedList', 'numberedList', 'todoList', '|',
        'code', 'codeBlock', '|',
        'insertTable', '|',
        'uploadImage', 'blockQuote', '|',
        'undo', 'redo' ,
        'direction',
        ],
        heading: {
            options: [
                { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
                { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' },
                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
            ]
        },

        language : {
            ui : "fa",
            content: "fa"
        }
        
    }).then( editor => {
         
             const editorNodeAttributes = editorNode.getAttributeNames();

             window.editor = editor;


            // create input for editor data
            const editorInputContent = createElementAndAddAttrFromOther(editorNodeParent ,editorNode ,"data-cke-","input");

            // create toolbar
            const toolbarNode = document.createElement("div");
            toolbarNode.setAttribute("id" , "toolbar-ckeditor-rpd-" + (i+1) );

            // append toolbar
            editorNodeParent.insertBefore(toolbarNode , editorNode);
            const toolbarContainer = toolbarNode;

            toolbarContainer.appendChild( editor.ui.view.toolbar.element );

             // register for new change to save in input
           editorNode.addEventListener("keyup"  , ()=>ckeditorFocusIn(editor , editorInputContent));
           editorNode.addEventListener("click"  , ()=>ckeditorFocusIn(editor , editorInputContent));

           toolbarNode.addEventListener("click"  , ()=>ckeditorFocusIn(editor , editorInputContent));

           // fix form validation back to get content for WYSIWYG
           addHtmlToInput(editor , editorInputContent)

            });      
    }

    i++;
	
});

قبل از استفاده از پروژه وارد inc/db.php شده و اطلاعات mysql را وارد کنید سپس وارد پوشه import database شده و دیتابیس را وارد کنید .

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