Describe the bug When select text and use the text color formatti

Text color formating not works about laraberg HOT 2 CLOSED

SimplyDemon commented on July 29, 2024

Text color formating not works

from laraberg.

Comments (2)

Jacotheron commented on July 29, 2024

Having spent a bunch of days looking at the sources (I even recompiled it to a readable developer version), I have seen exactly how this works.

Laraberg "colors" settings property is an array of color objects (containing "name", "slug", "color" properties). The name is shown when you hover your mouse over the color from the selector; the color is used to fill the selector and the slug is used to generate a class that is applied to the element (thus you define each color once as a background and once for text in CSS).

Since this colors needs to be in your CSS and passed as a JSON object to Laraberg, I decided it easiest to simply define an array of arrays in my "config/app.php" file with all the colors I want (below is the default list):

'colors' => [
        [
            'name' => 'White',
            'slug' => 'white',
            'color' => '#ffffff',
        ],
        [
            'name' => 'Black',
            'slug' => 'black',
            'color' => '#000000',
        ],
        [
            'name' => 'Cyan bluish gray',
            'slug' => 'cyan-bluish-gray',
            'color' => '#abb8c3',
        ],
        [
            'name' => 'Pale pink',
            'slug' => 'pale-pink',
            'color' => '#f78da7',
        ],
        [
            'name' => 'Vivid red',
            'slug' => 'vivid-red',
            'color' => '#cf2e2e',
        ],
        [
            'name' => 'Luminous vivid orange',
            'slug' => 'luminous-vivid-orange',
            'color' => '#ff6900',
        ],
        [
            'name' => 'Luminous vivid amber',
            'slug' => 'luminous-vivid-amber',
            'color' => '#fcb900',
        ],
        [
            'name' => 'Light green cyan',
            'slug' => 'light-green-cyan',
            'color' => '#7bdcb5',
        ],
        [
            'name' => 'Vivid green cyan',
            'slug' => 'vivid-green-cyan',
            'color' => '#00d084',
        ],
        [
            'name' => 'Pale cyan blue',
            'slug' => 'pale-cyan-blue',
            'color' => '#8ed1fc',
        ],
        [
            'name' => 'Vivid cyan blue',
            'slug' => 'vivid-cyan-blue',
            'color' => '#0693e3',
        ],
        [
            'name' => 'Vivid purple',
            'slug' => 'vivid-purple',
            'color' => '#9b51e0',
        ],
    ],

Then on all pages where I might want to add the editor or its output I have this loop to generate the CSS rules:

<style>
        @foreach(config('app.colors') as $color)
                .has-{{ $color['slug'] }}-color {
                    color: {!! $color['color'] !!};
                }
                .has-{{ $color['slug'] }}-background-color {
                    background-color: {!! $color['color'] !!};
                }
        @endforeach
</style>

And then finally when setting up the editor, I insert the list with the following code (in the Blade) colors: @json(config('app.colors'))

The @JSON directive json_encodes the array, into the required structure and it is passed to the editor.

If you want to be able to define colors on the fly (not only pre-defined colors), you can enable it by using disableCustomColors: false also in the settings object. I have found a bunch more of these toggles that will work.

from laraberg.

github-actions commented on July 29, 2024

This issue has been automatically marked as stale because it has been open for 60 days with no activity.

from laraberg.

Text color formating not works about laraberg HOT 2 CLOSED

Comments (2)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent