ویرایشگر برای سایت

سلام و درود
شما میتونید از ادیتور CKEditor یا TinyMCE استفاده کنید و نیاز به دانلود هیچ فایلی هم نیست میتونید از با استفاده از CDN این کار رو انجام بدید.
وب سایت CKEditor
وب سایت رسمی TinyMCE

در مورد ادیتور خودتون هم که دانلود کردید احتمالا در قسمت جاوا اسکریپتی به این صورت نوشته شده

div#editor

و اگر به

textarea#editor

تغییر بدید درست میشه
موفق باشید 🌹

@maak
ممنونم ازتون
من میخام ادیتور قابلیت markdown داشته باشه
ولی با ckeditor نمیتونم از این قابلیت استفاده کنم

اون ادیتوری که دانلود کردم هم جاوا اسکریپت ویرایش کردم ولی متاسفانه درست نشد

من ادیتوری میخام که بتونم کد هم تو سایت بزارم از طریق markdown

@codeLover
سلام مجدد
این امکان در بیشتر ادیتور ها وجود داره
مستندات CKEditor
وب سایت رسمی Stackedit
اگر باز هم دیدید مشکلتون رفع نمیشه لینک وب سایت ادیتوری که دانلود کردید رو ارسال کنید تا بررسی کنم مورد رو بگم خدمتتون
موفق باشید🌹

@maak
ممنونم از لطف شما
این پکیجی که برای ckeditor معرفی کردید نصب کردم توسط npm
دستور npm run dev رو زدم
تو مستندات زیاد متوجه نشدم بعد از نصب باید چیکار کرد
چطوری میشه ازش استفاده کرد ؟

این لینک ادیتوریه که از تگ div استفاده شده و نتونستم تبدیل کنم به texterea
لینک دانلود

سلام خسته نباشید
ببین بهترین ویرایشگر ckdeditor هست و از قابلیت full کامل همه چی داره و خیلی از سایت ها از این استفاده میکنن
برای لاراول هم خوده راکت دوره اش داره میتونی استفاده کنی باز اگه نتونستی بگو مشکل حل کنم

@milwad

سلام
طبق این سایت

با npm نصب کردم
این دستور زدم

npm install --save @ckeditor/ckeditor5-markdown-gfm

دیگه نمیدونم چجوری باید ازش استفاده کنم

این فولدر دانلود کن بزار تو public
https://www.uplooder.net/files/08d0e99ccce08adcccf85748e7a8302d/ckeditor.zip.html
بعد توی صفحه که دوست داری این جوری لینک کن

  <script src="{{ asset('ckeditor/ckeditor.js') }}"></script>

بعد بیا توی یه قسمت اینو بزن

    <script>
        CKEDITOR.replace('body');
    </script>

توی replace ایدی اون input یا textarea رو بزار

@milwad
ممنونم
بله اینو بلدم تست کردم
نمیخام این همه ابزار داشته باشه
چیزی که برام مهمه قابلیت markdown هست که این نداره
و میخام موقع کامنت کاربران استفاده کنن

اینو تست کن
https://stevencotterill.com/articles/adding-a-markdown-editor-to-laravel

@milwad
ممنون
طبق آموزشش پیش رفتم ولی اصلا ادیتور نمایش نمیده تو سایت

برای حذف پکیج

npm uninstall <package-name>

@codeLover
سلام مجدد
این ادیتوری که دانلود کردید وب سایت رسمیش این هست:
quilljs.com
وارد داکیومنشن که بشید توضیحات کافی هست اگر با هم مشکل داشتید و نتونستید از به جای div از textarea استفاده کنید با جاوا اسکریپت المنت div رو بگیرید و یک textarea که هیدن هست بسازید و مقدار div رو داخلش قرار بدید

این کار میتونه با دکمه هندلینگ فرم انجام بشه دکمه به یک فانکشن اشاره میکنه و فانکشن اول مقدار div رو انتقال میده و بعد فرم رو هندل میکنه

روش اول:

HTML:

  <form>
<div class="row">
  <div class="col-xs-4">

    <a class="change-link" href='#'>Change picture</a>
  </div>
  <div class="col-xs-8">
    <div class="form-group">
      <label for="display_name">Display name</label>
      <input class="form-control" name="display_name" type="text" value="Wall-E">
    </div>
    <div class="form-group">
      <label for="location">Location</label>
      <input class="form-control"  name="location" type="text" value="Earth">
    </div>
  </div>
</div>
<div class="row form-group">
  <label for="about">About me</label>
  <input name="about" type="hidden">
  <div id="editor-container">
    <p>A robot who has developed sentience, and is the only robot of his kind shown to be still functioning on Earth.</p>
  </div>
</div>
<div class="row">
  <button class="btn btn-primary" type="submit">Save Profile</button>
</div>
  </form>

JS:

var quill = new Quill('#editor-container', {
  modules: {
toolbar: [
  ['bold', 'italic'],
  ['link', 'blockquote', 'code-block', 'image'],
  [{ list: 'ordered' }, { list: 'bullet' }]
]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'
});

var form = document.querySelector('form');
form.onsubmit = function() {
  // Populate hidden form on submit
  var about = document.querySelector('input[name=about]');
  about.value = JSON.stringify(quill.getContents());

  console.log("Submitted", $(form).serialize(), $(form).serializeArray());

  // No back end to actually submit to!
  alert('Open the console to see the submit data!')
  return false;
};

روشی که خودم توضیح دادم بالا:

<div id="quill_editor"></div>
<input type="hidden" id="quill_html" name="name"></input>

<script>
var quill = new Quill('#quill_editor', {
        theme: 'snow'
});
   quill.on('text-change', function(delta, oldDelta, source) {
    document.getElementById("quill_html").value = quill.root.innerHTML;
});
</script>