آموزش ساخت ویرایشگر محتوا text editor حرفه ای با جاوا اسکریپت

آموزش ساخت ویرایشگر محتوا text editor حرفه ای با جاوا اسکریپت

ویرایشگر محتوا با جاوا اسکریپت – text editor یک بخش مهم از سیستم مدیریت محتوا محسوب می شود همین الان که دارم برای شما این مقاله رو می نویسم از ویرایشگر TinyMCE وردپرس استفاده می کنم 😁 .

در این آموزش قصد داریم از ویرایشگر محتوای قدرتمند QuillJs استفاده کنیم .

ساختار HTML برای ویرایشگر نوشته

<!DOCTYPE html>
<html lang="fa">

<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link rel="stylesheet" href="static/css/lib/monokai-sublime.min.css">
    <link rel="stylesheet" href="static/css/lib/quill.snow.css">
    <link rel="stylesheet" href="static/css/main.css">
</head>

<body>


    <div class="container">
        <a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>


        <div class="text-editor-container">

          

            <div id="text-editor">
                <p>میخوام یک کد خفن بنویسم 😉</p>
                <p>معرکه <strong>هست</strong> مگه نه</p>
                <p><br></p>
            </div>

        </div>


    </div>



    <script src="static/js/lib/highlight.min.js"></script>
    <script src="static/js/lib/quill.min.js"></script>
    <script src="static/js/app.js"></script>
</body>

</html>



در نظر داشته باشید که می توانیم چینش و ویژگی هایی را به تولبار ویرایشگر اضافه کنیم همینطور که در toolbarOptions پایین مشاهده می کنید .

فایل app.js برای کانفیگ ویرایشگر

var toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],
  
    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction
  
    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  
    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],
  
    ['clean']                                         // remove formatting button
  ];

var quill = new Quill('#text-editor', {
    modules: {
      syntax: true,
      toolbar: toolbarOptions
    },
    placeholder: 'چه در ذهن دارید ؟! . . .',
    theme: 'snow'
  });


  // برای راست چین کردن
  var content = quill.getContents();
  quill.setSelection(0 , quill.getLength())
  document.querySelector(".ql-direction").click();
  quill.setSelection(0 , 0);


خروجی برنامه ویرایشگر

آموزش ساخت ویرایشگر محتوا text editor حرفه ای با جاوا اسکریپت

دانلود برنامه ویرایشگر محتوای وب با js

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us