مشکات
3 سال پیش توسط مشکات مطرح شد
15 پاسخ

ckeditor in laravel

سلام
خسته نباشید
من ckeditor رو به پروژه ی لاراولی خودم اضافه کردم
میخوام در قسمت toolbar بخش مربوط به textalignment هم بذارم
ممنون میشم اگر راهنماییم کنید دوستان🌺☘️

 تصویر


ثبت پرسش جدید
Sahandi81
تخصص : PHP - Laravel -JS
@sahandi81 3 سال پیش مطرح شد
0

برای این مورد به احتمال زیاد هیچ ربطی به لاراول نداره و باید دانش جی اس داشته باشین.
پیوند زیر میتونه کمکتون کنه.
ckeditor.com
(بیشتر سرچ کنید!)


فرشید مرادی
تخصص : noob
@eniack 3 سال پیش مطرح شد
0

سلام این دو مورد رو تست کنید :

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        alignment: {
            options: [ 'left', 'right' ]
        },
        toolbar: [
            'heading', '|', 'bulletedList', 'numberedList', 'alignment', 'undo', 'redo'
        ]
    } )
    .then( ... )
    .catch( ... );

و این

var config = {
    toolbar: [
        ['Font','FontSize'],
        ['Bold','Italic','Underline'],
        ['TextColor','BGColor'],
        ['JustifyLeft', 'JustifyCenter', 'JustifyRight']
    ],
};
$('.ckeditor').ckeditor(config);

مشکات
تخصص : کاراموز
@meshkat315 3 سال پیش مطرح شد
0

@eniack
این دوتا رو توی کدوم قسمت کد باید اضافه کنم بزرگوار؟
یک نکته
تنظیمات دیفالت مربوط به toolbar در مسیر public/ckeditor/config.js قرار داره
ولی برای من حتی وقتی کل config.js را پاک میکنم،toolbar م تغییری نمیکنه
یعنی بطور دیفالت داره از کجا مقدار میگیره؟
 تصویر


فرشید مرادی
تخصص : noob
@eniack 3 سال پیش مطرح شد
0

ببینید داخل همون صفحه ای که این ویژگی رو اضافه میکنید باید تغییرات رو اعمال کنید مثلا صفحه آرتیکل ها یک textarea داره شما با استفاده از id یا class تبدیلش کردی به این عکس
 تصویر

یه کدی مشابه اینه

$('.ckeditor').ckeditor(config);

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


مشکات
تخصص : کاراموز
@meshkat315 3 سال پیش مطرح شد
0

@eniack
کدم این هست
نمیدونم باید کدوم قسمتش اضافه کنم این مورد رو

<form action="{{ route('admin.pdf.store') }}" method="post">
    @csrf
<div class="row">
    <div class="col-md-12">
        <div class="card-header">
            <h4 class="card-title"> CKEditor Test </h4>
        </div>
        <div class="card-body">
            <div class="form-group">
               <textarea class="form-control" id="htmlFile" name="htmlFile"></textarea>
            </div>
        </div>
        <div class="card-footer">
            <button type="submit" class="btn btn-success"> Save </button>
        </div>
    </div>
</div>
</form>
<script src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script>CKEDITOR.replace('htmlFile',
        {
            filebrowserUploadUrl: "{{route('admin.pdf.upload', ['_token' => csrf_token() ])}}",
            filebrowserUploadMethod: 'form'
        });
</script>
</body>
</html>

فرشید مرادی
تخصص : noob
@eniack 3 سال پیش مطرح شد
0

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

CKEDITOR.replace('htmlFile',
        {
            filebrowserUploadUrl: "{{route('admin.pdf.upload', ['_token' => csrf_token() ])}}",
            filebrowserUploadMethod: 'form'
        },
alignment: {
            options: [ 'left', 'right' ]
        },
        toolbar: [
            'heading', '|', 'bulletedList', 'numberedList', 'alignment', 'undo', 'redo'
        ]
);

