WYSIWYD Editor - froala-editor-modal
Trying to integrate forala-editor and bootstrap modal
by bizamajig
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div id='edit1'></div>
<div id='edit2'></div>
CSS
body {
text-align: center;
}
section {
width: 80%;
margin: auto;
text-align: left;
}
/*!
* froala_editor v1.1.5 (http://editor.froala.com)
* Copyright 2014-2014 Froala
*/[contenteditable],[contenteditable]:focus{outline:0 solid transparent}button{outline:0}.f-non-selectable{user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none}.f-non-selectable *{user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none}.froala-editor{user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none}.froala-editor :not(input):not(textarea){user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none}.f-italic{font-style:italic!important}.f-spaced{letter-spacing:3px!important}.f-uppercase{text-transform:uppercase!important}.f-typewriter{font-family:'Lucida Console',monospace!important;line-height:160%!important;font-size:14px}.froala-element{min-height:20px;overflow-y:auto;overflow-x:hidden;position:relative;word-wrap:break-word;line-height:120%}.froala-element ul,.froala-element ol{padding-left:20px}.froala-element ul li,.froala-element ol li{position:relative;left:20px;margin-right:20px}.froala-element hr{height:0;border:0;border-top:solid 1px #CCC;clear:both}.froala-element *{-webkit-box-sizing:content-box;-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...
JavaScript
/*!
* froala_editor v1.1.5 (http://editor.froala.com)
* Copyright 2014-2014 Froala
*/
if("undefined"==typeof jQuery)throw new Error("Froala requires jQuery");!function(a){"use strict";var b=function(c,d){this.options=a.extend({},b.DEFAULTS,a(c).data(),"object"==typeof d&&d),this.browser=b.browser(),this.disabledList=[],this._id=++b.count,this.init(c)};b.count=0,b.VALID_NODES=["P","PRE","BLOCKQUOTE","H1","H2","H3","H4","H5","H6","DIV","LI"],b.COLORS=["#000000","#444444","#666666","#999999","#CCCCCC","#EEEEEE","#F3F3F3","#FFFFFF","#FF0000","#FF9900","#FFFF00","#00FF00","#00FFFF","#0000FF","#9900FF","#FF00FF","#F4CCCC","#FCE5CD","#FFF2CC","#D9EAD3","#D0E0E3","#CFE2F3","#D9D2E9","#EAD1DC","#EA9999","#F9CB9C","#FFE599","#B6D7A8","#A2C4C9","#9FC5E8","#B4A7D6","#D5A6BD","#E06666","#F6B26B","#FFD966","#93C47D","#76A5AF","#6FA8DC","#8E7CC3","#C27BA0","#CC0000","#E69138","#F1C232","#6AA84F","#45818E","#3D85C6","#674EA7","#A64D79","#990000","#B45F06","#BF9000","#38771D","#134F5C","#0B5394","#351C75","#741B47","#660000","#783F04","#7F6000","#274E13","#0C343D","#073763","#201211","#4C1130"],b.image_commands={floatImageLeft:{title:"Float Left",icon:{type:"font",value:"fa fa-align-left"}},floatImageNone:{title:"Float None",icon:{type:"font",value:"fa fa-align-justify"}},floatImageRight:{title:"Float Right",icon:{type:"font",value:"fa fa-align-right"}},linkImage:{title:"Insert Link",icon:{type:"font",value:"fa fa-link"}},replaceImage:{title:"Replace Image",icon:{type:"font",value:"fa fa-exchange"}},removeImage:{title:"Remove Image",icon:{type:"font",value:"fa fa-trash-o"}}},b.commands={bold:{title:"Bold",icon:"fa fa-bold",shortcut:"(Ctrl + B)"},italic:{title:"Italic",icon:"fa fa-italic",shortcut:"(Ctrl + I)"},underline:{cmd:"underline",title:"Underline",icon:"fa fa-underline",shortcut:"(Ctrl + U)"},strikeThrough:{title:"Strikethrough",icon:"fa fa-strikethrough"},fontSize:{title:"Font Size",icon:"fa fa-text-height",seed:[{min:11,max:52}]},color:{icon:"fa...