V1.1.2 RC1.

froala · Mar 18, 2014 · a7cafb2 · a7cafb2
1 parent 071c1c7
commit a7cafb2
Show file tree

Hide file tree

Showing 21 changed files with 378 additions and 21 deletions.
diff --git a/css/froala_editor.css b/css/froala_editor.css
@@ -1,5 +1,5 @@
 /*!
- * froala_editor v1.1.1 (http://editor.froala.com)
+ * froala_editor v1.1.2 (http://editor.froala.com)
  * Copyright 2014-2014 Froala
  */
 [contenteditable],
@@ -51,10 +51,36 @@
   -moz-box-sizing: content-box;
   box-sizing: content-box;
 }
+.froala-element.f-tni span.f-img-wrap {
+  display: block;
+  text-align: center;
+}
+.froala-element.f-tni span.f-img-wrap:after {
+  clear: both;
+  display: block;
+  content: "";
+}
+.froala-element.f-tni span.f-img-editor {
+  display: inline-block;
+}
+.froala-element.f-tni img {
+  display: block;
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+.froala-element.f-tni img:after {
+  clear: both;
+  display: block;
+  content: "";
+}
 .froala-element.f-rtl {
   direction: rtl;
   text-align: right;
 }
+.froala-element.f-rtl.f-placeholder:before {
+  left: auto;
+  right: 10px;
+}
 .froala-element span {
   line-height: 120%;
 }
@@ -154,13 +180,19 @@
   content: '\201C';
   font-style: normal;
 }
+.froala-element span.f-img-wrap {
+  line-height: 0;
+  display: block;
+  text-align: center;
+}
 .froala-element span.f-img-editor {
   display: inline-block;
   position: relative;
   max-width: 100% !important;
   text-align: center;
   border: solid 1px #1A2D35;
   padding: 2px;
+  line-height: 0;
 }
 .froala-element span.f-img-editor img {
   border: 0;
@@ -279,6 +311,15 @@
   -moz-box-sizing: content-box;
   box-sizing: content-box;
 }
