Load and configure multiple code editors and libraries

by Froala_marketing

HTML

<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet'
        type='text/css' />

    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">

    <link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />


    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/default.min.css">


    <!-- Include Prism CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">

  <h1>Froala AI Assist</h1>
  <h2>Custom AI Chat UI </h2>
    <div class="container">
        <div id="editor-example" class="col">
          <ul>
          <li>Replace the Gemini key in the JS code. Get a free Gemini API Key from <a href="https://aistudio.google.com/app/apikey">Google AI Studio</a></li>
          <li>Get the Froala trial key by downloading it from <a href="https://froala.com/wysiwyg_editor-download/">download page</a> </li>
              </div>
        <div id="chat-popup" class="col  chat-ui">

        </div>
    </div>


    <script type="text/javascript"
        src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>


    <!-- Include Prism JS -->
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-core.min.js"></script>
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/plugins/autoloader/prism-autoloader.min.js"></script>

    <!-- Add more language components as needed -->
   ...

CSS

h1, h2{
          text-align: center;
        }
        .container {
            display: flex;
            margin: 10px 10%;
        }

        #editor-example.chat-opened .fr-toolbar.fr-top {
            border-top-right-radius: 0;
        }

        #editor-example.chat-opened .fr-second-toolbar {
            border-bottom-right-radius: 0;

        }

        #chat-popup {
            width: 300px;
            flex-grow: 0;
            flex-shrink: 0;
        }

        #chat-popup .fr-ai-assist-prompt-popup {
            position: relative;
            top: auto !important;
            left: auto;
            width: 100%;
            margin: 0;
            height: 100%;
            box-shadow: unset;
            border: 1px solid #CCCCCC;
            border-radius: 0 10px 10px 0;
            border-left: 0;
        }

JavaScript

document.addEventListener('DOMContentLoaded', () => {

            let geminiKey = "AIzaS*********************pXY";
            let editor = new FroalaEditor('#editor-example', {
              placeholder: "Write something .....",
              heightMin: 250,
              key: "5OA4gB3*****=",
                aiSupplementalTermsAccepted: true,

                aiAssistRequest: async function (data, signal) {
                    const response = await fetch(
                        'https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key='+geminiKey,
                        {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            signal,
                            body: JSON.stringify({
                                contents: [{
                                    parts: [{
                                        text: `
                                                Return only HTML.

                                                Instruction:
                                                ${data.prompt}

                                                Content:
                                                ${data.text || ''}
`
                                    }]
                                }]
                            })
                        }
                    );

                    const result = await response.json();

                    return result.candidates[0].content.parts[0].text;
                },
                events: {
                    'popups.show.aiAssist.promptPopup': function () {
                      console.log("adasdsad");
                        document.getElementById('editor-example').classList.add('chat-opened');
                       repositionAiPopup();
                   ...