استفاده از ckeditor در html

در این پست قصد داریم طریقه دانلود و استفاده از ckeditor در html را بررسی و پیاده سازی نماییم.

سوال: ادیتور ckeditor را بروی صفحه html خود بارگذاری نماییم و از قابلیت های آن را نمایش دهید؟

ckeditor چیست؟

یک ادیتور پیشرفته برای ایجاد و ویرایش متن میباشد.

یعنی شما با این ادیتور میتوانید مواردی مانند تصویر،لینک،محتوا،ویدیو را به سادگی بر روی صفحه درج کنید.

و دیگر نیازی به استفاده از تگ ندارید.

بیشتر بخوانید: تمرین طراحی فرم لاگین در html

نمونه مثال هایی از کاربرد ckeditor

قسمت ارسال پست و ارسال محصول در پنل های مدیریتی از چنین ادیتور هایی استفاده میکنند.

هنگام ارسال مقاله بر روی سایت با کمک چنین ادیتور هایی محتوا را به آسانی بر روی صفحه قرار میدهیم.

یک لحظه تصور کنید که این ادیتور ها نبودند ما باید به صورت دستی تصویر،لینک،افکت متن،جدول و … را بر روی صفحه قرار میدادیم.

دانلود ckeditor

برای دریافت ckeditor فقط کافیست به این لینک بروید تا به راحتی به تمامی نسخه های ckeditor دسترسی داشته باشید.

قرار دادن ckeditor بر روی صفحه

برای قرار دادن ckeditor بر روی صفحه ابتدا از طریق لینک بالاتر آن را دریافت نمایید.

سپس به صورت زیر آن را در صفحه html لود میکنیم.

در اینجا ما ckeditor را دانلود کردیم که به صورت آفلاین استفاده کنیم.

پس از ثبت نام و یا ورود به وب سایت میتوانید سورس کامل ckeditor و استفاده از آن را دریافت نمایید.

برای لود اسکریپت ها به صورت زیر مینویسیم:

<script src="jquery.min.js"></script>
 <script src="ckeditor.js"></script>
 <script src="adapters/jquery.js"></script>

حالا برای نمایش اسکریپت نیاز به استفاده از یک تگ داریم تا بتوانیم ادیتور را بر روی آن سوار کنیم.

پس از تگ textarea برای این کار استفاده میکنیم.

تگ را به صورت زیر تعریف میکنیم:

<textarea id="editor2"> </textarea>

در نهایت برای سوار کردن ckeditor بر روی آن از کد زیر استفاده میکنیم:

<script>

$(document).ready(function(){
$('#editor2').ckeditor();
});

</script>

در ادامه استفاده از ckeditor در html به تنظیماتی بر روی آن میپردازیم.

بیشتر بخوانید:طراحی صفحه اول سایت w3school با html

تنظیم عرض و ارتفاع ادیتور

برای تغییر در عرض و ارتفاع ادیتور از قطعه کد زیر در بخش جاوا اسکریپت استفاده میکنیم.

پس از ثبت نام و یا ورود به حساب کاربری خود به تمامی تنظیمات دسترسی خواهید داشت.

تغییر رنگ ادیتور

برای تعویض رنگ ادیتور به رنگ های دیگر به دلخواه خودتون از قطعه کد زیر استفاده کنید.

و در نهایت برای تغییر زبان ادیتور که نوشته ها به زبان دلخواه نمایش داده شوند به صورت زیر مینویسیم:

جمع بندی

ابزار ckeditr برای سهولت در درج محتوا استفاده میشود یعنی با کمک ckeditor ما دیگر نیاز نیست که خودمان دستی با تگ نویسی محتوا درج کنیم.

تمرین های با جواب html به صورت رایگان