| <!DOCTYPE html> |
| <html lang="fa" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ویرایشگر متن پیشرفته با CKEditor</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap'); |
| |
| body { |
| font-family: 'Vazirmatn', sans-serif; |
| } |
| |
| .ck.ck-editor__editable:not(.ck-editor__nested-editable) { |
| min-height: 500px; |
| } |
| |
| .dark-mode { |
| background-color: #1a202c; |
| color: #f7fafc; |
| } |
| |
| .dark-mode .ck.ck-toolbar { |
| background-color: #2d3748 !important; |
| border-color: #4a5568 !important; |
| } |
| |
| .dark-mode .ck.ck-editor__main>.ck-editor__editable { |
| background-color: #2d3748 !important; |
| border-color: #4a5568 !important; |
| color: #f7fafc !important; |
| } |
| |
| .dark-mode .ck.ck-button:not(.ck-disabled):hover, |
| .dark-mode .ck.ck-button.ck-on, |
| .dark-mode a.ck.ck-button.ck-on, |
| .dark-mode .ck.ck-button.ck-on:hover { |
| background-color: #4a5568 !important; |
| } |
| |
| .dark-mode .ck.ck-dropdown__panel { |
| background-color: #2d3748 !important; |
| border-color: #4a5568 !important; |
| } |
| |
| .dark-mode .ck.ck-list__item:hover:not(.ck-disabled) { |
| background-color: #4a5568 !important; |
| } |
| |
| .dark-mode .ck.ck-input-text { |
| background-color: #2d3748 !important; |
| border-color: #4a5568 !important; |
| color: #f7fafc !important; |
| } |
| |
| .dark-mode .ck.ck-label { |
| color: #f7fafc !important; |
| } |
| |
| .fullscreen { |
| position: fixed !important; |
| top: 0 !important; |
| left: 0 !important; |
| right: 0 !important; |
| bottom: 0 !important; |
| z-index: 1000 !important; |
| background: white; |
| padding: 1rem; |
| } |
| |
| .dark-mode .fullscreen { |
| background: #2d3748; |
| } |
| |
| .fullscreen .ck.ck-editor__main>.ck-editor__editable { |
| min-height: calc(100vh - 100px) !important; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100"> |
| <div class="container mx-auto p-4 max-w-6xl"> |
| <h1 class="text-3xl font-bold text-center mb-6 text-blue-600">ویرایشگر متن پیشرفته با CKEditor</h1> |
| |
| <div class="flex justify-between items-center mb-4"> |
| <div class="flex space-x-2 space-x-reverse"> |
| <button id="dark-mode-toggle" class="p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700" title="حالت تاریک/روشن"> |
| <i class="fas fa-moon"></i> |
| </button> |
| <button id="fullscreen-toggle" class="p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700" title="حالت تمام صفحه"> |
| <i class="fas fa-expand"></i> |
| </button> |
| </div> |
| |
| <div class="flex space-x-2 space-x-reverse"> |
| <button id="save-html" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"> |
| <i class="fas fa-save ml-1"></i> ذخیره به عنوان HTML |
| </button> |
| <button id="save-pdf" class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"> |
| <i class="fas fa-file-pdf ml-1"></i> ذخیره به عنوان PDF |
| </button> |
| </div> |
| </div> |
| |
| <div id="editor-container"> |
| |
| </div> |
| |
| <div class="mt-6 flex justify-between items-center"> |
| <div class="text-sm text-gray-500 dark:text-gray-400"> |
| <span id="word-count">کلمات: 0</span> | |
| <span id="character-count">کاراکترها: 0</span> |
| </div> |
| <div class="text-sm text-gray-500 dark:text-gray-400" id="current-time"> |
| |
| </div> |
| </div> |
| |
| <div class="mt-4 text-center text-gray-500 dark:text-gray-400 text-sm"> |
| ویرایشگر متن پیشرفته با CKEditor - تمام حقوق محفوظ است © 2023 |
| </div> |
| </div> |
|
|
| |
| <script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/super-build/ckeditor.js"></script> |
| |
| |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> |
| |
| <script> |
| |
| CKEDITOR.ClassicEditor.create(document.getElementById("editor-container"), { |
| toolbar: { |
| items: [ |
| 'undo', 'redo', |
| '|', 'heading', |
| '|', 'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor', |
| '|', 'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', |
| '|', 'alignment', |
| '|', 'bulletedList', 'numberedList', 'outdent', 'indent', |
| '|', 'link', 'uploadImage', 'blockQuote', 'insertTable', |
| '|', 'code', 'codeBlock', 'htmlEmbed', |
| '|', 'horizontalLine', 'pageBreak', 'specialCharacters', |
| '|', 'sourceEditing' |
| ], |
| shouldNotGroupWhenFull: true |
| }, |
| language: 'fa', |
| list: { |
| properties: { |
| styles: true, |
| startIndex: true, |
| reversed: true |
| } |
| }, |
| heading: { |
| options: [ |
| { model: 'paragraph', title: 'پاراگراف', class: 'ck-heading_paragraph' }, |
| { model: 'heading1', view: 'h1', title: 'سرتیتر 1', class: 'ck-heading_heading1' }, |
| { model: 'heading2', view: 'h2', title: 'سرتیتر 2', class: 'ck-heading_heading2' }, |
| { model: 'heading3', view: 'h3', title: 'سرتیتر 3', class: 'ck-heading_heading3' }, |
| { model: 'heading4', view: 'h4', title: 'سرتیتر 4', class: 'ck-heading_heading4' }, |
| { model: 'heading5', view: 'h5', title: 'سرتیتر 5', class: 'ck-heading_heading5' }, |
| { model: 'heading6', view: 'h6', title: 'سرتیتر 6', class: 'ck-heading_heading6' } |
| ] |
| }, |
| fontFamily: { |
| options: [ |
| 'Vazirmatn, sans-serif', |
| 'Arial, Helvetica, sans-serif', |
| 'Courier New, Courier, monospace', |
| 'Georgia, serif', |
| 'Times New Roman, Times, serif', |
| 'Trebuchet MS, Helvetica, sans-serif', |
| 'Verdana, Geneva, sans-serif', |
| 'default' |
| ], |
| supportAllValues: true |
| }, |
| fontSize: { |
| options: [ 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72 ], |
| supportAllValues: true |
| }, |
| htmlSupport: { |
| allow: [ |
| { |
| name: /.*/, |
| attributes: true, |
| classes: true, |
| styles: true |
| } |
| ] |
| }, |
| htmlEmbed: { |
| showPreviews: true |
| }, |
| link: { |
| decorators: { |
| addTargetToExternalLinks: true, |
| defaultProtocol: 'https://', |
| toggleDownloadable: { |
| mode: 'manual', |
| label: 'قابل دانلود', |
| attributes: { |
| download: 'file' |
| } |
| } |
| } |
| }, |
| mention: { |
| feeds: [ |
| { |
| marker: '@', |
| feed: [ |
| '@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes', '@chocolate', '@cookie', '@cotton', '@cream', |
| '@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread', '@gummi', '@ice', '@jelly-o', |
| '@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding', '@sesame', '@snaps', '@soufflé', |
| '@sugar', '@sweet', '@topping', '@wafer' |
| ], |
| minimumCharacters: 1 |
| } |
| ] |
| }, |
| removePlugins: [ |
| 'CKBox', |
| 'CKFinder', |
| 'EasyImage', |
| 'RealTimeCollaborativeComments', |
| 'RealTimeCollaborativeTrackChanges', |
| 'RealTimeCollaborativeRevisionHistory', |
| 'PresenceList', |
| 'Comments', |
| 'TrackChanges', |
| 'TrackChangesData', |
| 'RevisionHistory', |
| 'Pagination', |
| 'WProofreader', |
| 'MathType' |
| ] |
| }).then(editor => { |
| window.editor = editor; |
| |
| |
| editor.model.document.on('change:data', () => { |
| updateCounts(); |
| }); |
| |
| |
| editor.setData('<p style="text-align: right;">متن خود را اینجا بنویسید...</p>'); |
| }).catch(error => { |
| console.error(error); |
| }); |
| |
| |
| function updateCounts() { |
| if (!window.editor) return; |
| |
| const text = window.editor.getData().replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim(); |
| const words = text ? text.split(/\s+/).filter(word => word.length > 0).length : 0; |
| const characters = text.length; |
| |
| document.getElementById('word-count').textContent = `کلمات: ${words}`; |
| document.getElementById('character-count').textContent = `کاراکترها: ${characters}`; |
| } |
| |
| |
| function updateTime() { |
| const now = new Date(); |
| const hours = now.getHours().toString().padStart(2, '0'); |
| const minutes = now.getMinutes().toString().padStart(2, '0'); |
| document.getElementById('current-time').textContent = `زمان: ${hours}:${minutes}`; |
| } |
| |
| |
| updateTime(); |
| setInterval(updateTime, 60000); |
| |
| |
| document.getElementById('dark-mode-toggle').addEventListener('click', function() { |
| document.body.classList.toggle('dark-mode'); |
| const icon = this.querySelector('i'); |
| if (document.body.classList.contains('dark-mode')) { |
| icon.classList.replace('fa-moon', 'fa-sun'); |
| } else { |
| icon.classList.replace('fa-sun', 'fa-moon'); |
| } |
| }); |
| |
| |
| document.getElementById('fullscreen-toggle').addEventListener('click', function() { |
| const container = document.getElementById('editor-container'); |
| container.classList.toggle('fullscreen'); |
| |
| const icon = this.querySelector('i'); |
| if (container.classList.contains('fullscreen')) { |
| icon.classList.replace('fa-expand', 'fa-compress'); |
| } else { |
| icon.classList.replace('fa-compress', 'fa-expand'); |
| } |
| }); |
| |
| |
| document.getElementById('save-html').addEventListener('click', function() { |
| if (!window.editor) return; |
| |
| const content = window.editor.getData(); |
| const blob = new Blob([content], { type: 'text/html' }); |
| const url = URL.createObjectURL(blob); |
| |
| const a = document.createElement('a'); |
| a.href = url; |
| a.download = 'document.html'; |
| a.click(); |
| |
| URL.revokeObjectURL(url); |
| }); |
| |
| |
| document.getElementById('save-pdf').addEventListener('click', function() { |
| if (!window.editor) return; |
| |
| |
| const editorContent = document.querySelector('.ck.ck-editor__main .ck-editor__editable'); |
| |
| html2canvas(editorContent).then(canvas => { |
| const imgData = canvas.toDataURL('image/png'); |
| const pdf = new jspdf.jsPDF({ |
| orientation: 'portrait', |
| unit: 'mm' |
| }); |
| |
| |
| const imgWidth = 210; |
| const imgHeight = canvas.height * imgWidth / canvas.width; |
| |
| pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight); |
| pdf.save('document.pdf'); |
| }); |
| }); |
| |
| |
| document.addEventListener('keydown', function(e) { |
| |
| if (e.ctrlKey && e.key === 's') { |
| e.preventDefault(); |
| document.getElementById('save-html').click(); |
| } |
| |
| |
| if (e.ctrlKey && e.key === 'p') { |
| e.preventDefault(); |
| document.getElementById('save-pdf').click(); |
| } |
| |
| |
| if (e.ctrlKey && e.key === 'd') { |
| e.preventDefault(); |
| document.getElementById('dark-mode-toggle').click(); |
| } |
| |
| |
| if (e.key === 'F11') { |
| e.preventDefault(); |
| document.getElementById('fullscreen-toggle').click(); |
| } |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MrHesam/ckeditor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