+.froala-editor input[type="text"],
+.froala-editor textarea {
+  border-radius: 0;
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
 .froala-editor.f-rtl {
   direction: rtl;
   text-align: right;
@@ -784,6 +825,7 @@
   list-style-type: none;
   padding: 0 5px;
   margin: 0 0 10px 0;
+  min-width: 320px;
 }
 .froala-editor .image-wrapper ul li {
   padding: 0;
@@ -904,6 +946,7 @@ button.f-ok {
   border: 0;
   color: #FFF;
   padding: 2px 5px;
+  margin: 0;
   font-size: 12px;
   line-height: 19px;
   font-weight: bold;

diff --git a/css/froala_editor.min.css b/css/froala_editor.min.css
diff --git a/examples/always_blank.html b/examples/always_blank.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css">
+	<link href="../css/froala_editor.min.css" rel="stylesheet" type="text/css">
+
+    <style>
+        body {
+            text-align: center;
+        }
+
+        section {
+            width: 80%;
+            margin: auto;
+            text-align: left;
+        }
+    </style>
+</head>
+
+<body>
+  <section id="editor">
+      <div id='edit' style="margin-top: 30px;">
+          <img src="../img/cute_cat.jpg" alt="Cute cat" width="300" style="float: right; margin-right: 10px; margin-bottom: 10px; margin-top: 10px;"/>
+
+          <h1>Click and edit</h1>
+
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus viverra gravida ut a dui. Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc. Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis. Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum. Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</p>
+
+          <p><a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta vehicula.</p>
+
+          <p>Nullam laoreet imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus id tempus nisi.</p>
+      </div>
+  </section>
+
+  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
+  <script src="../js/froala_editor.min.js"></script>
+
+  <script>
+      $(function(){
+          $('#edit').editable({inlineMode: false, alwaysBlank: true})
+      });
+  </script>
+</body>
+</html>
diff --git a/examples/always_visible.html b/examples/always_visible.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css">
+	<link href="../css/froala_editor.min.css" rel="stylesheet" type="text/css">
+
+    <style>
+        body {
+            text-align: center;
+        }
+
+        section {
+            width: 80%;
+            margin: auto;
+            text-align: left;
+        }
+    </style>
+</head>
+
+<body>
+  <section id="editor">
+      <div id='edit' style="margin-top: 30px;">
+          <img src="../img/cute_cat.jpg" alt="Cute cat" width="300" style="float: right; margin-right: 10px; margin-bottom: 10px; margin-top: 10px;"/>
+
+          <h1>Click and edit</h1>
+
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus viverra gravida ut a dui. Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc. Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis. Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum. Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</p>
+
+          <p><a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta vehicula.</p>
+
+          <p>Nullam laoreet imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus id tempus nisi.</p>
+      </div>
+  </section>
+
+  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
+  <script src="../js/froala_editor.min.js"></script>
+
+  <script>
+      $(function(){
+          $('#edit').editable({alwaysVisible: true})
+      });
+  </script>
+</body>
+</html>
diff --git a/examples/basic.html b/examples/basic.html
@@ -20,7 +20,7 @@
 <body>
   <section id="editor">
       <div id='edit' style="margin-top: 30px;">
-          <img src="../img/cute_cat.jpg" alt="Cute cat" width="300" style="float: left; margin-right: 10px; margin-bottom: 10px"/>
+          <img src="../img/cute_cat.jpg" alt="Cute cat" width="300" style="float: left; margin-right: 10px; margin-bottom: 10px; margin-top: 10px;"/>
 
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus viverra gravida ut a dui. Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc. Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis. Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum. Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</p>
 

diff --git a/examples/border-color.html b/examples/border-color.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css">
+	<link href="../css/froala_editor.min.css" rel="stylesheet" type="text/css">
+
+    <style>
+        body {
+            text-align: center;
+        }
+
+        section {
+            width: 80%;
+            margin: auto;
+            text-align: left;
+        }
+    </style>
+</head>
+
+<body>
+  <section id="editor">
+      <div id='edit' style="margin-top: 30px;">
+          <img src="../img/cute_cat.jpg" alt="Cute cat" width="300" style="float: left; margin-right: 10px; margin-bottom: 10px; margin-top: 10px;"/>
+
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus viverra gravida ut a dui. Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc. Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis. Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum. Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</p>
+
+          <p><a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta vehicula.</p>
+
+          <p>Nullam laoreet imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus id tempus nisi.</p>
+      </div>
+  </section>
+
+  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
+  <script src="../js/froala_editor.min.js"></script>
+
+  <script>
+      $(function(){
+          $('#edit').editable({inlineMode: false, borderColor: '#F00'})
+      });
+  </script>
+</body>
+</html>
diff --git a/examples/button_icons.html b/examples/button_icons.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css">
+	<link href="../css/froala_editor.min.css" rel="stylesheet" type="text/css">
+
+    <style>
+        body {
+            text-align: center;
+        }
+
+        section {
+            width: 80%;
+            margin: auto;
+            text-align: left;
+        }
+    </style>
+</head>
+
+<body>
+  <section id="editor">
+      <div id='edit' style="margin-top: 30px;">
+          <img src="../img/cute_cat.jpg" alt="Cute cat" width="300" style="float: left; margin-right: 10px; margin-bottom: 10px; margin-top: 10px;"/>
+
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus viverra gravida ut a dui. Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc. Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis. Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum. Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</p>
+
+          <p><a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta vehicula.</p>
+
+          <p>Nullam laoreet imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus id tempus nisi.</p>
+      </div>
+  </section>
+
+  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
+  <script src="../js/froala_editor.min.js"></script>
+
+  <script>
+      $(function(){
+          $('#edit').editable({inlineMode: false, icons: {
+            bold: {type: 'font', value: 'fa fa-text-width'},
+            floatImageNone: {type: 'font', value: 'fa fa-align-center'}
+        }})
+      });
+  </script>
+</body>
+</html>
diff --git a/examples/contentChanged_callback.html b/examples/contentChanged_callback.html
@@ -20,7 +20,7 @@
 <body>
   <section id="editor">
       <div id='edit' style="margin-top: 30px;">
-          <img src="../img/cute_cat.jpg" alt="Cute cat" width="300" style="float: left; margin-right: 10px; margin-bottom: 10px"/>
+          <img src="../img/cute_cat.jpg" alt="Cute cat" width="300" style="float: left; margin-right: 10px; margin-bottom: 10px; margin-top: 10px;"/>
 
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus viverra gravida ut a dui. Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc. Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis. Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum. Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</p>
 

diff --git a/examples/custom_buttons.html b/examples/custom_buttons.html
@@ -20,7 +20,7 @@
 <body>
   <section id="editor">
       <div id='edit' style="margin-top: 30px;">
-          <img src="../img/cute_cat.jpg" alt="Cute cat" width="300" style="float: left; margin-right: 10px; margin-bottom: 10px"/>
+          <img src="../img/cute_cat.jpg" alt="Cute cat" width="300" style="float: left; margin-right: 10px; margin-bottom: 10px; margin-top: 10px;"/>
 
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus viverra gravida ut a dui. Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc. Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis. Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum. Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</p>
 
@@ -39,8 +39,8 @@
             alert: {
               title: 'Alert',
               icon: {
-                type: 'fa',
-                value: 'fa-info'
+                type: 'font',
+                value: 'fa fa-info'
               },
               callback: function (editor){
                 alert ('Hello!')

diff --git a/examples/direction_basic_mode.html b/examples/direction_basic_mode.html
@@ -20,7 +20,7 @@
 <body>
   <section id="editor">
       <div id='edit' style="margin-top: 30px;">
-          <img src="../img/cute_cat.jpg" alt="Cute cat" width="300" style="float: left; margin-right: 10px; margin-bottom: 10px"/>
+          <img src="../img/cute_cat.jpg" alt="Cute cat" width="300" style="float: left; margin-right: 10px; margin-bottom: 10px; margin-top: 10px;"/>
 
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus viverra gravida ut a dui. Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc. Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis. Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum. Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</p>
 

diff --git a/examples/direction_inline_mode.html b/examples/direction_inline_mode.html
@@ -20,7 +20,7 @@
 <body>
   <section id="editor">
       <div id='edit' style="margin-top: 30px;">
-          <img src="../img/cute_cat.jpg" alt="Cute cat" width="300" style="float: left; margin-right: 10px; margin-bottom: 10px"/>
+          <img src="../img/cute_cat.jpg" alt="Cute cat" width="300" style="float: left; margin-right: 10px; margin-bottom: 10px; margin-top: 10px;"/>
 
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus viverra gravida ut a dui. Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc. Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis. Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum. Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</p>