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

استفاده از ویرایشگر 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

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

لیست نظرات

  1. جاوید
    جاوید

    سلام وقت بخیر اگر بخوام از قابلیت آپلود عکس استفاده کنم باید چه کار کنم، مثلا یکی توی سایت میاد یه نظر ثبت می کنه که داخلش از عکس استفاده کرد، خیلی گشتم منتها چیزخاصی پیدا نکردم و هرچی هم که بود برای نسخه 4 بود و من میخوام با نسخه 5 این کار رو انجام بدم، بیشتر اموزش ها هم یا برای لاراول بود یا اِی اِس پی و برای پی اچ پی خیلی کمه

    12 فروردین 1402 | 23:25:47
  • حسین باقری
    حسین باقری

    درود ، این آموزش احتمالا مشکل تون رو حل می کنه

    12 فروردین 1402 | 23:40:04
contact us