framework7io/framework7 · error · Error

Framework7: TextEditor: wrong "buttons" parameter format

Error message

Framework7: TextEditor: wrong "buttons" parameter format

What it means

The TextEditor `buttons` parameter must be an array (or array of arrays) of button names/objects. If it is passed as a string, the constructor attempts JSON.parse to coerce it; when parsing fails it throws, because a non-JSON string cannot be interpreted as a buttons config.

Source

Thrown at src/core/components/text-editor/text-editor-class.js:74

      $contentEl = $el.children('.text-editor-content');
    }

    extend(self, { app, $el, el: $el[0], $contentEl, contentEl: $contentEl[0] });
    if ('value' in params) {
      self.value = self.params.value;
    }

    if (self.params.mode === 'keyboard-toolbar') {
      if (!(device.cordova || device.capacitor) && !device.android) {
        self.params.mode = 'popover';
      }
    }

    if (typeof self.params.buttons === 'string') {
      try {
        self.params.buttons = JSON.parse(self.params.buttons);
      } catch (err) {
        throw new Error('Framework7: TextEditor: wrong "buttons" parameter format');
      }
    }

    $el[0].f7TextEditor = self;

    // Bind
    self.onButtonClick = self.onButtonClick.bind(self);
    self.onFocus = self.onFocus.bind(self);
    self.onBlur = self.onBlur.bind(self);
    self.onInput = self.onInput.bind(self);
    self.onPaste = self.onPaste.bind(self);
    self.onSelectionChange = self.onSelectionChange.bind(self);
    self.closeKeyboardToolbar = self.closeKeyboardToolbar.bind(self);

    // Handle Events
    self.attachEvents = function attachEvents() {
      if (self.params.mode === 'toolbar') {
        self.$el.find('.text-editor-toolbar').on('click', 'button', self.onButtonClick);

View on GitHub (pinned to 6557591266)

Solutions

1. Pass buttons as an actual JS array: buttons: ['bold', 'italic', 'underline']
2. If a string must be used, make it valid JSON: '["bold","italic"]' (double quotes, no trailing commas)
3. Check any data-buttons attribute for strict JSON syntax

Example fix

// before
new Framework7.TextEditor({ el: '#editor', buttons: 'bold,italic' });

// after
new Framework7.TextEditor({ el: '#editor', buttons: ['bold', 'italic'] });

function parseButtons(buttons) {
  if (typeof buttons === 'string') {
    try { return JSON.parse(buttons); } catch (e) { return null; }
  }
  return buttons;
}
const buttons = parseButtons(rawButtons);
if (!buttons) throw new Error('buttons must be an array or valid JSON');

function isValidButtons(v) {
  return Array.isArray(v) && v.every(b => typeof b === 'string' || typeof b === 'object');
}

try {
  const editor = new Framework7.TextEditor({ el, buttons: rawButtons });
} catch (e) {
  if (/wrong "buttons" parameter format/.test(e.message)) {
    console.error('buttons must be an array or valid JSON string');
  } else throw e;
}

When it happens

Trigger: Passing `buttons: 'bold, italic, underline'` or any comma-separated / malformed string in the TextEditor params; strings from HTML `data-buttons` attributes that are not valid JSON.

Common situations: Configuring the editor via data attributes where the string is not JSON; copying a JS array config into a string; typos like single quotes in JSON (`{'bold':'bold'}`) which JSON.parse rejects.

Related errors

• Framework7: There is no View with "${anotherViewName}" name
• Framework7: wrong or not complete browserHistory configurati
• Framework7 is already initialized and can't be initialized m
• Framework7: can't create a View instance because ${typeof el
• Framework7: it is not allowed to use router methods on globa

AI-assisted analysis of framework7io/framework7@6557591266 (2026-09-02). Data as JSON: /api/errors/b49a6346d8d05419. Report an issue: GitHub.