RTE (Quill) format config

[sydney22]

Does anyone have experience configuring the Bubble RTE plugin? I’d like to customize the editor to NOT allow bullet points (•) and indentations. I’ve seen where people have commented out specific formats (Quill Formats) that they don’t want to use while configuring Quill. Perhaps the Toolbox plugin would work here?

I posed this question in the RTE plugin thread but wanted to cast a wider net to see if anyone had done this- @sudsy had some valuable insights in another RTE thread a while back. Seems like it should be pretty straightforward to implement if possible.

[sydney22]

Somewhat answered my own question- here’s my post from the main plugin thread:

@sydney22

Update: I was able to comment out some Quill formats, then run the JS in the Toolbox plugin. This allows more granular control, similar to what @devin.fraze posted above. Here’s the code I used if anyone is interested:

var quill = new Quill('#richtext-editor-0', {
    modules: {
        toolbar: [
            'bold', 
             // { 'list': 'bullet' }, 
             // { 'indent': '-1'}, 
             // { 'indent': '+1' }, 
             { 'color': ['black', 'red', 'blue', 'green'] }, 
                 'link', 
                 'clean'
             ]

  },
     formats : [
            "background",
            "bold", 
            "color", 
            "font", 
            "code", 
            "italic", 
            "link", 
            "size", 
            "strike", 
            "script",
            "underline", 
            // “blockquote", 
            "header",
            // “indent", 
            // "list",
            "align", 
            "direction", 
            "code-block", 
            "formula", 
            "image",
            "video"
        ],
 placeholder: 'Enter text here...',
  });

Unfortunately, the editor thinks the input is empty, so I’m working to resolve that issue now.

[david.green2010]

Hi Sydney, did you ever figure out how to integrate Quill into Bubble? I just downloaded the editor and had it customized, but I don’t know how to integrate it.

[sydney22]

Hi, @david.green2010! What I ended up doing is adding some CSS to the Page HTML Header to remove certain items and customize the font:

Blockquote
.ql-container {
box-sizing: border-box;
font-family: poppins;
font-size: 14px;
}
.ql-formats:first-of-type {
display:none;
visibility:hidden;
}
.ql-formats:nth-child(2) {
display:none;
visibility:hidden
}
.ql-formats:nth-child(3) {
display:none;
visibility:hidden
}
.ql-formats:nth-child(4) {
display:none;
visibility:hidden
}
.ql-editor .ql-align-right {
text-align: initial;
}

As far as extending the RTE, I’ve posted to the original thread but never got a response. I wanted to add emojis and keyword tags, which last time I checked did not come standard with Quill but there were some custom extensions on Github.

My guess is in order to fully integrate all the Quill features into Bubble it would have to be done at the plugin level. I would contact @allenyang to confirm. Good luck!

[david.green2010]

Thanks @sydney22 . I actually don’t know what that is. I’m not Bubbler but I’ve been trying to integrate this custom Quill text editor. I’ll reach out to @allenyang. Where you able to use the editor with what you did above?

[sydney22]

@david.green2010 Ah, I see what you’re saying. Bubble’s rich text editor is built on top of Quill. It sounds like you want to do is implement it using the API Connector or build a plugin and add it to your site that way. I did read where Allen suggested to reach out to support@bubble.io for feature requests re: the RTE.

[david.green2010]

Thanks I appreciate it. I’m going to reach out now.