مشکل استایل دادن به بخش درون ویرایشگر در quilljs

[sasanm]

سلام خدمت دوستان.

ویرایشگر متن quilljs رو به پروژه لاراولی اضافه کردم.
کد HTML به این شکل هست:

v901130_11.png

و کد جاوا اسکریپتش هم به شکل زیر:




میخوام وقتی کاربری پست کاربر دیگه رو نقل قول میکنه، به پست نقل قول شده با ای دی (qb) استایل بدم. مثلا border بدم.
به طور معمول فقط میشه بهش رنگ متن و رنگ پس زمینه متنو داد و استایل های دیگه رو چون درون اون بخش هست، نشون نمیده.
به نظر میاد استایل های تگ های درون ای دی editor حذف میشه و کلاسهای quill جایگزینش میشه.
با چه روشی می تونم اینکارو انجام بدم؟
ممنون.

[mazoolagh]

سلام و روز خوش

CSS همینجور که از اسمش پیداست، ruleها رو بر اساس اولویت تعریف شده بصورت cascading (آبشاری) اعمال میکنه.
یعنی اگر برای یک المان چندین rule وجود داشته باشه،
و اینها با هم در تضاد باشن (مثلا همین border یک جا none باشه یک جا solid 1px red)
مرورگر میاد بر اساس سورس اون ruleها اولویت بندی میکنه که کدوم یکی رو زودتر و کدو یکی رو دیرتر اعمال کنه - البته این یک توضیح خیلی ساده بود و در واقع پیچیده تر هست این داستان.


یک چیزهایی مثل این ادیتور زنده یا syntax highlighterها و ...
معمولا بعد از لود شدن داکیومنت میان با جاوااسکریپت استایل ها رو به المان ها نسبت میدن.

حالا اون highlighterها چون معمولا زنده نیستن،
اعمال یک rule دیگه بعد از ساخته شدن اونها مشکلی ایجاد نمیکنه.

ولی در ادیتور زنده احتمالا با هر update استایل های خودش رو اعمال میکنه و ممکنه کار یه کم سختتر باشه.


برای امتحان یک rule برای border بسازین و بهش یک اسم هم بدین (مثلا bordered)
حالا برای اون qb یک class هم بدین با همین bordered
و نتیجه رو چک کنین.

[sasanm]

سلام و روز خوش

CSS همینجور که از اسمش پیداست، ruleها رو بر اساس اولویت تعریف شده بصورت cascading (آبشاری) اعمال میکنه.
یعنی اگر برای یک المان چندین rule وجود داشته باشه،
و اینها با هم در تضاد باشن (مثلا همین border یک جا none باشه یک جا solid 1px red)
مرورگر میاد بر اساس سورس اون ruleها اولویت بندی میکنه که کدوم یکی رو زودتر و کدو یکی رو دیرتر اعمال کنه - البته این یک توضیح خیلی ساده بود و در واقع پیچیده تر هست این داستان.


یک چیزهایی مثل این ادیتور زنده یا syntax highlighterها و ...
معمولا بعد از لود شدن داکیومنت میان با جاوااسکریپت استایل ها رو به المان ها نسبت میدن.

حالا اون highlighterها چون معمولا زنده نیستن،
اعمال یک rule دیگه بعد از ساخته شدن اونها مشکلی ایجاد نمیکنه.

ولی در ادیتور زنده احتمالا با هر update استایل های خودش رو اعمال میکنه و ممکنه کار یه کم سختتر باشه.


برای امتحان یک rule برای border بسازین و بهش یک اسم هم بدین (مثلا bordered)
حالا برای اون qb یک class هم بدین با همین bordered
و نتیجه رو چک کنین.

سلام روز شما هم خوش.
ممنون از پاسختون.
درسته اخر سر کلاس های خودشو میده.
ایندفعه بجای دادن کلاس به تگ با ای دی editor توسط کد جاوا اسکریپت متن رو بردم داخل textarea و بهش کلاس دادم و بعد نمایش دادم حداقل border رو نشون داد ولی هنوز مشکلات زیادی داره که باید حل کنم. به جایی رسید قرار میدم اینجا.

ووردپرس چطور این مشکلو در text editor خودش حل کرده؟
تگ [QUOTE] رو تعریف کرده و استایلهایی بهش داده؟

اصلا روشی که من میرم درسته یا بهتره به ازای هر نقل قول یک نمونه از Quill درست کنم و با focus روی هر ادیتور toolbar اونو نمایش بدم؟
ممنون.

[sasanm]

درود مجدد.
فکر کنم دارم راهو کلا اشتباه میرم.
بهتر نیست یک تگ مثل [QUOTE] تعریف کنم. و بعد از دریافت request در بک اند با Regex اون بخشو پیدا کنم و درون div بذارم و بهش استایل بدم و در پایگاه داده ذخیرش کنم.
چون موقع نمایش تو خارج از ادیتور نیاز نیست قواعد quill رو رعایت کنم و مشکلات استایل دهی و .. رو ندارم و زمان ادیت هم نیاز به استایل نداره مثل wordpress اون بخش درون تگ [QUOTE] نمایش داده میشه.

[mazoolagh]

سلام دوباره

معمولا سیستم این ها اینجوری هست که شما یک فایل css و بک فایل جاوااسکریپت رو به پیج معرفی میکنین،
بعد از لود شدن کامل صفحه یک کد واسه initialize کردن اون المانی که قرار ادیتور بشه اجرا میکنین،
اون کد میاد یک سری event واسه اون المان تعریف میکنه (مثل change, update, keydown, mousedown, ...)
و اگه هرچی المان خودتون تعریف کرده باشین (چه استاتیک چه با کد) یا کلا پاک میکنه یا فقط text اون رو نگه میداره.

