Отдельный редактор ngx-quill от панели инструментов - PullRequest
Новая
       65

Отдельный редактор ngx-quill от панели инструментов

0 голосов
/ 08 мая 2020

Я бы хотел создать use ngx-quill, чтобы настроить следующую конфигурацию в моем компоненте .

Из примеров, которые я видел до сих пор, я немного не понимаю, как go об этом. Кажется, что они предусматривают, что панель инструментов не может быть отделена от самого редактора.

Это правда? 

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.quilljs.com/1.2.6/quill.js"></script>
    <link href="https://cdn.quilljs.com/1.2.6/quill.snow.css" rel="stylesheet">

    <style>

        .active {
            background: green;
        }

    </style>
</head>
<body>

    <button id="bold" onclick="onBoldClick()">Bold</button>

    <div id="editor1">
        <p>Hello World!</p>
        <p>Some initial <strong>bold</strong> text</p>
        <p><br></p>
    </div>

    <div id="editor2">
        <p>Hello World!</p>
        <p>Some initial <strong>bold</strong> text</p>
        <p><br></p>
    </div>

    <script>

        var currentEditor; // selected / focused editor
        var currentFormats; // save the current formattings

        createEditor("#editor1");
        createEditor("#editor2");

        function createEditor(selector)
        {
            let quill = new Quill(selector, { });

            quill.on("editor-change", (eventName, ...args) =>
            {
                currentEditor = quill;
                updateButtons();
            });
        }

        // get current formattings to style the toolbar buttons
        function updateButtons()
        {
            console.log(currentEditor)

            if(currentEditor.getSelection())
            {
                currentFormats = currentEditor.getFormat();

                console.log(currentFormats);

                if(currentFormats.bold)
                {
                    bold.classList.add("active");
                }
                else
                {
                    bold.classList.remove("active");
                }
            }
        }

        // if selected text is bold => unbold it - if it isn't => bold it
        function onBoldClick()
        {
            if(!currentFormats || !currentEditor)
            {
                return;
            }

            if(currentFormats.bold)
            {
                currentEditor.format("bold", false);
            }
            else
            {
                currentEditor.format("bold", true);                
            }
        }

    </script>

</body>
</html>
...