Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

adds demos from nicedit.com download #4

Merged
merged 1 commit into from

3 participants

@CoderDennis

No description provided.

@danishkhan danishkhan merged commit 59ed405 into danishkhan:master
@danishkhan
Owner

:metal:

@web-guy

Is there a way to extend the imageUpload functionality so that it will allow the image to enlarge when it is clicked? The tag has a URL surrounding the tag. Is that easy to do?

@danishkhan
Owner

Sorry to get back to you so late on this. Didn't notice the comment. I don't think there is currently an easy way to do what you are thinking. You might try playing around with the tag though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Dec 6, 2012
  1. adds demos from nicedit.com download

    Dennis Palmer authored
This page is out of date. Refresh to see the latest.
View
37 demos/demo01.html
@@ -0,0 +1,37 @@
+<html>
+<head>
+ <title>Demo 1 : Convert All Textareas</title>
+</head>
+<body>
+
+<div id="menu"></div>
+
+<div id="intro">
+By calling the nicEditors.allTextareas() function the below example replaces all 3 textareas on the page with nicEditors. NicEditors will match the size of the editor window with the size of the textarea it replaced.
+</div>
+<br />
+
+<div id="sample">
+<script type="text/javascript" src="../nicEdit.js"></script>
+<script type="text/javascript">
+ bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
+</script>
+
+<h4>First Textarea</h4>
+<textarea name="area1" cols="40"></textarea>
+<br />
+
+<h4>Second Textarea</h4>
+<textarea name="area2" style="width: 100%;">
+ Some Initial Content was in this textarea
+</textarea>
+<br />
+
+<h4>Third Textarea</h4>
+<textarea name="area3" style="width: 300px; height: 100px;">
+ HTML <b>content</b> <i>default</i> in textarea
+</textarea>
+</div>
+
+</body>
+</html>
View
57 demos/demo02.html
@@ -0,0 +1,57 @@
+<html>
+<head>
+ <title>Demo 2 : NicEdit Configuration</title>
+</head>
+<body>
+
+<div id="menu"></div>
+
+<div id="intro">
+<p>NicEdit is highly configurable by passing the configuration when you create the NicEditor. Pass your configuration when you call:</p>
+<p>new NicEditor({CONFIG HERE})</p>
+<p>Add .panelInstance('ID TO TEXTAREA HERE') to add the editor to the textarea.</p>
+<p>See the examples below:</p>
+</div>
+<br />
+
+<div id="sample">
+<script src="../nicEdit.js" type="text/javascript"></script>
+<script type="text/javascript">
+bkLib.onDomLoaded(function() {
+ new nicEditor().panelInstance('area1');
+ new nicEditor({fullPanel : true}).panelInstance('area2');
+ new nicEditor({iconsPath : '../nicEditorIcons.gif'}).panelInstance('area3');
+ new nicEditor({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','image']}).panelInstance('area4');
+ new nicEditor({maxHeight : 100}).panelInstance('area5');
+});
+</script>
+
+<h4>Default (No Config Specified)</h4>
+<p>new nicEditor().panelInstance('area1');</p>
+
+<textarea cols="50" id="area1"></textarea>
+
+<h4>All Available Buttons {fullPanel : true}</h4>
+<p>new nicEditor({fullPanel : true}).panelInstance('area2');</p>
+<textarea cols="60" id="area2">Some Initial Content was in this textarea</textarea>
+
+<h4>Change Path to Icon File {iconsPath : 'path/to/nicEditorIcons.gif'}</h4>
+
+<p>new nicEditor({iconsPath : 'nicEditorIcons.gif'}).panelInstance('area3');</p>
+<textarea cols="50" id="area3"></textarea>
+
+<h4>Customize the Panel Buttons/Select List</h4>
+
+<p>{buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript']}</p>
+<textarea cols="50" id="area4">HTML <b>content</b> <i>default</i> in textarea</textarea>
+
+<h4>Set a maximum expansion size (maxHeight)</h4>
+
+<p>{maxHeight : 100}</p>
+<textarea style="height: 100px;" cols="50" id="area5">HTML <b>content</b> <i>default</i> in textarea</textarea>
+</div>
+
+</div>
+
+</body>
+</html>
View
56 demos/demo03.html
@@ -0,0 +1,56 @@
+<html>
+<head>
+ <title>Demo 3 : Add/Remove NicEditors</title>
+</head>
+<body>
+
+<div id="menu"></div>
+
+<div id="intro">
+<p>The demo below shows toggling the display of NicEditors on both textarea and div elements. NicEdit instances can be added and removed at any time</p>
+</div>
+<br />
+
+<div id="sample">
+<h4>Div Example</h4>
+ <div id="myArea1" style="width: 300px; height: 100px; border: 1px solid #000;">
+ This is some TEST CONTENT<br />
+ In a DIV Tag<br />
+ Click the Buttons to activate
+ </div>
+ <button onClick="toggleArea1();">Toggle DIV Editor</button>
+<br /><br />
+<h4>Textarea Example</h4>
+<div>
+ <textarea style="width: 300px; height: 100px;" id="myArea2"></textarea>
+ <br />
+ <button onClick="addArea2();">Add Editor to TEXTAREA</button> <button onClick="removeArea2();">Remove Editor from TEXTAREA</button>
+</div>
+<div style="clear: both;"></div>
+
+<script src="../nicEdit.js" type="text/javascript"></script>
+<script>
+var area1, area2;
+
+function toggleArea1() {
+ if(!area1) {
+ area1 = new nicEditor({fullPanel : true}).panelInstance('myArea1',{hasPanel : true});
+ } else {
+ area1.removeInstance('myArea1');
+ area1 = null;
+ }
+}
+
+function addArea2() {
+ area2 = new nicEditor({fullPanel : true}).panelInstance('myArea2');
+}
+function removeArea2() {
+ area2.removeInstance('myArea2');
+}
+
+bkLib.onDomLoaded(function() { toggleArea1(); });
+</script>
+</div>
+
+</body>
+</html>
View
49 demos/demo04.html
@@ -0,0 +1,49 @@
+<html>
+<head>
+ <title>Demo 4 : Inline NicEditors</title>
+</head>
+<body>
+
+<div id="menu"></div>
+
+<div id="intro">
+<p>In addition to replacing textareas NicEdit instances can also replace any element (divs,spans,paragraphs,ect.) with editor instances without effecting the layout of the page. As you will see in other examples content can be saved via AJAX to the server or retrieved from javascript</p>
+
+<p>To make use of Inline Editing you should first create an empty element as a placeholder for the Editor Panel. In this case I use a div with id="myNicPanel" set. Its usually a good idea to set a width on element but it is not required.</p>
+</div>
+
+<div id="sample">
+
+<script src="../nicEdit.js" type="text/javascript"></script>
+<script type="text/javascript">
+ bkLib.onDomLoaded(function() {
+ var myNicEditor = new nicEditor();
+ myNicEditor.setPanel('myNicPanel');
+ myNicEditor.addInstance('myInstance1');
+ myNicEditor.addInstance('myInstance2');
+ myNicEditor.addInstance('myInstance3');
+ });
+</script>
+
+This is text above the Panel
+<div id="myNicPanel" style="width: 525px;"></div>
+This is text below the Panel
+<br /><br />
+
+<h4>Inline Div</h4>
+<div id="myInstance1" style="font-size: 16px; background-color: #ccc; padding: 3px; border: 5px solid #000; width: 400px;">
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor, faucibus ac, iaculis non, cursus et, dui. Donec non urna. Aliquam volutpat ornare augue. Phasellus egestas, nisl fermentum porttitor rutrum, magna metus rutrum risus, id fringilla magna mi nec lorem. Etiam eget metus sed justo ultricies rhoncus. Praesent rhoncus arcu non dolor. Proin eu eros. Curabitur vehicula. Nulla vehicula lectus eget eros. Nulla vel nulla at dui dictum mollis. Etiam purus felis, pretium vel, eleifend id, consectetuer nec, purus. Vivamus pretium orci ac sapien. Etiam at tortor. Nunc tincidunt mi sed sapien. Etiam lacus pede, fermentum eu, blandit ac, congue eget, metus. Quisque sed sem. Mauris at sapien. Ut luctus.
+</div>
+<br />
+<h4>Inline Span</h4>
+<span id="myInstance2" style="display: block;">
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor, faucibus ac, iaculis non, cursus et, dui. Donec non urna. Aliquam volutpat ornare augue. Phasellus egestas, nisl fermentum porttitor rutrum, magna metus rutrum risus, id fringilla magna mi nec lorem. Etiam eget metus sed justo ultricies rhoncus. Praesent rhoncus arcu non dolor. Proin eu eros. Curabitur vehicula. Nulla vehicula lectus eget eros. Nulla vel nulla at dui dictum mollis. Etiam purus felis, pretium vel, eleifend id, consectetuer nec, purus. Vivamus pretium orci ac sapien. Etiam at tortor. Nunc tincidunt mi sed sapien. Etiam lacus pede, fermentum eu, blandit ac, congue eget, metus. Quisque sed sem. Mauris at sapien. Ut luctus.
+</span>
+<br />
+<h4>Inline Paragraph</h4>
+<p id="myInstance3" style="border: 1px solid #000;">This is some text that can be edited in the inline paragraph editor.</p>
+
+</div>
+
+</body>
+</html>
View
54 demos/demo05.html
@@ -0,0 +1,54 @@
+<html>
+<head>
+ <title>Demo 5 : Editor Styles</title>
+
+<style type="text/css">
+#myInstance1 {
+ border: 2px dashed #0000ff;
+}
+.nicEdit-selected {
+ border: 2px solid #0000ff !important;
+}
+
+.nicEdit-panel {
+ background-color: #fff !important;
+}
+
+.nicEdit-button {
+ background-color: #fff !important;
+}
+</style>
+
+</head>
+<body>
+
+<div id="menu"></div>
+
+<div id="intro">
+<p>NicEdit instances and the panel can be styled using CSS classes to fit the look and feel of your site.</p>
+
+</div>
+
+<div id="sample">
+
+<script src="../nicEdit.js" type="text/javascript"></script>
+<script type="text/javascript">
+ bkLib.onDomLoaded(function() {
+ var myNicEditor = new nicEditor();
+ myNicEditor.setPanel('myNicPanel');
+ myNicEditor.addInstance('myInstance1');
+ });
+</script>
+
+This is text above the Panel
+<div id="myNicPanel" style="width: 350px;"></div>
+This is text below the Panel
+<br /><br />
+
+<h4>Selected Style Example</h4>
+<div id="myInstance1" style="font-size: 16px; background-color: #ccc; padding: 3px; width: 400px;">
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor, faucibus ac, iaculis non, cursus et, dui. Donec non urna. Aliquam volutpat ornare augue. Phasellus egestas, nisl fermentum porttitor rutrum, magna metus rutrum risus, id fringilla magna mi nec lorem. Etiam eget metus sed justo ultricies rhoncus. Praesent rhoncus arcu non dolor. Proin eu eros. Curabitur vehicula. Nulla vehicula lectus eget eros. Nulla vel nulla at dui dictum mollis. Etiam purus felis, pretium vel, eleifend id, consectetuer nec, purus. Vivamus pretium orci ac sapien. Etiam at tortor. Nunc tincidunt mi sed sapien. Etiam lacus pede, fermentum eu, blandit ac, congue eget, metus. Quisque sed sem. Mauris at sapien. Ut luctus.
+</div>
+
+</body>
+</html>
Something went wrong with that request. Please try again.