Skip to content

Commit 129e44e

Browse files
Ryan Mitchellcheeaun
Ryan Mitchell
authored and
cheeaun
committed
Pagebreak plugin
1 parent 25d7555 commit 129e44e

File tree

5 files changed

+126
-0
lines changed

5 files changed

+126
-0
lines changed

‎Assets/MooEditable/MooEditable.Pagebreak.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
.mooeditable-ui-toolbar .pagebreak-item .button-icon {
3+
background: transparent url(Other/pagebreak.png) no-repeat center center;
4+
}

‎Assets/MooEditable/Other/pagebreak.gif

369 Bytes
Loading

‎Assets/MooEditable/Other/pagebreak.png

739 Bytes
Loading

‎Demos/MooEditable/MooEditable.Pagebreak.html

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>MooEditable pagebreak example</title>
6+
7+
<style type="text/css">
8+
body{
9+
font-family: sans-serif;
10+
font-size: .9em;
11+
}
12+
#textarea-1{
13+
width: 700px;
14+
height: 200px;
15+
padding: 10px;
16+
border: 2px solid #ddd;
17+
}
18+
</style>
19+
20+
<link rel="stylesheet" type="text/css" href="../../Assets/MooEditable/MooEditable.css">
21+
<link rel="stylesheet" type="text/css" href="../../Assets/MooEditable/MooEditable.Pagebreak.css">
22+
<script type="text/javascript" src="../assets/mootools.js"></script>
23+
<script type="text/javascript" src="../../Source/MooEditable/MooEditable.js"></script>
24+
<script type="text/javascript" src="../../Source/MooEditable/MooEditable.Pagebreak.js"></script>
25+
26+
<script type="text/javascript">
27+
window.addEvent('domready', function(){
28+
var mooeditable = $('textarea-1').mooEditable({
29+
actions: 'bold italic underline strikethrough | pagebreak | toggleview',
30+
externalCSS: '../../Assets/MooEditable/Editable.css'
31+
});
32+
33+
// Post submit
34+
$('theForm').addEvent('submit', function(e){
35+
alert($('textarea-1').value);
36+
return true;
37+
});
38+
});
39+
</script>
40+
41+
</head>
42+
<body>
43+
44+
<h1>MooEditable pagebreak example</h1>
45+
46+
<form id="theForm" method="post" action="http://form-data.appspot.com/">
47+
48+
<label for="textarea-1">Textarea 1</label>
49+
<textarea id="textarea-1" name="editable1">
50+
&lt;p&gt;&lt;strong&gt;This&lt;/strong&gt; is cool!&lt;/p&gt;
51+
</textarea>
52+
53+
<input type="submit">
54+
55+
</form>
56+
57+
<div id="data"></div>
58+
59+
</body>
60+
</html>

‎Source/MooEditable/MooEditable.Pagebreak.js

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/*
2+
---
3+
4+
script: MooEditable.Pagebreak.js
5+
6+
description: Extends MooEditable with pagebreak plugin
7+
8+
license: MIT-style license
9+
10+
authors:
11+
- Ryan Mitchell
12+
13+
requires:
14+
- /MooEditable
15+
- /MooEditable.UI
16+
- /MooEditable.Actions
17+
18+
usage:
19+
Add the following tags in your html
20+
<link rel="stylesheet" href="MooEditable.css">
21+
<link rel="stylesheet" href="MooEditable.Pagebreak.css">
22+
<script src="mootools.js"></script>
23+
<script src="MooEditable.js"></script>
24+
<script src="MooEditable.Pagebreak.js"></script>
25+
26+
<script>
27+
window.addEvent('domready', function(){
28+
var mooeditable = $('textarea-1').mooEditable({
29+
actions: 'bold italic underline strikethrough | pagebreak | toggleview',
30+
externalCSS: '../../Assets/MooEditable/Editable.css'
31+
});
32+
});
33+
</script>
34+
35+
...
36+
*/
37+
38+
MooEditable.Actions.extend({
39+
40+
pagebreak: {
41+
title: 'Page break',
42+
mode: 'text',
43+
command: function(){
44+
this.selection.insertContent('<img class="mooeditable-visual-aid mooeditable-pagebreak" />');
45+
},
46+
events: {
47+
beforeToggleView: function(){ // code to run when switching from iframe to textarea
48+
if(this.mode == 'iframe'){
49+
var s = this.getContent().replace(/<img([^>]*)class="mooeditable-visual-aid mooeditable-pagebreak"([^>]*)>/gi,'<!-- page break -->');
50+
this.setContent(s);
51+
} else {
52+
var s = this.textarea.get('value').replace(/<!-- page break -->/gi,'<img class="mooeditable-visual-aid mooeditable-pagebreak" />');
53+
this.textarea.set('value',s);
54+
}
55+
},
56+
render: function(){
57+
this.options.extraCSS += 'img.mooeditable-pagebreak { display:block; width:100%; height:16px; background: url(../../Assets/MooEditable/Other/pagebreak.gif) repeat-x; }';
58+
}
59+
}
60+
}
61+
62+
});

0 commit comments

Comments
 (0)