How to get EpicEditor to work?

qwertie commented 8 years ago

The following test doesn't seem to work if I just load the file directly in the browser. The editor is there, but the toolbar buttons don't look right or work. Adding css files doesn't help. Why not include a working demo html file in EpicEditor-v0.2.2.zip?

    <html>
    <head>
      <title>Epic Editor simple example</title>
      <script src="js/epiceditor.min.js"></script>
      <link rel="style" href="/themes/base/epiceditor.css">
      <link rel="style" href="/themes/editor/epic-dark.css">
      <link rel="style" href="/themes/preview/github.css">
    </head>
    <body>
      <div style="padding-top: 0px; padding-bottom: 0px; height: 96vh" id="epiceditor"></div>
      <script>var editor = new EpicEditor().load();</script>
    </body>
    </html>

massar commented 8 years ago

Check your browsers "Console" and network log.

If you have invalid CSS it likely means you are not loading the CSS properly or are providing the wrong locations.

Note that you should be using:

 <link rel="style" href="/themes/preview/github.css" />

Thus closing the tags.

A live demo btw can be found easily at: http://epiceditor.com/ or google(epiceditor demo) and for instance: https://github.com/hongymagic/EpicEditor-demos and many other places...

Next to that, please realize that https://en.wikipedia.org/wiki/Content_Security_Policy exists and do not ever use inline javascript or inline style.

qwertie commented 8 years ago

Does EpicEditor use AJAX, preventing it from working in an offline HTML file (file:///)?

massar commented 8 years ago

Per default it does not use AJAX..... check the source ;)

qwertie commented 8 years ago

The console indicates a FILE_NOT_FOUND error on line 133,

headID.appendChild(cssNode);

It's trying to load css files from a nonexistant "epiceditor" folder. Note that epiceditor.com doesn't mention any need for this folder (to the contrary, it says <script src="epiceditor.min.js"></script> which implies you can put your HTML in the same folder as epiceditor.min.js. In reality, this does not work.)

So the fix is to create an epiceditor folder, move the js and themes folders into it, and store the demo HTML file outside the epiceditor folder. The following code works, and I would reiterate my recommendation to provide a working demo with the editor.

<html>
    <head>
      <title>Epic Editor simple example</title>
      <script src="epiceditor/js/epiceditor.js"></script>
    </head>
    <body>
      <div style="padding-top: 0px; padding-bottom: 0px; height: 96vh" id="epiceditor"></div>
      <script>var editor = new EpicEditor().load();</script>
    </body>
</html>

Sorry for not reading the source code, but I am looking at several different Markdown conversion tools at once.

massar commented 8 years ago

It is quite logical that you need to put your resources in the right locations, if you do not do that, then things won't work....

You can just put all the files in the root of your project, as long as you set the locations correctly, things will work.

qwertie commented 8 years ago

That doesn't change the fact that the instructions on your web site are wrong (i.e. don't work).

massar commented 8 years ago

How are they wrong?

File locations (URIs) are always variable and of a personal preference, there is no way to provide a generic answer.

qwertie commented 8 years ago

In case you missed it the first time, the "personal preference" in question was chosen by you, not me. We are talking about the default behavior of EpicEditor. It is due to this undocumented "personal preference" that your instructions don't work.

massar commented 8 years ago

I'll repeat to you "there is no way to provide a generic answer".

Everybody deploys their websites/tools differently with different paths. Putting your resources in the locations you indicate is the only way to do that.

OscarGodson / EpicEditor

How to get EpicEditor to work? #389