کار با CkEditor با قابلیت آپلود عکس

پاسخ هوش مصنوعی

برای استفاده از CKEditor با قابلیت آپلود عکس و استفاده از کد (CodeSnippet)، می توانید از نمونه زیر استفاده کنید. در این مثال، از CKEditor 5 استفاده می شود.

ابتدا، باید فایل های CKEditor را به پروژه خود اضافه کنید. می توانید از CDN زیر استفاده کنید:

سپس، HTML زیر را در فایل خود اضافه کنید:

حالا می توانید CKEditor را با قابلیت آپلود تصویر و CodeSnippet راه اندازی کنید. برای این کار، نیاز دارید از پلاگین های مناسب استفاده کنید:

ClassicEditor
    .create(document.querySelector('#editor'), {
        ckfinder: {
            uploadUrl: 'YOUR_UPLOAD_URL_HERE'
        },
        toolbar: [ 'heading', '|', 'bold', 'italic', '|', 'ckfinder', 'imageUpload', '|', 'codeSnippet' ],
        codeSnippet: {
            languages: [
                { name: 'HTML', class: 'language-html' },
                { name: 'CSS', class: 'language-css' },
                { name: 'JavaScript', class: 'language-javascript' },
                // سایر زبان های کد را در اینجا اضافه کنید
            ]
        }
    })
    .catch(error => {
        console.error(error);
    });

در کد بالا، جایگزین YOUR_UPLOAD_URL_HERE باید URL سرور آپلود عکس شما باشد. همچنین، اطمینان حاصل کنید که سرور شما قابلیت پردازش آپلود تصاویر را داشته باشد.

در نهایت، می توانید CKEditor را با قوانین و نیازهای پروژه خود سفارشی کنید.

با سلام

شما می تونید برای اضافه کردن قابلیت آپلود عکس در CkEditor از این لینک استفاده کنید. همچنین برای استفاده از قابلیت نوشتن کد یا همون CodeSnippet هم می تونید از این لینک استفاده کنید.

نحوه کار بسیار ساده هست.

برای این منظور یک فیلم آموزش رایگان هم آماده شده

آموزش آپلود عکس در CkEditor