I would like to add a Quilljs editor to the admin area of my widget, but I am having trouble passing $this->id to javascript.

I am using the foo_example widget code, and I've appended the following to form(),

    <div id="<?php echo $this->id; ?>" class="my-container">
        <!-- Create the toolbar -->
        <div id="<?php echo $this->id; ?>" class="my-toolbar">
        <select class="ql-size">
            <option value="10px">Small</option>
            <option value="13px" selected>Normal</option>
            <option value="18px">Large</option>
        <span title="Bold" class="ql-format-button ql-bold"></span>
        <!-- Create the editor -->
        <div id="<?php echo $this->id; ?>" class="my-editor">
            <div>Hello World!</div>
    <!-- Include the Quill library -->
    <script src="//cdn.quilljs.com/latest/quill.min.js"></script>
    <!-- Initialize Quill editor -->
      var editor = new Quill('#<?php echo $this->id; ?>.my-editor', {
      modules: {
        'toolbar': {
          container: '#<?php echo $this->id; ?>.my-toolbar'

When I check the source code I can see the div id's have been set (e.g. foo_widget-15), but the javascript directly below contains foo_widget-__i__.

I feel like I've hit a dead end here, is there a work-around/alternative to pass the widget id into javascript correctly?

  • Since you're working with front-end javascript, have you considered just referencing the div directly by class, ie new Quill('.my-editor')? – Joel Dec 4 '15 at 14:05
  • This is back-end..I think? the editor is only shown in the theme customizer when you're logged in as admin, though I'm not sure I'm handling it correctly. I can reference the class as you mention, but I wish to support multiple editors on the same page, hence why I need to include a unique identifier to go with it. – whysoconfused Dec 4 '15 at 16:24
  • there is nothing obviously wrong with this snippet, the problem is probably with other part of the widget code. Dose the widget code works outside of the customizer via the widgets screen? – Mark Kaplun Dec 4 '15 at 16:59
  • The same issue appears on the widgets screen. I may have found a question related to my problem here. – whysoconfused Dec 4 '15 at 18:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.