OscarGodson / EpicEditor

EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more. For developers, it offers a robust API, can be easily themed, and allows you to swap out the bundled Markdown parser with anything you throw at it.
http://epiceditor.com
MIT License
4.25k stars 334 forks source link

epiceditor with jade - editor loaded callback firing, no editor is added to the page #357

Closed ThorsonWeb closed 9 years ago

ThorsonWeb commented 9 years ago

update: it seems to be an issue with being in a container div update2: major durp on my part,

editor.load(function () {
           editor.reflow();
        });

has resolved the problem.

So I'm wanting to integrate this awesome editor with my latest node project. I serve compiled jade templates with an include for epic editor. All scripts are fine, there are no 404 relating to styles or other problems.

My JS to show the editor is

<div id="editarea"><div id="epiceditor2bdb1d84-9e21-4a93-ac3c-65318f939b88"></div></div>

$("#editarea").dialog({width:400, height:400,open: function(){
        var opts = {
           //container renders as epiceditor2bdb1d84-9e21-4a93-ac3c-65318f939b88
           container: 'epiceditor#{options.Guid}',
           textarea: null,
           basePath: '/javascripts/EpicEditor-v0.2.2',
           clientSideStorage: true,
           localStorageName: 'epiceditor',
           useNativeFullscreen: true,
           parser: marked,
           file: {
              name: 'epiceditor',
              defaultContent: '',
              autoSave: 100
           },
           theme: {
              base: '/themes/base/epiceditor.css',
              preview: '/themes/preview/preview-dark.css',
              editor: '/themes/editor/epic-dark.css'
           },
           button: {
              preview: true,
              fullscreen: true,
              bar: "auto"
           },
           focusOnLoad: false,
           shortcut: {
              modifier: 18,
              fullscreen: 70,
              preview: 80
           },
           string: {
              togglePreview: 'Toggle Preview Mode',
              toggleEdit: 'Toggle Edit Mode',
              toggleFullscreen: 'Enter Fullscreen'
           },
           autogrow: true
        }
        var editor = new EpicEditor(opts);  
        editor.load(function () {
           console.log("Editor loaded.") //prints to console
        });

the markup on the page doesn't change, however if I run editor.load() from the console the editor appears.

There are no script errors or resource 404's.... any ideas?

cheers

OscarGodson commented 9 years ago

ah, this was probably because the load event was after you had already loaded it? glad you figured it out! :+1: