در حال بارگزاری ...

بهترین ویرایشگرهای متن باز برای استفاده از برنامه‌های وب

توسط مریم مهربان
آخرین به روز رسانی سه شنبه 29 مهر 1399

در این مقاله، پنج مورد از بهترین ویرایشگر متنی را به شما معرفی خواهیم کرد که به منظور استفاده از برنامه‌های کاربردی تحت وب مورد استفاده قرار می‌گیرند. با ما همراه باشید. بهترین ویرایشگرها

در این مقاله، پنج مورد از بهترین ویرایشگر متنی را به شما معرفی خواهیم کرد که به منظور استفاده از برنامه‌های کاربردی تحت وب مورد استفاده قرار می‌گیرند. با ما همراه باشید.


بهترین ویرایشگرهای متن باز برای استفاده از برنامه‌های وب

Quill

Quill، یک ویرایشگر متن باز، رایگان و قدرتمند است که معماری ماژولار و یک واسط برنامه نویسی گویا دارد. این ویرایشگر کاملا قابل سفارشی سازی است و روی هر پلتفرم و همه مرورگرهای مدرن قابل اجرا است. کد منبع این ویرایشگر در گیت هاب وجود دارد و در نتیجه، شما می‌توانید در توسعه این نرم افزار نیز مشارکت کنید.

دانلود | مستندات

برای کار کردن با این ویرایشگر در مرورگر، می‌توانید تکه کد زیر را در فایل html خود ذخیره کرده و آن را اجرا کنید:

    <!-- Include Quill stylesheet -->
    <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
    <!-- Create the toolbar container -->
    <div id="toolbar">
      <button class="ql-bold">Bold</button>
      <button class="ql-italic">Italic</button>
    </div>
    <!-- Create the editor container -->
    <div id="editor">
      <p>Hello World!</p>
    </div>
    <!-- Include the Quill library -->
    <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
    <!-- Initialize Quill editor -->
    <script>
      var editor = new Quill('#editor', {
        modules: { toolbar: '#toolbar' },
        theme: 'snow'
      });
    </script>

 Trumbowyg

Trumbowyg، یک ویرایشگر سبک است و در واقع یک پلاگین قابل سفارشی سازی jQuery است که با یک واسط برنامه نویسی قدرتمند، کدهای منطقی تولید می‌کند. سایز این ویرایشگر، تنها 20 کیلوبایت است و بنابراین صفحه متناظر با آن سریع بارگذاری می‌شود. Trumbowgy از تمام مرورگرهای مدرن مانند فایرفاکس، کروم، اپرا و IE9+ پشتیبانی می‌کند. کد این ویرایشگر در مخزن گیت هاب وجود دارد و شما می‌توانید در توسعه آن مشارکت داشته باشید.

دانلود | مستندات

    // In head tag
    <link rel="stylesheet" href="node_modules/trumbowyg/dist/ui/trumbowyg.css">
    // HTML
    <textarea id="editor"></textarea>
    // end of the body
    <!-- Import jQuery -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
    <!-- Import Trumbowyg -->
    <script src="node_modules/trumbowyg/dist/trumbowyg.js"></script>
    <script>
        $('#editor').trumbowyg();
    </script>

Summernote

Summernote، یک ویرایشگر ساده فوق العاده است. این ویرایشگر در واقع یک پلاگین متن باز jQuery است که در گیت هاب هم وجود دارد و یک پشتیبانی منحصر به فرد برای چارچوب Bootstrap 4 ارائه می‌کند.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Summernote Example</title>
      <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
      <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
      <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
      <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
      <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
    </head>
    <body>
      <div id="summernote"><p>Hello Summernote</p></div>
      <script>
        $(document).ready(function() {
            $('#summernote').summernote();
        });
      </script>
    </body>
    </html>

CKEditor 4

CKEditor، یک ویرایشگر متنی بسیار خوب برای html است و تعداد زیادی از مخاطبین را به خود جذب کرده است. مجوز این ویرایشگر باید برای پروژه‌های بزرگ خریداری شود. در حال حاضر، نسخه‌های مختلفی از این ویرایشگر وجود دارد که شامل نسخه استاندارد، نسخه کامل و نسخه پایه می‌شود. شما می‌توانید کد منبع آن را در گیت هاب بیابید و برای توسعه آن نیز مشارکت کنید. شما می‌توانید این ویرایشگر را از اینجا دانلود کنید.

نمونه کد CKEditor با استفاده از بسته استاندارد در زیر قابل مشاهده است:

    // Avaliable Packages
    // Standard
    <script src="//cdn.ckeditor.com/4.10.1/standard/ckeditor.js"></script>
    // Basic
    <script src="//cdn.ckeditor.com/4.10.1/basic/ckeditor.js"></script>
    // Full
    <script src="//cdn.ckeditor.com/4.10.1/full/ckeditor.js"></script>

CKEditor 5

CKEditor 5، یک ویرایشگر متنی با یک چارچوب قدرتمند است. این ویرایشگر از ابتدا در استانداردهای ES6 نوشته شده و به سادگی می‌تواند با تکنولوژی‌های جدید مانند Angolar ،React ،Vue Js ،Webpack ،Node Js ،NPM و غیره یکپارچه شود. شما می‌توانید کد منبع این ویرایشگر را از گیت هاب دریافت کنید. علاوه بر این مستندات راهنمای خوبی نیز برای این ویرایشگر وجود دارد.

TinyMCE

TinyMCE، یک ویرایشگر متنی پراستفاده، منعطف و قدرتمند است و میلیون‌ها مخاطب دارد. نسخه‌های پولی متفاوت با ویژگی‌های متفاوتی در دسترس است. نسخه متن باز این ویرایشگر قابل دسترس است و توسط جامعه مخاطبین آن نگهداری می‌شود.

دانلود | مستندات

مطالعه بیشتر در لیداوب:

 امیدوارم توانسته باشیم ابزارهای مفیدی برای توسعه پروژه‌های وب در اختیار شما گذاشته باشیم. ما همواره به دنبال ارائه مطالب مفید برای توسعه برنامه‌های کاربردی تحت وب است. این آموزش‌ها را می‌توانید در وب سایت لیداوب دنبال کنید.

 

دیدگاه ها

دیدگاه ها : 0


متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

رایگان

اشتراک گذاری در
سورس خرید و فروش ارزهای دیجیتال
ثبت امتیاز
5 (1 رای)

   لطفا صبر کنید ...