"Enhance your Summernote experience by adding custom font size options

I've been attempting to incorporate font sizes into the summernote editor, but haven't had much success. When I eliminate

['fontsize', ['8', '9', '10', '11', '12', '14', '18']],
and replace it with ['fontsize', ['fontsize']],, I am only able to see one size which is 13. I'm hoping to generate a list of different sizes.

 <script>
 $(document).ready(function() {
   $('#image_body').summernote({
     toolbar: [
       // [groupName, [list of button]]
       ['style', ['bold', 'italic', 'underline', 'clear']],
       ['font', ['strikethrough', 'superscript', 'subscript']],
       //['fontsize', ['fontsize']],
       ['fontsize', ['8', '9', '10', '11', '12', '14', '18']],
       ['color', ['color']],
       ['para', ['ul', 'ol', 'paragraph']],
       ['height', ['height']]
     ]
   });
});

Answer №1

To modify the options, you must specify the array in the fontSizes property. The following code snippet demonstrates how to display a font button with the choices 8, 9, 10, 11, 12, 14, and 18:

$('#summernote').summernote({
  fontSizes: ['8', '9', '10', '11', '12', '14', '18'],
  toolbar: [
    // [groupName, [list of buttons]]
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']]
  ]
});

https://i.sstatic.net/7IeNR.png

You can view the editor in action here.

Answer №2

The culprit causing the issue was a file named bootstrap.js.

 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

 <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

 <!-- include summernote css/js -->
 <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.css" rel="stylesheet">
 <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The scripts within the body tag are failing to load

After trying to embed angular into the body tag, I noticed that nothing is loading up. Upon inspecting the resources panel, I found that only files from the head are present. Moving all the scripts to the head section resolves the issue and everything load ...

I'm stuck trying to figure out all the parameters for the MapsPage component in Angular 2

Currently, I am utilizing Angular2 with Ionic2 for my mobile app development. Everything was working flawlessly until I decided to incorporate a new module for Google Maps navigation. Specifically, I am using phonegap-launch-navigator for this purpose. The ...

Implementing Adaptive Images in Bootstrap 5 for a Specified Design

I am currently working on a website layout that involves displaying one image per section. My goal is to have the images positioned on either side of the text when viewed on a larger screen, as shown in the example below: https://i.sstatic.net/bms6S.png ...

A JavaScriptSerializer counterpart to XmlAttribute/XmlElement

Is there a similar Attribute that can be used on object Properties within a .NET Class to achieve the same functionality as XmlElement or XmlAttribute? [XmlRoot("objects")] public class MyObjects: List<MyObject> { } [XmlRoot("object")] public class ...

Expand your dropdown options with a Popup Input feature in the ComboBox to seamlessly add a 'New Option'

Hello there! I am currently learning, so please be patient with me. Currently, I am in the process of developing a web application for a product management system. The company I work for purchases products from multiple vendors, both through wholesale and ...

Update text based on the status of a boolean variable in AngularJS

I am creating a container using ng-repeat, and here is the corresponding HTML code: <div class="mission_box clearfix" ng-repeat="mission in missions"> <img src="images/tick_patch.png" class="expired_img"> <h2>{{mission.name}}< ...

Filter and search JSON data using React Native

Recently I have started learning about react-native and I am currently utilizing it for my school assignment. Prior to this, I was working with ionic. My current task involves filtering data that is stored in JSON format. I'm curious to know if react ...

How to showcase images and text from an array of objects using React

I'm currently working on a React lightbox that is supposed to display a loop of objects containing images and text. However, I'm facing an issue where the images are not showing up with the corresponding text label as intended. It seems like I a ...

Exploring the Power of Nuxt's asyncData Feature for Handling Multiple Requests

Within my application, there is a seller page showcasing products listed by the specific seller. Utilizing asyncData to retrieve all necessary data for this page has been beneficial in terms of SEO. asyncData ({params, app, error }) { return app.$axi ...

Invoking a PHP script within a div by clicking a button with the help of AJAX requests

I am currently utilizing an ajax script to call a php page named "MAINPAGE.PHP" by clicking on a button. This page contains an echo statement within a div with the id "YOURDIV". However, it seems that it's not properly calling the "MAINPAGE.PHP". Belo ...

Error in Virtual Earth: The function is undefined

Currently, I am attempting to implement lazy loading for a Virtual Earth map within a JQuery UI tab. Concurrently, there is also a Google map in another tab. My goal is to synchronize the center locations of both maps whenever a user interacts with either ...

Footer positioned correctly with relative DIV

I find myself in a state of complete confusion. Coding is not exactly my forte, so I suspect I have made a significant error somewhere that is causing the following issue: My goal is to create a sticky footer. The footer does indeed stick to the bottom of ...

Chrome Automatically Playing WebRTC Audio

My webapp has webrtc functionality, but I've noticed a strange issue. When connections are established between Chrome browsers, the audio is not played, while video is. However, this problem doesn't occur with Mozilla users. So... Chrome user 1 ...

Organizing a mat-table by date does not properly arrange the rows

My API retrieves a list of records for me. I would like to display these records sorted by date, with the latest record appearing at the top. However, the TypeScript code I have written does not seem to be ordering my rows correctly. Can anyone assist me ...

Calculating the height of the browser menubar, toolbar, navigation bar, and bookmarks can be easily achieved using jQuery or JavaScript

How can I use jQuery to calculate the height of the browser and adjust the position of another div element accordingly? What steps do I need to take to achieve this functionality? ...

Implementing a watcher property in JavaScript to dynamically add a class to an element

I'm currently facing an issue where I need to apply a class to an element when a certain data property changes. My approach involves using a watcher to monitor the value change and adding a class through JavaScript, as demonstrated in the code snippet ...

Examining whether an ajax call was not initiated within an Angular application

Is there a way to verify that an ajax request has not been made using Angular's $httpBackend? I attempted to use verifyNoOutstandingRequest() but it doesn't seem to be triggering test failures in version 1.1.5. Here is more information about the ...

Discovering the technique to interact with obscured objects through a haze of PointsMaterial in three.js

Is there a property that allows objects behind a fog of multiple points to be clickable? I want to be able to click on objects even when they are obscured by the fog. Below is the code I am using to create and animate the fog: const loadFogEffect = () =&g ...

Ways to add elements to the DOM using jQuery from the local storage?

I'm facing a challenge where I have an input field and store the inputs in local storage. When I click on 'add', I want to immediately append the new inputs to my ul element. However, simply appending the current input won't work as it ...

Switching CSS styles - seeking a smoother integration

I have successfully implemented a JS CSS switcher, which works brilliantly. However, I would like it to function more seamlessly. When opening a new page on the site, the default CSS style sometimes flickers briefly before the selected CSS style is reappli ...