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

ckeditor در php و js – این ویرایشگر یکی از با سابقه ترین rich text editor ها می باشد که همچنان پر قدرت تا الان مسیر خود را ادامه داده است .
از این رو مطالب یک cms ساده را با این ادیتور مدیریت می کنیم .
الگو استفاده شده در این آموزش همان الگویی است که در آموزش tinymce استفاده کرده بودیم . بنابراین فقط بخش هایی که متفاوت از الگو است را در این جا به نمایش می گذارم .
- اسکریپت create.php : فرم ایجاد مطلب
- اسکریپت edit.php : فرم ویرایش مطلب
- اسکریپت 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 شده و دیتابیس را وارد کنید .
ارسال نظر