صبر کنین من این quilljs و داکیومنت هاش رو یک نگاهی بندازم،
بعد راهنمایی میکنم چه کار کنین.

[sasanm]

سلام دوباره

معمولا سیستم این ها اینجوری هست که شما یک فایل css و بک فایل جاوااسکریپت رو به پیج معرفی میکنین،
بعد از لود شدن کامل صفحه یک کد واسه initialize کردن اون المانی که قرار ادیتور بشه اجرا میکنین،
اون کد میاد یک سری event واسه اون المان تعریف میکنه (مثل change, update, keydown, mousedown, ...)
و اگه هرچی المان خودتون تعریف کرده باشین (چه استاتیک چه با کد) یا کلا پاک میکنه یا فقط text اون رو نگه میداره.

صبر کنین من این quilljs و داکیومنت هاش رو یک نگاهی بندازم،
بعد راهنمایی میکنم چه کار کنین.

درود دوست عزیز.
اگه متنی که از پایگاه داده اومده رو از textarea به div با ای دی ادیتور بفرستم این مشکل پیش میاد.
ولی اگه متنو تو div با ای دی ادیتور بگیرم و مثلا تگ quoted بهش اضافه کنم تو خود ادیتور تگو نشون میده.
فکر کنم بشه موقع دریافتش با Regex اون قسمت هایی که درون تگ [quoted] هست رو نشون نداد ولی بهشون استایلی داد. نمی شه؟

[sasanm]

مثل اینکه درست شد.
نیاز به regex هم نشد.
موقع نمایش فقط تگ های [quoted] و [quoted/] رو با کمک str_replace با div ی که بهش استایل دادم عوض کردم و مشکل حل شد.
ممنون از راهنمایی هاتون دوست عزیز.

[mazoolagh]

خوشحالم که جواب گرفتین،
من تو این فاصله یه کم با quilljs کار کردم و داکیومنتهاش رو هم یک نگاهی انداختم (نه چندان دقیق)

نگاه من به این داستان متفاوت هست بنابراین روش دیگه ای پیاده کردم که اینجا میذارم
شاید در آینده به درد کسی خورد.

[mazoolagh]

اول این که خود ادیتور هم blockquote داره (یک blockquote میسازه) و هم code block (یک div میسازه) :

2.png

[mazoolagh]

گام بعدی این هست که چجوری به ادیتور محتوای اولیه بدیم.
من از متد setContents استفاده کردم:

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>592226 quilljs</title>

    <script src="quilljs/quill.js"></script>

    <link href="quilljs/quill.snow.css" rel="stylesheet">

    <script>

        const toolbarOptions = [

            [{ 'direction': 'rtl' }],

            ['bold', 'italic', 'underline', 'strike'],

            ['blockquote', 'code-block'],

            ['link', 'image', 'video', 'formula'],

            [{ 'size': ['small', false, 'large', 'huge'] }],

            [{ 'color': [] }, { 'background': [] }],

            [{ 'font': [] }],

            [{ 'align': [] }],

            [{ 'indent': '-1' }, { 'indent': '+1' }],

            [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'list': 'check' }],

            [{ 'script': 'sub' }, { 'script': 'super' }],

            [{ 'header': 1 }, { 'header': 2 }],

            ['clean']

        ];



        const quotedText =

            'Lorem ipsum dolor sit amet consectetur adipiscing elit.\n' +

            'Amet consectetur adipiscing elit quisque faucibus ex sapien.\n' +

            'Quisque faucibus ex sapien vitae pellentesque sem placerat.\n' +

            'Vitae pellentesque sem placerat in id cursus mi.';



const someText =

            'Red is greener than purple, for sure.\n' +

            'He is good at eating pickles and telling women about his emotional problems.\n' +

            'She borrowed the book from him many years ago.';



window.addEventListener("load", () => {

            const quill = new Quill('#editor', {

                modules: {

                    toolbar: toolbarOptions

                },

                theme: 'snow'

            });



var content = [];

            content.push({ insert: 'Someone says:\n', attributes: { 'bold': 'true', 'size': 'large' } });



quotedText.split('\n').forEach((line) => {

                content.push({ insert: `${line}\n`, attributes: { 'code-block': 'plain' } });

            });



content.push({ insert: '\n\nIn response to:\n', attributes: { 'bold': 'true', 'size': 'large' } });



someText.split('\n').forEach((line) => {

                content.push({ insert: `${line}\n`, attributes: { 'blockquote': 'true', 'color': '#008080' } });

            });

            quill.setContents(content);

        });

    </script>

</head>



<body>

    <div id="editor">

    </div>

</body>

</html>

اگه دقت کنین ادیتور کاملا خالی هست و با کد initialize میشه،
خروجی این کد همین تصویر پست شماره 9 هست.

[mazoolagh]

برای این که بتونیم استایل دلخواه خودمون رو به divهای code block معرفی کنیم
در developer mode مرورگر استایل اونها رو بررسی میکنیم که چه کلاس هایی داره
و rule های خودمون رو مینویسیم که بجای ruleهای خود ادیتور بشینه (override):

.ql-code-block-container {

background-color: lightgrey !important;

border: 2px darkgreen dashed !important;

border-radius: 15px !important;

width: fit-content !important;

}





.ql-code-block {

color: darkblue;

background-color: lightgrey;

font-style: italic;

}

اون important برای اطمینان از این هست که اگر rule مشابهی در quilljs تعریف شده،
مرورگر این rule ما رو بجای اون بذاره.


4.png