FiddleStick
FiddleStick is a local JSFiddle easy to use and modulate.
There is currently 2 possible behaviours: Basic textarea or Ace editor.
Installation
Fast
Load FiddleStick from your HTML using RawGit CDN:
Basic textarea
<script src="https://cdn.rawgit.com/KmeCnin/fiddlestick/v0.1.2/fiddlestick.js"></script>
Ace editor
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
<script src="https://cdn.rawgit.com/KmeCnin/fiddlestick/v0.1.2/fiddlestick-ace.js"></script>
Clean
Basic textarea
- Copy file https://raw.githubusercontent.com/KmeCnin/fiddlestick/master/fiddlestick.js into your project directory.
- Load FiddleStick in your HTML:
<script src="path/to/fiddlestick.js"></script>
Ace editor
- Copy file https://raw.githubusercontent.com/KmeCnin/fiddlestick/master/fiddlestick-ace.js into your project directory.
- Load Ace editor in your HTML using CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
- Load FiddleStick in your HTML:
<script src="path/to/fiddlestick-ace.js"></script>
Usage
A FiddleStick is composed of multiple HTML elements.
Each element from a single FiddleStick must share the same data-fiddlestick-id
. This means it is possible to have multiple independants fiddlesticks in the same page.
Each element must have a data-fiddlestick-type
defining its kind of language. Possible values are:
data-fiddlestick-type="html"
: containing HTML codedata-fiddlestick-type="js"
: containing JavaScript codedata-fiddlestick-type="css"
: containing CSS codedata-fiddlestick-type="render"
: will display the rendering of the fiddlestick
Important:
- Their must be only one
data-fiddlestick-type="render"
bydata-fiddlestick-id
. - But it is possible to have as many html/js/css types as we want, they will be concatenated by order of occurency.
- html/js/css types can be editable elements (textarea, input, etc.) or readonly elements (div, span, etc.).
Example
You can use multiple fiddlesticks in the same page.
Editable data must be placed in <textarea>
and un-editable data can be for instance in a <div>
.
You can display: none
a block of fiddlestick in order to hide it from the user but it will still be concatenated to your rendered fiddlestick.
<!-- One first Fiddlestick -->
<textarea data-fiddlestick-id="first-fiddlestick" data-fiddlestick-type="html">
<!-- Data will be completed by user. -->
</textarea>
<textarea data-fiddlestick-id="first-fiddlestick" data-fiddlestick-type="js">
<!-- Data will be completed by user. -->
</textarea>
<div data-fiddlestick-id="first-fiddlestick" data-fiddlestick-type="css">
p {
color: red;
}
</div>
<div data-fiddlestick-id="first-fiddlestick" data-fiddlestick-type="render"></div>
<!-- Another Fiddlestick in the same page -->
<textarea data-fiddlestick-id="second-fiddlestick" data-fiddlestick-type="js">
<!-- Data will be completed by user. -->
</textarea>
<div data-fiddlestick-id="second-fiddlestick" data-fiddlestick-type="js">
<!-- Define here JavaScript code in readonly. It will be added at the end of the previous code then rendered. -->
</div>
<div data-fiddlestick-id="second-fiddlestick" data-fiddlestick-type="render"></div>
Working examples
Simple FiddleStick example
You can use a very simple fiddlestick with raw textarea using fiddlestick.js
.
Live example
Ace editor FiddleStick example
You can use a code editor-like area using integration with Ace editor by using fiddlestick-ace.js
.
You have to include Ace editor before FiddleStick.
Live example