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.
EpicEditor - An embeddable JavaScript Markdown editor epiceditor is an embeddable javascript markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more.
There's a bug I'm trying to track down here: https://github.com/OscarGodson/EpicEditor/issues/184#issuecomment-8805982
Based on all the information it seems like it's because the browser is defaulting to the user's native charset (in this case, ISO-8859-1) and not UTF-8 like on my machine and others in the US. I'm guessing that a fix is to use HTML to force the encoding to UTF-8 with:
<meta charset='utf-8'>
or
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
However, the JS isn't working. In the first example:
charsetMetaTag = self.editorIframeDocument.createElement('meta');
charsetMetaTag.charset = 'utf-8';
self.editorIframeDocument.getElementsByTagName('head')[0].appendChild(charsetMetaTag);
I just get back the following injected into the DOM:
<meta>
And in the 2nd example the http-equiv isn't being set:
charsetMetaTag = self.editorIframeDocument.createElement('meta');
charsetMetaTag['http-equiv'] = 'Content-Type';
charsetMetaTag['content'] = 'text/html; charset=utf-8';
self.editorIframeDocument.getElementsByTagName('head')[0].appendChild(charsetMetaTag);
I get back the following HTML:
<meta content="text/html; charset=utf-8">
Yes, I need to do this dynamically as im dynamically creating the iframes.This may not even be the issue, but this is what it's looking like. The only "hack" i can think of is somehow using innerHTML...
Source: (StackOverflow)
I am using EpicEditor in one my project. So as per the doc, I have added textarea property to my textarea id, so when page load first time all content from textarea is showing in the EpicEditor. Works great!!!
PROBLEM:
I am getting real-time updates from server for that particular record and then I am updating the form fields value accordingly. So I am not able to set the new value in the EpicEditor. I have updated the reference textarea value but it will not sync to EpicEditor.
SOLUTION
I want to set the new value in the EpicEditor whenever some updates occurred on the reference textarea.
Source: (StackOverflow)
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 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
Source: (StackOverflow)
I'm trying to make some helper buttons similar to stackoverflow markdown editor in epiceditor
I tried this method but this actually overrides the actual file and not append to it
this is an example for bold button
$('.icon-bold').click(function(){
editor.importFile('epiceditor', '**strong text**')
});
How could i append a text to a file using epiceditor ?
i think this solution would be costly in large files
$('.icon-bold').click(function(){
content = editor.exportFile('epiceditor');
editor.importFile('epiceditor',content + '**strong text**')
});
Source: (StackOverflow)
I'm using epiceditor within my site, and I am populating it with markdown embedded on the page by the server. Currently when epiceditor displays, it has a very small default height, with scroll bars to handle viewing the entire content. I can manually set the height of the div, and for now that's the best I've been able to do (I've set it to something reasonably large: 800px). However I would like its height to always be enough to fit the entire content without scroll-bars. Essentially something like overflow:visible.
Here's the relevant portions so far
<html>
<head>
<script src="/assets/javascripts/epiceditor/js/epiceditor.min.js" type="text/javascript"></script>
<script id="postMarkdown" type="text/markdown" data-postId="1">
#Markdowns in here
...
</script>
<style>
#epiceditor{
height: 800px;
}
</style>
<script src="/assets/javascripts/thrown/posts/edit.js" type="text/javascript"></script>
</head>
<body>
<div id="epiceditor">
</div>
</body>
</html>
And heres the edit.js source (its compiled from coffescript)
$ ->
postMarkdown = $("#postMarkdown").first()
options =
basePath : '../../assets/javascripts/epiceditor'
editor = new EpicEditor(options).load()
postId = postMarkdown.data('postId')
markdown = postMarkdown.html()
editor.importFile('posts/'+postId,markdown);
editor.reflow();
I was hoping reflow might expand the height after the content was inserted, however no such luck. However If I resize the div and call reflow, It does resize properly.
I've inspected the markup it creates in hopes I could determine the height and resize its container and tell it to reflow. However it seems it contains multiple iframes, and at a glance I didn't expect that to be a quick change, or if it would even be possible. However I'd welcome any solution.
I also understand that if I size its container to the right height, epiceditor will fill the proper space. However I want its height to be the amount needed to render, such that the editor takes up the right space in the rest of the sites design. Therefore if there something I can set in EpicEditor to have it not overflow in the manner it is, or a way to determine the height after it loads, I'm set.
Thanks for any help.
Source: (StackOverflow)
I am now building a simple application, which includes editing the content such as blog. I have a few options such as tinymc, a good html editor, which I planned to use it. but then I find something about markdown, which is easy to use and popular as well nowadays. among the markdown supported editors, EpicEditor is a good choice.For some reasons, WYSIWYGs sucks and complicated. so I decided to use markdown editor.
Then on the node.js server side, I have two choices to store the content, either in markdown or html, as in the cod, it firstly parse the markdown into html, then save it to the database.
app.post('/post', function(req, res){
var currentUser = req.session.user,
html = markdown.makeHtml(req.body.post),
post = new Post(currentUser.name, req.body.title, html);
post.save(function(err){
if(err){
req.flash('error', err);
return res.redirect('/');
}
req.flash('success', 'scc!');
res.redirect('/');
});
});
the advantage of saving html to database is, the app doesn't need to parse from markdown to html when loading the content.
while the advantage of saving markdown to database is, when the user want to edit the content again, it is easier for the client to edit the markdown content.
Source: (StackOverflow)
I am using a EpicEditor. Below is the code through which I am initializing by epiceditor:
var opts = {
container: 'epiceditor',
textarea: null,
theme: {
base: '/themes/base/epiceditor.css',
preview: '/themes/preview/github.css',
editor: '/themes/editor/epic-light.css'
},
basePath: '/epiceditor',
clientSideStorage: false
}
var editor = new EpicEditor(opts);
editor.load();
I have some value which I am fetching from database and want to show on the epicedior. I am new to the epicEditor and no idea how to do that. Can somebody help me on this! Any expert on EpicEditor!!!
Source: (StackOverflow)
Im using a markdown editor in my rails app that allows users to write their posts in markdown(Epiceditor) and the html is saved to the database. However, this content should be editable as well. At the moment it renders an html mess in the post#edit action. I would need to render the original markdown input, How do I implement this?
Source: (StackOverflow)
I am trying to use epiceditor in a basic Ruby on Rails application. I followed the instructions on the webpage http://epiceditor.com/#. The epic editor window is not displaying for some reason...thanks
This is how I set up the code on my edit.html.erb view:
```
<head>
<meta charset="utf-8">
<script src="js/epiceditor.js"></script>
</head>
<body>
<div id="epiceditor"></div>
</body>
<script type="text/javascript">
var editor = new EpicEditor().load();
</script>
<h1>Edit Wiki</h1>
<%= form_for @mywiki do |f| %>
<div>
<%= f.label :title %>
<%= f.text_field :title, :size => 75 %>
</div>
<div>
<%= f.label :body %>
<%= f.text_area :body, :rows => "35", :cols => "75" %>
</div>
<%= f.submit %>
<% end %>
```
Source: (StackOverflow)
I am trying to make EpicEditor to work and i have followed the instructions from the website:
HTML:
<div id="epiceditor"></div>
Javascript:
var editor = new EpicEditor().load();
however when i load the page i get a blank page but with the following html:
<div id="epiceditor" style="height: 0px;"><iframe scrolling="no" frameborder="0" id="epiceditor-27565" style="width: 0px; height: 0px;"></iframe></div>
The console shows no errors and all files have been loaded correctly. So what could the problem be?
Source: (StackOverflow)
I'm basically looking for a way to add custom keyboard shortcuts to EpicEditor.
Let's say I want to run a custom javascript function when I hit CTRL+ENTER.
I also tried using mousetrap, but it doesn't work inside the editor itself.
Thanks!
Source: (StackOverflow)
Is there anyway to load a script (such as MathJax) into the EpicEditor preview iFrame? I want my previews to be correct Markdown and then have the javascript run to preview the MathJax content.
Thanks!
Source: (StackOverflow)
I am using epiceditor in my project, when I press on space and write bold, I get the indentation but instead of getting bold , i get ** bold ** How can I use indentation with bold in markdown?
Source: (StackOverflow)
I have a input field when I placed focus and then trying to load epiceditor on a textarea and try to set preview mode. So preview mode working prefect, but the problem is it removed the cursor from the text field.
Is there a way to load epiceditor and set preview mode and cursor stay on the input field?
Source: (StackOverflow)