idered / editr.js Goto Github PK

View Code? Open in Web Editor NEW

1.3K 1.3K 171.0 1.37 MB

✏ HTML, CSS and JavaScript playground

Home Page: http://lab.kasper.io/editr/

CSS 2.32% JavaScript 96.46% HTML 0.90% PHP 0.31% CoffeeScript 0.01%

editr.js's Introduction

kasper.io

Hey there, I'm Kasper Mikiewicz and this is source of my personal blog.

I've used:

Surge - Free publishing platform for static sites
Hexo - Static site generator (It's superb!)
Jade as templating engine
SCSS with BEMIT methodology

editr.js's People

Contributors

Stargazers

Watchers

Forkers

cre8art4life omarberrayti sergioymolina bumme wayneraymond danogwok motleydev jordan-carl iarnaud codebykrieg jbloetz paulinosantos leksa medici thatleeguy msurguy landsurveyorsunited jessejones aoj zhefeng naturaldoc gigo101 davesherratt sevrles pavonis fengyiyi justfathi brenogirafa cyrke devluis manuboat parkerproject farsotstider staser yonngwoo acmoon vb2005xu katean carlolee dydycloud abdieffendi yrsdi nico21 gejigeji thewolff primaapriansyah abhinav1217 7medina recon19d silvajohnny davgit uskithub junkow noblejasper fvignals dream0411 chu888chu888 makeclan huangweili zl-for-git gbysea kaptman ajitsinghit2 geverges-oleg protoarteestudio arrolin joe8bit aosmith arikrak larz0 cdoru startupeando floatingfree patrickcoombe maheshbabu a973c vutrust morozd nxbdi maxlang dk-dev thrilleratplay hnq90 mpmedia mralexgray vehpus devindo ilovejs rvelha adjie1258 chibuisimaduka bbohling mrcmrc djs070 spil-stephanep jbeee hikikomorime tingletech ddd213 codeblockdev

editr.js's Issues

DOM is not ready when JS runs

I load a HTML file like:

And a JS like:

(function () {
var map = new geocloud.map({
el: 'map' // Render a map in #map
});
}());

It doesn't work, because the div element is not ready.

This JS works:

window.setTimeout(function () {
var map = new geocloud.map({
el: 'map'
});
}, 500);

But I would like to use the first one.

It would be amazing if you could add the option for wordpress users (my members) to create their own snippets. So make a page with 4 boxes, one for each tab you have now and they can use it like jsfiddle, open save and share links to their code. If you can get this working I'll be more than happy to pay for the current $14 version 2/3 times. Thanks

License

I was wondering if you'd consider using a different license than GPL3, or dual licensing a la jQuery. Makes it much easier to use/adopt with an Apache/BSD/MIT license.

Extend panels functionality

Allow to resize and hide specified panels.

Add support for Emmet

I'd love to see Emmet support added.

save a gist

get the html css and the js code and save in a gist

not working properly

not working properly even though i followed the document.kindly see the bellow codes

`<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/editr/editr.css">
    <title></title>
</head>
<body>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/ace/1.1.01/min/ace.js"></script>
<script src="//cdn.jsdelivr.net/ace/1.1.01/min/ext-emmet.js"></script>
<script src="/editr/libs/ext.emmet.js"></script>
<script src="/editr/editr.js"></script>



<div class="editr" data-item="PROJECT-NAME" data-files-html="index-1.html;index-2.html" data-files-css="!normalize.css;style.css" data-files-js="!jquery.js;script.js"></div>
</body>

<script type="text/javascript">
    $('.editr').each(function() {
    new Editr({ el: this });
});
</script>
</html>

what else to do ?

throws some error

i really dont know how to run this project. just did followed the documents. pls find the attachments and guide me

Link not working properly

First link in the README file in the about section is not working

[enhancement] Add missing bower.json.

Hey, maintainer(s) of Idered/Editr.js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library Idered/Editr.js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "Idered/Editr.js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

License says GPL, but has the text for the MIT license?

The source suggests GPL as well does the README, but the license text incuded in the README is actually the MIT license.

Could you clarify/fix to reflect the license you want to apply?

为什么不把其他的依赖js也打包？

Gist proxy files: php, ruby, node.js, other...

Gist API rate limits:
authorized: 5000/h
unauthorized: 60/h

I'll create php proxy file where you can put your secret key but for node.js or ruby, I'm counting on you :)

Well, I could use JS to authenticate but it's not recomended because then anyone could find your secret key.

Panes?

Any way to split this easily to panes, like jsfiddle?

Creator mode

Allow users to add, remove files.

How to disable error messages

Is there a way to disable the error messages in .js and .css files? This would be great!

Trying to get Editr to "Click to load"

Hi Kasper,

Sorry, I've been struggling for the past couple of days trying to make Editr have some "click to load" functionality. I have about 5 Editrs on my page that I only want to load when they are clicked.
The problem is the ui seems to get repeated if I initialize an Editr inside a click handler:

example:

http://jsfiddle.net/ppc_coder/5fAaQ/1/

Any advice? I'm sure I'm doing something wrong and there are ways to work around this but I'd still like to understand what's happening.

Add option to recreate iframe

In our examples, the code executing is not entirely idempotent, and so the way Editr works is a bit problematic. This is because it just re-executes the code in the same IFrame.

It would be nice if there could be an option to specify that every execution should be done in a new IFrame, and destroy the other one. That way you know you are getting a clean execution.

HTML, CSS, JS parsers as extensions

All parsers(sass, less, haml, coffee script, etc) will be available as an extension. You'll be able to define your own parsers.

Use with CMS possible?

Is it possible to use this in a CMS? It looks like it needs static html pages while in a CMS these pages don't exist.

Adding require config code breaks the editor

I have tried to use the editor to show some examples of require.js but when I insert the configuration of require it makes fail the editor.

I am using it inside of Reveal.js slides.

sass support via emscripten

Hi, Editr look cool,

Having sass support would be great.

There is a js port of sass using emscripten here : https://github.com/medialize/sass.js/

Could that be used ?

Thanks

Load from a Gist

Is it possible to load files from a Gist on Github?

PHP is not supported on my host,can you change 'proxy.gist.php' to JAVASCRIPT?

I want to use EDITR.JS on my personal site.but it cannot use any php,so can anybody help me?

Loading remote libraries/js/css

It would be awesome to have the possibility in the data-files to set remote url for libraries (like on jsfiddle for bootstrap, jquery etc).
Maybe something like data-files-http or data-files-remote is suitable as separate attribute.

Static VS Dynamic

Have you thought about making this work with dynamic data instead of static files?

Allow a way to store code in the url.

I'd like to be able to open editr in the browser.
Then I'd like to type in the 3 panels.
As I type in the three panels I'd like to see the url change to reflect the code I've typed.
If I share that URL with someone I'd like to see that they can open the editr and see the same thing I currently see.
If they correct some of my code or make a change, they should see that URL change.
I think this could be done by putting the data uri of the code in the url string.
If they send me the new URL I could see the changes they've made and and then I can choose to run it.

I would worry about someone programmatically putting malicious code in a url, then sharing that with people - I wouldn't want to be a vector for nasty actions. One check to that might be to have a secret salt and hash the url so that it isn't something malicious people can programmatically exploit.

Files loading order

Sometimes files aren't added to page in correct order. This is visible for JS and CSS.

onchange for html, css and js

Nice repo, thank you for your work!
I have Editr working well in my cms, it displays live editable code perfectly.

If possible, I'd like to use the same display to save code examples to the db.

But I haven't found how to run a js function on change for any of the windows (html, css, js) in order to reflect that change in a hidden input field.
If you know of a way to access those changes I'd love to know how!

Thanks man!