Paradox
3 سال پیش توسط Paradox مطرح شد
12 پاسخ

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

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


ثبت پرسش جدید
MAAK
تخصص : full stack developer
@maak 3 سال پیش آپدیت شد
1

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

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

div#editor

و اگر به

textarea#editor

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


Paradox
تخصص : در حال یادگیری
@paradox 3 سال پیش مطرح شد
1

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

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

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


MAAK
تخصص : full stack developer
@maak 3 سال پیش آپدیت شد
1

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


Paradox
تخصص : در حال یادگیری
@paradox 3 سال پیش آپدیت شد
0

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

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


میلاد خسروی
تخصص : برنامه نویس بامزه
@milwad 3 سال پیش مطرح شد
1

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


Paradox
تخصص : در حال یادگیری
@paradox 3 سال پیش مطرح شد
0

@milwad

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

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

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

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


میلاد خسروی
تخصص : برنامه نویس بامزه
@milwad 3 سال پیش مطرح شد
2

این فولدر دانلود کن بزار تو 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 رو بزار


Paradox
تخصص : در حال یادگیری
@paradox 3 سال پیش مطرح شد
1

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


میلاد خسروی
تخصص : برنامه نویس بامزه
@milwad 3 سال پیش مطرح شد
Paradox
تخصص : در حال یادگیری
@paradox 3 سال پیش مطرح شد
0

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


میلاد خسروی
تخصص : برنامه نویس بامزه
@milwad 3 سال پیش مطرح شد
2

برای حذف پکیج

npm uninstall <package-name>

MAAK
تخصص : full stack developer
@maak 3 سال پیش مطرح شد
1

@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>

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام