wysihtml is not defined

astroxoom commented 7 years ago

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>

Globulopolis commented 7 years ago

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

astroxoom commented 7 years ago

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 commented 7 years ago

@astroxoom see clipboard02

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

astroxoom commented 7 years ago

@Globulopolis

Globulopolis commented 7 years ago

@astroxoom try to disable any cache for test.

astroxoom commented 7 years ago

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

astroxoom commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

astroxoom commented 7 years ago

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 commented 7 years ago

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.

Voog / wysihtml

wysihtml is not defined #377