مشکات
تخصص : کاراموز
@meshkat315 3 سال پیش مطرح شد
0

@eniack
نه همون قبلی هم دیگه اجرا نمیشه
خیلی پیچیدست واقعا


فرشید مرادی
تخصص : noob
@eniack 3 سال پیش مطرح شد
0

باید ورژن اپدیت شده ckeditor رو دانلود کنید


Saman
تخصص : برنامه نویس وب
@samanzdev 3 سال پیش مطرح شد
0

سلام
شما اول باید فایل های ckeditor رو دانلود کنید و بعدش به textarea تون آیدی ckeditor1 بدید.


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

سلام
برای داشتن دکمه تراز متنی (text alignment) شما باید نسخه کامل CheckEditor رو دانلود بکنید یا میتونید از یک افزونه به نام Justify برای اضافه کردن این دکمه استفاده بکنید.
اول افزونه رو از این سایت دانلود بکنید.
 تصویر
دوم شما باید تمام اون فایل Zip رو در پوشه Plugins که در عکس بالا که شماره 1 خورده، استخراج بکنید.
سوم باید در فایل config.json کد زیر رو اضافه بکنید (اگر کد config.extraPlugins ; وجود داشت فقط اسم افزونه رو بقل بقیه اسم ها بنویسید) :

config.extraPlugins = 'justify';
// اگر این کد وجود داشت :
config.extraPlugins = 'justify,myplugin,anotherplugin';

اگر درست نشد بنده رو مخاطب (Mention) قرار بدید/بکنید.


مشکات
تخصص : کاراموز
@meshkat315 3 سال پیش آپدیت شد
0

@ehsndvr
سلام
ممنونم از همگی دوستان و شما آقای داوری بزرگوار
دونه به دونه کارهایی ک گفتین رو انجام دادم
اما به toolbar چیزی اضافه نشد😥
میدونید من متوجه شدم که هر تغییراتی توی پوشه ی config.js میدم در خروجی اعمال نمیشه
حتی وقتی کل پوشه ی config.jsرو کامنت میکنم،توی خروجی من تغییری ایجاد نمیشه
نمیدونم این مقدار دیفالت رو داره از کجا میگیره و به من نشون میده
شما مید.نید چطوری باید بهش بگم که تغییرات یا toolbar رو برام از پوشه ی config.jsبخونه؟


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

سلام خانم قادری ، لطف دارید 🌹

لطفا مسیر فایل Config.json رو اینجا بفرستید.


مشکات
تخصص : کاراموز
@meshkat315 3 سال پیش مطرح شد
0

@ehsndvr
مجدد سلام آقای داوری
من تا ب الان داشتم از cdn استفاده میکردم
اما حالا تغییر دادم روند رو
با استفاده از npm یک پکیج برای ckeditor نصب کردم
حالا باید مسیر node_modules/ckeditor/ckeditor.js رو در قسمت زیر بذارم

<script src='node_modules/ckeditor/ckeditor.js'></script>
<script>CKEDITOR.replace('htmlFile', {
        filebrowserUploadUrl: "{{route('admin.pdf.upload', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form',
    });
</script>

اما کدم اجرا نمیشه و در قسمت consol ارور زیر رو دارم
 تصویر

میخواستم ازتون بپرسم چطور میتونم این ارور رو بر طرف کنم؟
و اینکه آیا راهی هست که پوشه های js مربوط به ckeditor رو به public منتقل کنم و از اونجا بخونمشون؟
ممنون میشم راهنماییم کنید🌺☘️


رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 3 سال پیش مطرح شد
0

درود...
بهتره از نسخه ۵ سی کی ادیتور استفاده کنید...
فعال سازی این ادیتور خیلی مکافاته...
البته توی نسخه ۵ آن بخش آپلود عکس تغییر کرده...


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

سلام
لطفا تشریف بیارید تلگرام.
آیدی من : @ehsndvr


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

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