3

Not sure if this is an actual problem per se but I'm using Epic Editor to input and save markdown in my GAE application (webpy with mako as the templating engine).

I've got a hidden input element in the form which gets populated by the EpicEditor's content when I submit the form but all the white spaces are replaced by  . Is this an intended feature? If I check the same code on the EpicEditor site, it clearly returns spaces instead of   so what's different about mine? 

<form>
<!-- form elements -->
<input id="content" name="content" type="hidden" value></input>
<div id="epiceditor"></div>
<button type="submit" name="submit" id="submit">submit</button>
</form>

<script type="text/javascript">
    $('button#submit').click(function(){
        var content = editor.getElement('editor').body.innerHTML; //all the spaces are returned as &nbsp; and breaks are <br>
        $('input#content').html(content);
    });
</script>

NOTE: I want to save my content as markdown in a TextProperty field my data store and generate the html tags when I retrieve it using marked.js

Oscar Godson
  • 31,662
  • 41
  • 121
  • 201
sw00
  • 980
  • 2
  • 16
  • 29

3 Answers3

6

I'm the creator of EpicEditor. You shouldn't be getting the innerHTML. EpicEditor does nothing to the innerHTML as you write. The text and code you are seeing will be different between all the browsers and it's how contenteditable fields work. For example, some browsers insert UTF-8 characters for spaces some &nbsp.

EpicEditor gives you methods to normalize the text tho. You shouldn't ever be trying to parse the text manually.

$('button#submit').click(function(){
    var content = editor.exportFile();
    $('input#content').html(content);
});

More details on exportFile: http://epiceditor.com/#exportfilefilenametype

P.S. You don't need to do input#content. Thats the same as just #content :)

Oscar Godson
  • 31,662
  • 41
  • 121
  • 201
  • Also, note that as EpicEditor evolves there will be more markup in the editor HTML to maybe add features, right click menus, etc so never rely on the HTML inside. – Oscar Godson Nov 08 '12 at 05:31
1

You can do this if you dont find out why:

<script type="text/javascript">
    $('button#submit').click(function(){
        var content = editor.getElement('editor').body.innerHTML; 
        content = content.replace("&nbsp;", " ");
        $('input#content').html(content);
    });
</script>
Relentless
  • 122
  • 6
0

[EDIT: solved] I shouldn't be using innerHTML, but innerText instead.

I figured out that Epic Editor uses &nbsp; on all spaces proceeding the first one. This is a feature, presumably.

However that wasn't the problem. ALL the spaces were being converted to &nbsp;, eventually, I realised it occurs when Epic Editor loads the autosaved content from localStorage.

I'm now loading content from my backend every time instead of autosaving. Not optimal, but solves it.

sw00
  • 980
  • 2
  • 16
  • 29