wysihtml is not defined #377

astroxoom · 2017-04-24T05:18:24Z

I'm using the latest version so far (installed with bower but relocated the files) then I have already set up everything.

By the way, i'm also using jQuery + Bootstrap + a Modal for my "Create Post"

When everything is already finished setting up, when I see my textarea it is just like a normal one, then I see my console log and it says that:

index.php:44 Uncaught ReferenceError: wysihtml is not defined
at index.php:44

<head>
    <!-- Bootstrap Core CSS -->
    <link href="../../../assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Website Core (CSS) -->
    <link rel="stylesheet" href="../../../assets/css/adminpg.css">

    <!-- For IE8 support of HTML5.elements and Media Queries (Responsiveness) -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <!-- InlineTextEditor -->
    <script src="../../../assets/wysihtml/dist/wysihtml.js"></script>
    <script src="../../../assets/wysihtml/dist/wysihtml-toolbar.min.js"></script>
    <script src="../../../assets/wysihtml/parser_rules/advanced.js"></script>
    <script>
        var editor = new wysihtml.Editor("wysihtml-textarea", { // id of textarea element
          toolbar:      "wysihtml-toolbar", // id of toolbar element
          parserRules:  wysihtml5ParserRules // defined in parser rules set 
        });
    </script>

</head>

<body>
   <!-- Add Page -->
    <div class="modal fade" id="addPage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <form>
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Add Page</h4>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label>Page Title</label>
              <input type="text" class="form-control" placeholder="Page Title">
            </div>
            <div class="form-group">
              <label>Page Thumbnail Image:</label>
              <input type="file" name="headerimage" style="display: inline" required accept="image/*">
            </div>
            <div class="form-group">
              <label>Page Header Image:</label>
              <input type="file" name="thumbnail" style="display: inline" required accept="image/*">
            </div>
            <div class="form-group">
              <label>Page Content</label>
                <div id="wysihtml-toolbar" style="display: none;">
                  <a data-wysihtml-command="bold">bold</a>
                  <a data-wysihtml-command="italic">italic</a>

                  <!-- Some wysihtml5 commands require extra parameters -->
                  <a data-wysihtml-command="foreColor" data-wysihtml-command-value="red">red</a>
                  <a data-wysihtml-command="foreColor" data-wysihtml-command-value="green">green</a>
                  <a data-wysihtml-command="foreColor" data-wysihtml-command-value="blue">blue</a>

                  <!-- Some wysihtml5 commands like 'createLink' require extra paramaters specified by the user (eg. href) -->
                  <a data-wysihtml-command="createLink">insert link</a>
                  <div data-wysihtml-dialog="createLink" style="display: none;">
                    <label>
                      Link:
                      <input data-wysihtml-dialog-field="href" value="http://" class="text">
                    </label>
                    <a data-wysihtml-dialog-action="save">OK</a> <a data-wysihtml-dialog-action="cancel">Cancel</a>
                  </div>
                </div>
              <textarea id="wysihtml-textarea" placeholder="Page Body"></textarea>
            </div>
            <div class="form-group">
              <label>Meta Description</label>
              <input type="text" class="form-control" placeholder="Add Meta Description...">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
        </form>
        </div>
      </div>
    </div>

    <!-- jQuery -->
    <script src='../../../assets/vendor/jquery/jquery.min.js'></script>
    
    <!-- BootstrapJS -->   
    <script src='../../../assets/vendor/bootstrap/js/bootstrap.min.js'></script>
    
</body>

</html>

The text was updated successfully, but these errors were encountered:

Globulopolis · 2017-04-24T07:51:32Z

Check url to wysihtml.js
Open Developer console, switch to network tab and reload page. Filter by Javascript.

astroxoom · 2017-04-26T12:42:38Z

Sorry for late reply.

I've also put the wysihtml javascript files below the jQuery.

Here is the statistics (in particular order) [note that all time is 0ms]
jquery.min.js
wysihtml.js
wysihtml-toolbar.min.js
advanced.js
bootstrap.min.js

Globulopolis · 2017-04-26T17:00:05Z

@astroxoom see

If you see 0 in "Transferred" or "Size" column it's because script isn't loaded at all.

astroxoom · 2017-04-27T09:00:35Z

@Globulopolis

Globulopolis · 2017-04-27T18:06:27Z

@astroxoom try to disable any cache for test.

astroxoom · 2017-04-28T18:37:15Z

@Globulopolis I disabled it (when DevTools is opened) but still it is undefined, sorry for the late comment tho.

astroxoom · 2017-04-30T06:25:23Z

I changed

        $(function() {
            var editor = new wysihtml.Editor("wysihtml-textarea", {
              toolbar:      "wysihtml-toolbar",
              parserRules:  wysihtml5ParserRules
            });
        });

to:

        (function($) {
            var editor = new wysihtml.Editor("wysihtml-textarea", {
              toolbar:      "wysihtml-toolbar",
              parserRules:  wysihtml5ParserRules
            });
        });

There is no error anymore. However, the textarea is not displaying so well, even the toolbar is not showing up.

Globulopolis · 2017-04-30T07:34:45Z

Hmmm... This is my code for editor and toolbar(using bootstrap for some menus and famfamfam iconpack for buttons)
http://demo.киноархив.com/static/wysihtml/

astroxoom · 2017-05-02T08:57:45Z

I updated my jquery and bootstrap javascript files, used jQuery(document).ready(function($){...});, and now I can use CTRL+B to bold text around my text-area, but now I cannot use the toolbar. Cannot read property 'querySelectorAll' of null

Globulopolis · 2017-05-02T10:00:39Z

@astroxoom can you provide a demo of you code? Or jsfiddle example.

astroxoom · 2017-05-06T19:48:49Z

I replaced the wysihtml, all-commands, table_editing, toolbar with the one provided in the dist folder.

Now this errors came up, checked Network tab in Google Chrome, they have status of 200 which means OK.

astroxoom · 2017-05-06T19:49:51Z

Note that I didn't build this from npm, just cloned the repository then copied the files from the dist folder over to my own dist folder.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

wysihtml is not defined #377

wysihtml is not defined #377

astroxoom commented Apr 24, 2017

Globulopolis commented Apr 24, 2017

astroxoom commented Apr 26, 2017 •

edited

Loading

Globulopolis commented Apr 26, 2017

astroxoom commented Apr 27, 2017

Globulopolis commented Apr 27, 2017

astroxoom commented Apr 28, 2017

astroxoom commented Apr 30, 2017 •

edited

Loading

Globulopolis commented Apr 30, 2017

astroxoom commented May 2, 2017

Globulopolis commented May 2, 2017

astroxoom commented May 6, 2017

astroxoom commented May 6, 2017

wysihtml is not defined #377

wysihtml is not defined #377

Comments

astroxoom commented Apr 24, 2017

Globulopolis commented Apr 24, 2017

astroxoom commented Apr 26, 2017 • edited Loading

Globulopolis commented Apr 26, 2017

astroxoom commented Apr 27, 2017

Globulopolis commented Apr 27, 2017

astroxoom commented Apr 28, 2017

astroxoom commented Apr 30, 2017 • edited Loading

Globulopolis commented Apr 30, 2017

astroxoom commented May 2, 2017

Globulopolis commented May 2, 2017

astroxoom commented May 6, 2017

astroxoom commented May 6, 2017

astroxoom commented Apr 26, 2017 •

edited

Loading

astroxoom commented Apr 30, 2017 •

edited

Loading