Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <textarea class="js--trumbowyg">Words by deafult</textarea>
              
            
!

CSS

              
                /**
 * Trumbowyg v2.0.0-beta.0 - A lightweight WYSIWYG editor
 * Default stylesheet for Trumbowyg editor
 * ------------------------
 * @link https://alex-d.github.io/Trumbowyg
 * @license MIT
 * @author Alexandre Demode (Alex-D)
 *         Twitter : @AlexandreDemode
 *         Website : alex-d.fr
 */

.trumbowyg-box,
.trumbowyg-editor {
  display: block;
  position: relative;
  border: 1px solid #DDD;
  width: 96%;
  min-height: 300px;
  margin: 17px auto;
}

.trumbowyg-box .trumbowyg-editor {
  margin: 0 auto;
}

.trumbowyg-box.trumbowyg-fullscreen {
  background: #FEFEFE;
}

.trumbowyg-editor,
.trumbowyg-textarea {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1% 2%;
  min-height: 300px;
  width: 100%;
  border-style: none;
  resize: none;
  outline: none;
}

.trumbowyg-box-blur .trumbowyg-editor * {
  color: transparent !important;
  text-shadow: 0 0 7px #333;
}

.trumbowyg-box-blur .trumbowyg-editor img {
  opacity: 0.2;
}

.trumbowyg-textarea {
  position: relative;
  display: block;
  overflow: auto;
  border: none;
  white-space: normal;
}

.trumbowyg-box.trumbowyg-editor-visible .trumbowyg-textarea {
  position: absolute;
  top: 37px;
  height: 1px !important;
  width: 25%;
  min-height: 0 !important;
  padding: 0;
  background: none;
}

.trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-textarea {
  display: block;
}

.trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-editor {
  display: none;
}

.trumbowyg-editor[contenteditable=true]:empty:before {
  content: attr(placeholder);
  color: #999;
}

.trumbowyg-button-pane {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #d7e0e2;
  margin: 0;
  padding: 0;
  list-style-type: none;
  line-height: 10px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.trumbowyg-button-pane li {
  display: inline-block;
  text-align: center;
  overflow: hidden;
}

.trumbowyg-button-pane li.trumbowyg-separator {
  width: 1px;
  background: #fff;
  height: auto;
}

.trumbowyg-button-pane.trumbowyg-disable li:not(.trumbowyg-not-disable) button:not(.trumbowyg-active) {
  opacity: 0.2;
  cursor: default;
}

.trumbowyg-button-pane.trumbowyg-disable li.trumbowyg-separator {

}

.trumbowyg-button-pane:not(.trumbowyg-disable) li button:hover,
.trumbowyg-button-pane:not(.trumbowyg-disable) li button:focus,
.trumbowyg-button-pane li button.trumbowyg-active,
.trumbowyg-button-pane li.trumbowyg-not-disable button:hover,
.trumbowyg-button-pane li.trumbowyg-not-disable button:focus {
  background-color: #FFF;
  outline: none;
}

.trumbowyg-button-pane li .trumbowyg-open-dropdown:after {
  display: block;
  content: " ";
  position: absolute;
  top: 1rem;
  right: 0.25rem;
  height: 0;
  width: 0;
  border: 3px solid transparent;
  border-top-color: #555;
}

.trumbowyg-button-pane .trumbowyg-buttons-right {
  float: right;
  width: auto;
}

.trumbowyg-button-pane .trumbowyg-buttons-right button {
  float: left;
}

.trumbowyg-dropdown {
  width: auto;
  max-width: 15rem;
  border: 1px solid #ecf0f1;
  padding: 5px 0;
  border-top: none;
  background: #FFF;
  margin-left: -1px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px;
}

.trumbowyg-dropdown button {
  display: block;
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-decoration: none;
  background: #FFF;
  padding: 0 14px;
  color: #333;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
}

.trumbowyg-dropdown button:hover,
.trumbowyg-dropdown button:focus {
  background: #efefef;
}
/* Modal box */

.trumbowyg-modal {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -260px;
  width: 520px;
  height: 290px;
  overflow: hidden;
}

.trumbowyg-modal-box {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -250px;
  width: 500px;
  height: 275px;
  z-index: 1;
  background-color: #FFF;
  text-align: center;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 3px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 3px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.trumbowyg-modal-box .trumbowyg-modal-title {
  font-size: 2rem;
  font-weight: bold;
  margin: 0 0 20px;
  padding: 15px 0 13px;
  display: block;
  border-bottom: 1px solid #EEE;
  color: #333;
  background: #fbfcfc;
}

.trumbowyg-modal-box .trumbowyg-progress {
  width: 100%;
  background: #F00;
  height: 3px;
  position: absolute;
  top: 58px;
}

.trumbowyg-modal-box .trumbowyg-progress .trumbowyg-progress-bar {
  background: #2BC06A;
  height: 100%;
  -webkit-transition: width 0.15s linear;
  transition: width 0.15s linear;
}

.trumbowyg-modal-box label {
  display: block;
  position: relative;
  margin: 15px 12px;
  height: 27px;
  line-height: 27px;
  overflow: hidden;
}

.trumbowyg-modal-box label .trumbowyg-input-infos {
  display: block;
  text-align: left;
  height: 25px;
  line-height: 25px;
  -webkit-transition: all 0.15;
  transition: all 0.15;
}

.trumbowyg-modal-box label .trumbowyg-input-infos span {
  display: block;
  color: #859fa5;
  background-color: #fbfcfc;
  border: 1px solid #DEDEDE;
  padding: 0 2%;
  width: 19.5%;
}

.trumbowyg-modal-box label .trumbowyg-input-infos span.trumbowyg-msg-error {
  color: #e74c3c;
}

.trumbowyg-modal-box label.trumbowyg-input-error input,
.trumbowyg-modal-box label.trumbowyg-input-error textarea {
  border: 1px solid #e74c3c;
}

.trumbowyg-modal-box label.trumbowyg-input-error .trumbowyg-input-infos {
  margin-top: -27px;
}

.trumbowyg-modal-box label input {
  position: absolute;
  top: 0;
  right: 0;
  height: 25px;
  line-height: 25px;
  border: 1px solid #DEDEDE;
  background: transparent;
  width: 72%;
  padding: 0 2%;
  margin: 0 0 0 23%;
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
}

.trumbowyg-modal-box label input:hover,
.trumbowyg-modal-box label input:focus {
  outline: none;
  border: 1px solid #95a5a6;
}

.trumbowyg-modal-box label input:focus {
  background: rgba(230, 230, 255, 0.1);
}

.trumbowyg-modal-box .error {
  margin-top: 25px;
  display: block;
  color: red;
}

.trumbowyg-modal-box .trumbowyg-modal-button {
  position: absolute;
  bottom: 10px;
  right: 0;
  text-decoration: none;
  color: #FFF;
  display: block;
  width: 100px;
  height: 35px;
  line-height: 33px;
  margin: 0 10px;
  background-color: #333;
  border: none;
  border-top: none;
  cursor: pointer;
  font-size: 16px;
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit {
  right: 110px;
  background: #2bc069;
}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover,
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus {
  background: #40d47d;
  outline: none;
}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active {
  background: #25a259;
}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset {
  color: #555;
  background: #e6e6e6;
}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover,
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus {
  background: #fbfbfb;
  outline: none;
}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active {
  background: #d4d4d4;
}

.trumbowyg-overlay {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  left: 0;
  display: none;
}
/**
 * Fullscreen
 */

body.trumbowyg-body-fullscreen {
  overflow: hidden;
}

.trumbowyg-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 99999;
}

.trumbowyg-fullscreen.trumbowyg-box,
.trumbowyg-fullscreen .trumbowyg-editor {
  border: none;
}

.trumbowyg-fullscreen .trumbowyg-overlay {
  height: 100% !important;
}
/*
 * Reset for resetCss option
 */

.trumbowyg-editor object,
.trumbowyg-editor embed,
.trumbowyg-editor video,
.trumbowyg-editor img {
  width: auto;
  max-width: 100%;
}

.trumbowyg-editor video,
.trumbowyg-editor img {
  height: auto;
}

.trumbowyg-editor img {
  cursor: move;
}

.trumbowyg-editor.trumbowyg-reset-css {
  background: #FEFEFE !important;
  font-size: 1rem !important;
  line-height: 1.45em !important;
  white-space: normal !important;
  color: #333;
}

.trumbowyg-editor.trumbowyg-reset-css a {
  color: #15c !important;
  text-decoration: underline !important;
}

.trumbowyg-editor.trumbowyg-reset-css div,
.trumbowyg-editor.trumbowyg-reset-css p,
.trumbowyg-editor.trumbowyg-reset-css ul,
.trumbowyg-editor.trumbowyg-reset-css ol,
.trumbowyg-editor.trumbowyg-reset-css blockquote {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  background: none !important;
  margin: 0 !important;
  margin-bottom: 15px !important;
  line-height: 1.4em !important;
  font-size: 14px !important;
  border: none;
}

.trumbowyg-editor.trumbowyg-reset-css iframe,
.trumbowyg-editor.trumbowyg-reset-css object,
.trumbowyg-editor.trumbowyg-reset-css hr {
  margin-bottom: 1rem !important;
}

.trumbowyg-editor.trumbowyg-reset-css blockquote {
  margin-left: 2rem !important;
  font-style: italic !important;
  color: #555;
}

.trumbowyg-editor.trumbowyg-reset-css ul,
.trumbowyg-editor.trumbowyg-reset-css ol {
  padding-left: 20px !important;
}

.trumbowyg-editor.trumbowyg-reset-css ul ul,
.trumbowyg-editor.trumbowyg-reset-css ol ol,
.trumbowyg-editor.trumbowyg-reset-css ul ol,
.trumbowyg-editor.trumbowyg-reset-css ol ul {
  border: none;
  margin: 2px !important;
  padding: 0 !important;
  padding-left: 24px !important;
}

.trumbowyg-editor.trumbowyg-reset-css hr {
  display: block;
  height: 1px;
  border: none;
  border-top: 1px solid #CCC;
}

.trumbowyg-editor.trumbowyg-reset-css h1,
.trumbowyg-editor.trumbowyg-reset-css h2,
.trumbowyg-editor.trumbowyg-reset-css h3,
.trumbowyg-editor.trumbowyg-reset-css h4 {
  color: #111;
  background: none;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: bold;
}

.trumbowyg-editor.trumbowyg-reset-css h1 {
  font-size: 32px !important;
  line-height: 38px !important;
  margin-bottom: 20px !important;
}

.trumbowyg-editor.trumbowyg-reset-css h2 {
  font-size: 26px !important;
  line-height: 34px !important;
  margin-bottom: 15px !important;
}

.trumbowyg-editor.trumbowyg-reset-css h3 {
  font-size: 22px !important;
  line-height: 28px !important;
  margin-bottom: 7px !important;
}

.trumbowyg-editor.trumbowyg-reset-css h4 {
  font-size: 16px !important;
  line-height: 22px !important;
  margin-bottom: 7px !important;
}
/*
 * Black theme
 */

.trumbowyg-black .trumbowyg-button-pane {
  background-color: #222;
  border-bottom-color: #343434;
}

.trumbowyg-black .trumbowyg-button-pane li.trumbowyg-separator {
  background-color: #343434;
}

.trumbowyg-black .trumbowyg-button-pane.trumbowyg-disable li.trumbowyg-separator {
  background-color: #2a2a2a;
}

.trumbowyg-black .trumbowyg-button-pane:not(.trumbowyg-disable) li button:hover,
.trumbowyg-black .trumbowyg-button-pane:not(.trumbowyg-disable) li button:focus,
.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-active,
.trumbowyg-black .trumbowyg-button-pane li.trumbowyg-not-disable button:hover,
.trumbowyg-black .trumbowyg-button-pane li.trumbowyg-not-disable button:focus {
  background-color: #555;
}

.trumbowyg-black .trumbowyg-button-pane li .trumbowyg-open-dropdown:after {
  border-top-color: #fff;
}

.trumbowyg-black .trumbowyg-dropdown {
  border-color: #222;
  background: #222;
}

.trumbowyg-black .trumbowyg-dropdown button {
  background: #222;
  color: #fff;
}

.trumbowyg-black .trumbowyg-dropdown button:hover,
.trumbowyg-black .trumbowyg-dropdown button:focus {
  background: #555;
}

.trumbowyg-black .trumbowyg-modal-box {
  background-color: #222;
}

.trumbowyg-black .trumbowyg-modal-box .trumbowyg-modal-title {
  border-bottom: 1px solid #555;
  color: #fff;
  background: #3c3c3c;
}

.trumbowyg-black .trumbowyg-modal-box label {
  display: block;
  position: relative;
  margin: 15px 12px;
  height: 27px;
  line-height: 27px;
  overflow: hidden;
}

.trumbowyg-black .trumbowyg-modal-box label .trumbowyg-input-infos span {
  color: #eee;
  background-color: #2f2f2f;
  border-color: #222;
}

.trumbowyg-black .trumbowyg-modal-box label .trumbowyg-input-infos span.trumbowyg-msg-error {
  color: #e74c3c;
}

.trumbowyg-black .trumbowyg-modal-box label.trumbowyg-input-error input,
.trumbowyg-black .trumbowyg-modal-box label.trumbowyg-input-error textarea {
  border-color: #e74c3c;
}

.trumbowyg-black .trumbowyg-modal-box label input {
  border-color: #222;
  color: #eee;
  background: #333;
}

.trumbowyg-black .trumbowyg-modal-box label input:hover,
.trumbowyg-black .trumbowyg-modal-box label input:focus {
  border-color: #95a5a6;
}

.trumbowyg-black .trumbowyg-modal-box label input:focus {
  background-color: rgba(230, 230, 255, 0.1);
}

.trumbowyg-black .trumbowyg-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}
/*
 * Buttons icons
 */

.trumbowyg-button-pane li button {
  display: block;
  position: relative;
  background-color:#fff;
  margin:1px;
  text-indent: -9999px;
  width: 35px;
  height: 35px;
  overflow: hidden;
  border: none;
  cursor: pointer;
  -webkit-transition: background-color 0.15s, background-image 0.15s, opacity 0.15s;
  transition: background-color 0.15s, background-image 0.15s, opacity 0.15s;
  /* English and others */
  
  &:before {
    position: absolute;
    text-indent: 0;
    font-family: 'FontAwesome';
    font-size:1.25rem;
    top: 0.5rem;
    left: 0.5rem;
    color:#000;
  }
}

.trumbowyg-button-pane li button.trumbowyg-viewHTML-button {
  
  &:before {
  
  content: "\f121"; //code
  }
}

.trumbowyg-button-pane li button.trumbowyg-formatting-button {
 &:before {
  content: "\f034"; //text-height
  }
}

.trumbowyg-button-pane li button.trumbowyg-bold-button,
.trumbowyg-button-pane li button.trumbowyg-strong-button {
  &:before {
  
  content: "\f032"; //bold
  }
}

.trumbowyg-button-pane li button.trumbowyg-italic-button,
.trumbowyg-button-pane li button.trumbowyg-em-button {
  &:before {
  content: "\f033"; //italic
  }
}

.trumbowyg-button-pane li button.trumbowyg-underline-button {
   &:before {
    content: "\f0cd"; //underline
    }
}

.trumbowyg-button-pane li button.trumbowyg-strikethrough-button,
.trumbowyg-button-pane li button.trumbowyg-del-button {
  &:before {
    content: "\f0cc"; //underline
    }
}

.trumbowyg-button-pane li button.trumbowyg-link-button {
  &:before {
 
  content: "\f0c1"; //link
  }
}

.trumbowyg-button-pane li button.trumbowyg-insertImage-button {
  &:before {
    content: "\f03e"; //picture
  }
}

.trumbowyg-button-pane li button.trumbowyg-justifyLeft-button {
  &:before {
    content: "\f036"; //align left
  }
}

.trumbowyg-button-pane li button.trumbowyg-justifyCenter-button {
  &:before {
    content: "\f037"; //align center
  }
}

.trumbowyg-button-pane li button.trumbowyg-justifyRight-button {
  &:before {
    content: "\f038"; //align right
  }
}

.trumbowyg-button-pane li button.trumbowyg-justifyFull-button {
  &:before {
    content: "\f039"; //justify full
  }
}

.trumbowyg-button-pane li button.trumbowyg-unorderedList-button {
  &:before {
    content: "\f0ca"; //list ul
  }
}

.trumbowyg-button-pane li button.trumbowyg-orderedList-button {
  &:before {
    content: "\f0cb"; //list ol
  }
}

.trumbowyg-button-pane li button.trumbowyg-horizontalRule-button {
  &:before {
    content: "\f068"; //picture
  }
}

.trumbowyg-button-pane li button.trumbowyg-removeformat-button {
  &:before {
    content: "\f057"; //times circle
  }
}

.trumbowyg-button-pane li button.trumbowyg-fullscreen-button {
  &:before {
    content: "\f065"; //expand
  }
}

.trumbowyg-button-pane li button.trumbowyg-close-button {
  &:before {
    content: "\f00d"; //times
  }
}

.trumbowyg-fullscreen .trumbowyg-button-pane li button.trumbowyg-fullscreen-button {
  &:before {
    content: "\f066"; //picture
  }
}

.trumbowyg-button-pane li:first-child button {
  margin-left: 0.25rem;
}

.trumbowyg-button-pane li:last-child button {
  margin-right: 0rem;
}
/* French */

.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-bold-button,
.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-strong-button {
  background-position: 5px -195px;
}

.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-underline-button {
  background-position: 5px -445px;
}

.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-strikethrough-button,
.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-del-button {
  background-position: 5px -295px;
}

.trumbowyg-black {
  /* French */
}

.trumbowyg-black .trumbowyg-button-pane li button {
  background-image: url("https://github.com/Alex-D/Trumbowyg/blob/master/plugins/preformatted/ui/images/icons-white/preformatted.png");
  /* English and others */
}

.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-viewHTML-button {
  background-position: 5px -570px;
}

.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-formatting-button {
  background-position: 5px -120px;
}

.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-bold-button,
.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-strong-button {
  background-position: 5px -45px;
}

.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-italic-button,
.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-em-button {
  background-position: 5px -270px;
}

.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-underline-button {
  background-position: 5px -495px;
}

.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-strikethrough-button,
.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-del-button {
  background-position: 5px -470px;
}

.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-link-button {
  background-position: 5px -345px;
}

.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-insertImage-button {
  background-position: 5px -245px;
}

.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-justifyLeft-button {
  background-position: 5px -320px;
}

.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-justifyCenter-button {
  background-position: 5px -70px;
}

.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-justifyRight-button {
  background-position: 5px -420px;
}

.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-justifyFull-button {
  background-position: 5px 5px;
}

.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-unorderedList-button {
  background-position: 5px -520px;
}

.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-orderedList-button {
  background-position: 5px -370px;
}

.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-horizontalRule-button {
  background-position: 5px -220px;
}

.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-removeformat-button {
  background-position: 5px -395px;
}

.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-fullscreen-button {
  background-position: 5px -170px;
}

.trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-close-button {
  background-position: 5px -95px;
}

.trumbowyg-black .trumbowyg-fullscreen .trumbowyg-button-pane li button.trumbowyg-fullscreen-button {
  background-position: 5px -145px;
}

.trumbowyg-black .trumbowyg-button-pane li:first-child button {
  margin-left: 6px;
}

.trumbowyg-black .trumbowyg-button-pane li:last-child button {
  margin-right: 6px;
}

.trumbowyg-black .trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-bold-button,
.trumbowyg-black .trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-strong-button {
  background-position: 5px -195px;
}

.trumbowyg-black .trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-underline-button {
  background-position: 5px -445px;
}

.trumbowyg-black .trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-strikethrough-button,
.trumbowyg-black .trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-del-button {
  background-position: 5px -295px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (min--moz-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 4/3),
only screen and (min-device-pixel-ratio: 1.3),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
  /* French */
  /* Black theme */
  
  .trumbowyg-button-pane li button {
    
    /* English and others */
  }
  .trumbowyg-button-pane li button.trumbowyg-viewHTML-button {
    background-position: 5px -570px;
  }
  .trumbowyg-button-pane li button.trumbowyg-formatting-button {
    background-position: 5px -120px;
  }
  .trumbowyg-button-pane li button.trumbowyg-bold-button,
  .trumbowyg-button-pane li button.trumbowyg-strong-button {
    background-position: 5px -45px;
  }
  .trumbowyg-button-pane li button.trumbowyg-italic-button,
  .trumbowyg-button-pane li button.trumbowyg-em-button {
    background-position: 5px -270px;
  }
  .trumbowyg-button-pane li button.trumbowyg-underline-button {
    background-position: 5px -495px;
  }
  .trumbowyg-button-pane li button.trumbowyg-strikethrough-button,
  .trumbowyg-button-pane li button.trumbowyg-del-button {
    background-position: 5px -470px;
  }
  .trumbowyg-button-pane li button.trumbowyg-link-button {
    background-position: 5px -345px;
  }
  .trumbowyg-button-pane li button.trumbowyg-insertImage-button {
    background-position: 5px -245px;
  }
  .trumbowyg-button-pane li button.trumbowyg-justifyLeft-button {
    background-position: 5px -320px;
  }
  .trumbowyg-button-pane li button.trumbowyg-justifyCenter-button {
    background-position: 5px -70px;
  }
  .trumbowyg-button-pane li button.trumbowyg-justifyRight-button {
    background-position: 5px -420px;
  }
  .trumbowyg-button-pane li button.trumbowyg-justifyFull-button {
    background-position: 5px 5px;
  }
  .trumbowyg-button-pane li button.trumbowyg-unorderedList-button {
    background-position: 5px -520px;
  }
  .trumbowyg-button-pane li button.trumbowyg-orderedList-button {
    background-position: 5px -370px;
  }
  .trumbowyg-button-pane li button.trumbowyg-horizontalRule-button {
    background-position: 5px -220px;
  }
  .trumbowyg-button-pane li button.trumbowyg-removeformat-button {
    background-position: 5px -395px;
  }
  .trumbowyg-button-pane li button.trumbowyg-fullscreen-button {
    background-position: 5px -170px;
  }
  .trumbowyg-button-pane li button.trumbowyg-close-button {
    background-position: 5px -95px;
  }
  .trumbowyg-fullscreen .trumbowyg-button-pane li a.trumbowyg-fullscreen-button {
    background-position: 5px -145px;
  }
  .trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-bold-button,
  .trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-strong-button {
    background-position: 5px -195px;
  }
  .trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-underline-button {
    background-position: 5px -445px;
  }
  .trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-strikethrough-button,
  .trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-del-button {
    background-position: 5px -295px;
  }
  .trumbowyg-black {
    /* French */
  }
  .trumbowyg-black .trumbowyg-button-pane li button {
    -webkit-background-size: 25px 600px !important;
    background-size: 25px 600px !important;
    background-image: url("https://github.com/Alex-D/Trumbowyg/blob/master/plugins/preformatted/ui/images/icons-white-2x/preformatted.png") !important;
    /* English and others */
  }
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-viewHTML-button {
    background-position: 5px -570px;
  }
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-formatting-button {
    background-position: 5px -120px;
  }
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-bold-button,
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-strong-button {
    background-position: 5px -45px;
  }
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-italic-button,
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-em-button {
    background-position: 5px -270px;
  }
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-underline-button {
    background-position: 5px -495px;
  }
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-strikethrough-button,
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-del-button {
    background-position: 5px -470px;
  }
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-link-button {
    background-position: 5px -345px;
  }
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-insertImage-button {
    background-position: 5px -245px;
  }
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-justifyLeft-button {
    background-position: 5px -320px;
  }
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-justifyCenter-button {
    background-position: 5px -70px;
  }
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-justifyRight-button {
    background-position: 5px -420px;
  }
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-justifyFull-button {
    background-position: 5px 5px;
  }
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-unorderedList-button {
    background-position: 5px -520px;
  }
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-orderedList-button {
    background-position: 5px -370px;
  }
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-horizontalRule-button {
    background-position: 5px -220px;
  }
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-removeformat-button {
    background-position: 5px -395px;
  }
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-fullscreen-button {
    background-position: 5px -170px;
  }
  .trumbowyg-black .trumbowyg-button-pane li button.trumbowyg-close-button {
    background-position: 5px -95px;
  }
  .trumbowyg-black .trumbowyg-fullscreen .trumbowyg-button-pane li a.trumbowyg-fullscreen-button {
    background-position: 5px -145px;
  }
  .trumbowyg-black .trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-bold-button,
  .trumbowyg-black .trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-strong-button {
    background-position: 5px -195px;
  }
  .trumbowyg-black .trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-underline-button {
    background-position: 5px -445px;
  }
  .trumbowyg-black .trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-strikethrough-button,
  .trumbowyg-black .trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-del-button {
    background-position: 5px -295px;
  }
}
              
            
!

JS

              
                /**
 * Trumbowyg v1.1.7 - A lightweight WYSIWYG editor
 * Trumbowyg core file
 * ------------------------
 * @link https://alex-d.github.io/Trumbowyg
 * @license MIT
 * @author Alexandre Demode (Alex-D)
 *         Twitter : @AlexandreDemode
 *         Website : alex-d.fr
 */

jQuery.trumbowyg = {
    langs: {
        en: {
            viewHTML:       "View HTML",

            formatting:     "Formatting",
            p:              "Paragraph",
            blockquote:     "Quote",
            code:           "Code",
            header:         "Header",

            bold:           "Bold",
            italic:         "Italic",
            strikethrough:  "Stroke",
            underline:      "Underline",

            strong:         "Strong",
            em:             "Emphasis",
            del:            "Deleted",

            unorderedList:  "Unordered list",
            orderedList:    "Ordered list",

            insertImage:    "Insert Image",
            insertVideo:    "Insert Video",
            link:           "Link",
            createLink:     "Insert link",
            unlink:         "Remove link",

            justifyLeft:    "Align Left",
            justifyCenter:  "Align Center",
            justifyRight:   "Align Right",
            justifyFull:    "Align Justify",

            horizontalRule: "Insert horizontal rule",
            removeformat:   "Remove format",

            fullscreen:     "fullscreen",

            close:          "Close",

            submit:         "Confirm",
            reset:          "Cancel",

            required:       "Required",
            description:    "Description",
            title:          "Title",
            text:           "Text"
        }
    },

    // User default options
    opts: {},

    btnsGrps: {
        design:     ['bold', 'italic', 'underline', 'strikethrough'],
        semantic:   ['strong', 'em', 'del'],
        justify:    ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
        lists:      ['unorderedList', 'orderedList']
    }
};



(function(navigator, window, document, $, undefined){
    'use strict';

    // @param : o are options
    // @param : p are params
    $.fn.trumbowyg = function(o, p){
        if(o === Object(o) || !o){
            return this.each(function(){
                if(!$(this).data('trumbowyg'))
                    $(this).data('trumbowyg', new Trumbowyg(this, o));
            });
        }
        if(this.length === 1){
            try {
                var t = $(this).data('trumbowyg');
                switch(o){
                    // Modal box
                    case 'openModal':
                        return t.openModal(p.title, p.content);
                    case 'closeModal':
                        return t.closeModal();
                    case 'openModalInsert':
                        return t.openModalInsert(p.title, p.fields, p.callback);

                    // Selection
                    case 'saveSelection':
                        return t.saveSelection();
                    case 'getSelection':
                        return t.selection;
                    case 'getSelectedText':
                        return t.getSelectedText();
                    case 'restoreSelection':
                        return t.restoreSelection();

                    // Destroy
                    case 'destroy':
                        return t.destroy();

                    // Empty
                    case 'empty':
                        return t.empty();

                    // Public options
                    case 'lang':
                        return t.lang;

                    // HTML
                    case 'html':
                        return t.html(p);
                }
            } catch(e){}
        }

        return false;
    };

    // @param : editorElem is the DOM element
    // @param : o are options
    var Trumbowyg = function(editorElem, o){
        var t = this;
        // Get the document of the element. It use to makes the plugin
        // compatible on iframes.
        t.doc = editorElem.ownerDocument || document;
        // jQuery object of the editor
        t.$ta = $(editorElem); // $ta : Textarea
        t.$c = $(editorElem); // $c : creator

        // Extend with options
        o = $.extend(true, {}, o, $.trumbowyg.opts);

        // Localization management
        if(typeof o.lang === 'undefined' || typeof $.trumbowyg.langs[o.lang] === 'undefined')
            t.lang = $.trumbowyg.langs.en;
        else
            t.lang = $.extend(true, {}, $.trumbowyg.langs.en, $.trumbowyg.langs[o.lang]);

        // Header translation
        var h = t.lang.header;

        // Defaults Options
        t.o = $.extend(true, {}, {
            lang: 'en',
            dir: 'ltr',

            closable: false,
            fullscreenable: true,
            fixedBtnPane: false,
            fixedFullWidth: false,
            autogrow: false,

            prefix: 'trumbowyg-',

            // WYSIWYG only
            semantic: true,
            resetCss: false,
            removeformatPasted: false,

            btns: [
                'viewHTML',
                '|', 'formatting',
                '|', 'btnGrp-design',
                '|', 'link',
                '|', 'insertImage',
                '|', 'btnGrp-justify',
                '|', 'btnGrp-lists',
                '|', 'horizontalRule',
                '|', 'removeformat'
            ],
            btnsAdd: [],

            /**
             * When the button is associated to a empty object
             * func and title attributs are defined from the button key value
             *
             * For example
             *      foo: {}
             * is equivalent to :
             *      foo: {
             *          func: 'foo',
             *          title: this.lang.foo
             *      }
             */
            btnsDef: {
                viewHTML: {
                    func: 'toggle'
                },

                p: {
                    func: 'formatBlock'
                },
                blockquote: {
                    func: 'formatBlock'
                },
                h1: {
                    func: 'formatBlock',
                    title: h + ' 1'
                },
                h2: {
                    func: 'formatBlock',
                    title: h + ' 2'
                },
                h3: {
                    func: 'formatBlock',
                    title: h + ' 3'
                },
                h4: {
                    func: 'formatBlock',
                    title: h + ' 4'
                },

                bold: {
                    key: 'B'
                },
                italic: {
                    key: 'I'
                },
                underline: {},
                strikethrough: {},

                strong: {
                    func: 'bold',
                    key: 'B'
                },
                em: {
                    func: 'italic',
                    key: 'I'
                },
                del: {
                    func: 'strikethrough'
                },

                createLink: {
                    key: 'K'
                },
                unlink: {},

                insertImage: {},

                justifyLeft: {},
                justifyCenter: {},
                justifyRight: {},
                justifyFull: {},

                unorderedList: {
                    func: 'insertUnorderedList'
                },
                orderedList: {
                    func: 'insertOrderedList'
                },

                horizontalRule: {
                    func: 'insertHorizontalRule'
                },

                removeformat: {},

                // Dropdowns
                formatting: {
                    dropdown: ['p', 'blockquote', 'h1', 'h2', 'h3', 'h4']
                },
                link: {
                    dropdown: ['createLink', 'unlink']
                }
            }
        }, o);

        if(t.o.semantic && !o.btns)
            t.o.btns[4] = 'btnGrp-semantic';

        // Keyboard shortcuts are load in this array
        t.keys = [];

        t.init();
    };

    Trumbowyg.prototype = {
        init: function(){
            var t = this;
            t.height = t.$ta.height();

            t.buildEditor();
            t.buildBtnPane();

            t.fixedBtnPaneEvents();

            t.buildOverlay();
        },

        buildEditor: function(){
            var t = this,
                prefix = t.o.prefix,
                html = '';

            t.$box = $('<div/>', {
                'class': prefix + 'box ' + prefix + 'editor-visible ' + prefix + t.o.lang + ' trumbowyg'
            });

            // $ta = Textarea
            // $ed = Editor
            t.isTextarea = true;
            if(t.$ta.is('textarea'))
                t.$ed = $('<div/>');
            else {
                t.$ed = t.$ta;
                t.$ta = t.buildTextarea().val(t.$ta.val());
                t.isTextarea = false;
            }

            if(t.$c.is('[placeholder]'))
                t.$ed.attr('placeholder', t.$c.attr('placeholder'));

            t.$ta.addClass(prefix + 'textarea');


            if(t.isTextarea){
                html = t.$ta.val();
                t.$box.insertAfter(t.$ta)
                         .append(t.$ed)
                         .append(t.$ta);
            } else {
                html = t.$ed.html();
                t.$box.insertAfter(t.$ed)
                         .append(t.$ta)
                         .append(t.$ed);
                t.syncCode();
            }

            t.$ed.addClass(prefix + 'editor')
                        .attr('contenteditable', true)
                        .attr('dir', t.lang._dir || t.o.dir)
                        .html(html);

            if(t.o.resetCss)
                t.$ed.addClass(prefix + 'reset-css');

            if(!t.o.autogrow)
                $.each([t.$ta, t.$ed], function(i, $el){
                    $el.css({
                        height: t.height,
                        overflow: 'auto'
                    });
                });

            if(t.o.semantic){
                t.$ed.html(
                    t.$ed.html()
                        .replace('<br>', '</p><p>')
                        .replace('&nbsp;', ' ')
                );
                t.semanticCode();
            }


            t._ctrl = false;
            t.$ed
            .on('dblclick', 'img', function(){
                var $img = $(this);
                t.openModalInsert(t.lang.insertImage, {
                    url: {
                        label: 'URL',
                        value: $img.attr('src'),
                        required: true
                    },
                    alt: {
                        label: 'description',
                        value: $img.attr('alt')
                    }
                }, function(v){
                    return $img.attr({
                        src: v.url,
                        alt: v.alt
                    });
                });
                return false;
            })
            .on('keydown', function(e){
                if(e.ctrlKey){
                    t._ctrl = true;
                    var k = t.keys[String.fromCharCode(e.which).toUpperCase()];

                    try {
                        t.execCmd(k.func, k.param);
                        return false;
                    } catch(e){}
                }
            })
            .on('keyup', function(e){
                if(!t._ctrl && e.which !== 17){
                    t.semanticCode(false, e.which === 13);
                    t.$c.trigger('tbwchange');
                }

                setTimeout(function(){
                    t._ctrl = false;
                }, 200);
            })
            .on('focus', function(){
                t.$c.trigger('tbwfocus');
            })
            .on('blur', function(){
                t.syncCode();
                t.$c.trigger('tbwblur');
            })
            .on('paste', function(e){
                t.$c.trigger('tbwpaste', e);

                if(t.o.removeformatPasted){
                    e.preventDefault();

                    try {
                        // IE
                        var text = window.clipboardData.getData("Text");

                        try {
                            // <= IE10
                            t.doc.selection.createRange().pasteHTML(text);
                        } catch(err){
                            // IE 11
                            t.doc.getSelection().getRangeAt(0).insertNode(document.createTextNode(text));
                        }
                    } catch(err) {
                        // Not IE
                        t.execCmd('insertText', (e.originalEvent || e).clipboardData.getData('text/plain'));
                    }
                }
            });

            $(t.doc).on('keydown', function(e){
                if(e.which === 27){
                    t.closeModal();
                    return false;
                }
            });
        },


        // Build the Textarea which contain HTML generated code
        buildTextarea: function(){
            return $('<textarea/>', {
                name: this.$ta.attr('id'),
                height: this.height
            });
        },


        // Build button pane, use o.btns and o.btnsAdd options
        buildBtnPane: function(){
            var t = this,
                prefix = t.o.prefix;

            if(t.o.btns === false)
                return;

            t.$btnPane = $('<ul/>', {
                'class': prefix + 'button-pane'
            });

            $.each(t.o.btns.concat(t.o.btnsAdd), function(i, btn){
                // Managment of group of buttons
                try {
                    var b = btn.split('btnGrp-');
                    if(b[1] !== undefined)
                        btn = $.trumbowyg.btnsGrps[b[1]];
                } catch(e){}

                if(!$.isArray(btn))
                    btn = [btn];

                $.each(btn, function(i, b){
                    try { // Prevent buildBtn error
                        var $li = $('<li/>');

                        if(b === '|') // It's a separator
                            $li.addClass(prefix + 'separator');
                        else if(t.isSupportedBtn(b)) // It's a supported button
                            $li.append(t.buildBtn(b));

                        t.$btnPane.append($li);
                    } catch(e){}
                });
            });

            // Build right li for fullscreen and close buttons
            var $liRight = $('<li/>', {
                'class': prefix + 'not-disable ' + prefix + 'buttons-right'
            });

            // Add the fullscreen button
            if(t.o.fullscreenable)
                $liRight.append(
                    t.buildRightBtn('fullscreen')
                    .on('click', function(){
                        var cssClass = prefix + 'fullscreen';
                        t.$box.toggleClass(cssClass);

                        if(t.$box.hasClass(cssClass)){
                            $('body').addClass(prefix + 'body-fullscreen');
                            $.each([t.$ta, t.$ed], function(){
                                $(this).css({
                                    height: 'calc(100% - 35px)',
                                    overflow: 'auto'
                                });
                            });
                            t.$btnPane.css('width', '100%');
                        } else {
                            $('body').removeClass(prefix + 'body-fullscreen');
                            t.$box.removeAttr('style');
                            if(!t.o.autogrow)
                                $.each([t.$ta, t.$ed], function(){
                                    $(this).css('height', t.height);
                                });
                        }
                        $(window).trigger('scroll');
                    })
                );

            // Build and add close button
            if(t.o.closable)
                $liRight
                    .append(
                        t.buildRightBtn('close')
                        .on('click', function(){
                            if(t.$box.hasClass(prefix + 'fullscreen'))
                                $('body').css('overflow', 'auto');
                            t.destroy();
                            t.$c.trigger('tbwclose');
                        })
                    );


            // Add right li only if isn't empty
            if($liRight.not(':empty'))
                t.$btnPane.append($liRight);

            t.$box.prepend(t.$btnPane);
        },


        // Build a button and his action
        buildBtn: function(n){ // n is name of the button
            var t = this,
                prefix = t.o.prefix,
                btn = t.o.btnsDef[n],
                d = btn.dropdown,
                textDef = t.lang[n] || n,

                $btn = $('<button/>', {
                    type: 'button',
                    'class': prefix + n +'-button' + (btn.ico ? ' '+ prefix + btn.ico +'-button' : ''),
                    text: btn.text || btn.title || textDef,
                    title: btn.title || btn.text || textDef + ((btn.key) ? ' (Ctrl + ' + btn.key + ')' : ''),
                    mousedown: function(){
                        if(!d || $('.'+n+'-'+prefix + 'dropdown', t.$box).is(':hidden'))
                            $('body', t.doc).trigger('mousedown');

                        if(t.$btnPane.hasClass(prefix + 'disable') && !$(this).hasClass(prefix + 'active') && !$(this).parent().hasClass(prefix + 'not-disable'))
                            return false;

                        t.execCmd((d ? 'dropdown' : false) || btn.func || n,
                                  btn.param || n);

                        return false;
                    }
                });

            if(d){
                $btn.addClass(prefix + 'open-dropdown');
                var c = prefix + 'dropdown',
                    dd = $('<div/>', { // the dropdown
                        'class': n + '-' + c + ' ' + c + ' ' + prefix + 'fixed-top'
                    });
                $.each(d, function(i, def){
                    if(t.o.btnsDef[def] && t.isSupportedBtn(def))
                        dd.append(t.buildSubBtn(def));
                });
                t.$box.append(dd.hide());
            } else if(btn.key){
                t.keys[btn.key] = {
                    func: btn.func || n,
                    param: btn.param || n
                };
            }

            return $btn;
        },
        // Build a button for dropdown menu
        // @param n : name of the subbutton
        buildSubBtn: function(n){
            var t = this,
                b = t.o.btnsDef[n];

            if(b.key)
                t.keys[b.key] = {
                    func: b.func || n,
                    param: b.param || n
                };

            return $('<button/>', {
                type: 'button',
                'class': t.o.prefix + n +'-dropdown-button' + (b.ico ? ' '+ t.o.prefix + b.ico +'-button' : ''),
                text: b.text || b.title || t.lang[n] || n,
                title: ((b.key) ? ' (Ctrl + ' + b.key + ')' : null),
                style: b.style || null,
                mousedown: function(){
                    $('body', t.doc).trigger('mousedown');

                    t.execCmd(b.func || n,
                              b.param || n);

                    return false;
                }
            });
        },
        // Build a button for right li
        // @param n : name of the right button
        buildRightBtn: function(n){
            var l = this.lang[n];
            return $('<button/>', {
                type: 'button',
                'class': this.o.prefix + n + '-button',
                title: l,
                text: l
            });
        },
        // Check if button is supported
        isSupportedBtn: function(b){
            try {
                return this.o.btnsDef[b].isSupported();
            } catch(e){}
            return true;
        },

        // Build overlay for modal box
        buildOverlay: function(){
            var t = this;
            t.$overlay = $('<div/>', {
                'class': t.o.prefix + 'overlay'
            }).css({
                top: t.$btnPane.outerHeight(),
                height: (t.$ed.outerHeight() + 1) + 'px'
            }).appendTo(t.$box);
            return t.$overlay;
        },
        showOverlay: function(){
            var t = this;
            $(window).trigger('scroll');
            t.$overlay.fadeIn(200);
            t.$box.addClass(t.o.prefix + 'box-blur');
        },
        hideOverlay: function(){
            var t = this;
            t.$overlay.fadeOut(50);
            t.$box.removeClass(t.o.prefix + 'box-blur');
        },

        // Management of fixed button pane
        fixedBtnPaneEvents: function(){
            var t = this,
                fixedFullWidth = t.o.fixedFullWidth,
                box = t.$box;
            if(!t.o.fixedBtnPane)
                return;

            t.isFixed = false;

            $(window)
            .on('scroll resize', function(){
                if(!box)
                    return;

                t.syncCode();

                var scrollTop = $(window).scrollTop(),
                    offset = box.offset().top + 1,
                    bp = t.$btnPane,
                    oh = bp.outerHeight();

                if((scrollTop - offset > 0) && ((scrollTop - offset - t.height) < 0)){
                    if(!t.isFixed){
                        t.isFixed = true;
                        bp.css({
                            position: 'fixed',
                            top: 0,
                            left: fixedFullWidth ? '0' : 'auto',
                            zIndex: 7
                        });
                        $([t.$ta, t.$ed]).css({ marginTop: bp.height() });
                    }
                    bp.css({
                        width: fixedFullWidth ? '100%' : ((box.width()-1) + 'px')
                    });

                    $('.' + t.o.prefix + 'fixed-top', box).css({
                        position: fixedFullWidth ? 'fixed' : 'absolute',
                        top: fixedFullWidth ? oh : oh + (scrollTop - offset) + 'px',
                        zIndex: 15
                    });
                } else if(t.isFixed) {
                    t.isFixed = false;
                    bp.removeAttr('style');
                    $([t.$ta, t.$ed]).css({ marginTop: 0 });
                    $('.' + t.o.prefix + 'fixed-top', box).css({
                        position: 'absolute',
                        top: oh
                    });
                }
            });
        },



        // Destroy the editor
        destroy: function(){
            var t = this,
                prefix = t.o.prefix,
                height = t.height,
                html = t.html();

            if(t.isTextarea)
                t.$box.after(
                    t.$ta.css({ height: height })
                        .val(html)
                        .removeClass(prefix + 'textarea')
                        .show()
                );
            else
                t.$box.after(
                    t.$ed
                        .css({ height: height })
                        .removeClass(prefix + 'editor')
                        .removeAttr('contenteditable')
                        .html(html)
                        .show()
                );

            t.$box.remove();
            t.$c.removeData('trumbowyg');
        },



        // Empty the editor
        empty: function(){
            this.$ta.val('');
            this.syncCode(true);
        },



        // Function call when click on viewHTML button
        toggle: function(){
            var t = this,
                prefix = t.o.prefix;
            t.semanticCode(false, true);
            t.$box.toggleClass(prefix + 'editor-hidden ' + prefix + 'editor-visible');
            t.$btnPane.toggleClass(prefix + 'disable');
            $('.'+prefix + 'viewHTML-button', t.$btnPane).toggleClass(prefix + 'active');
        },

        // Open dropdown when click on a button which open that
        dropdown: function(name){
            var t = this,
                d = t.doc,
                prefix = t.o.prefix,
                $dd = $('.'+name+'-'+prefix + 'dropdown', t.$box),
                $btn = $('.'+prefix+name+'-button', t.$btnPane);

            if($dd.is(':hidden')){
                var o = $btn.offset().left;
                $btn.addClass(prefix + 'active');

                $dd.css({
                    position: 'absolute',
                    top: t.$btnPane.outerHeight(),
                    left: (t.o.fixedFullWidth && t.isFixed) ? o+'px' : (o - t.$btnPane.offset().left)+'px'
                }).show();

                $(window).trigger('scroll');

                $('body', d).on('mousedown', function(){
                    $('.' + prefix + 'dropdown', d).hide();
                    $('.' + prefix + 'active', d).removeClass(prefix + 'active');
                    $('body', d).off('mousedown');
                });
            } else
                $('body', d).trigger('mousedown');
        },




        // HTML Code management
        html: function(html){
            var t = this;
            if(html){
                t.$ta.val(html);
                t.syncCode(true);
                return t;
            } else
                return t.$ta.val();
        },
        syncCode: function(force){
            var t = this;
            if(!force && t.$ed.is(':visible'))
                t.$ta.val(t.$ed.html());
            else
                t.$ed.html(t.$ta.val());

            if(t.o.autogrow){
                t.height = t.$ed.height();
                if(t.height != t.$ta.css('height')){
                    t.$ta.css({ height: t.height });
                    t.$c.trigger('tbwresize');
                }
            }
        },

        // Analyse and update to semantic code
        // @param force : force to sync code from textarea
        // @param full  : wrap text nodes in <p>
        semanticCode: function(force, full){
            var t = this;
            t.syncCode(force);

            if(t.o.semantic){
                t.saveSelection();

                t.semanticTag('b', 'strong');
                t.semanticTag('i', 'em');
                t.semanticTag('strike', 'del');

                if(full){
                    // Wrap text nodes in p
                    t.$ed.contents()
                    .filter(function(){
                        // Only non-empty text nodes
                        return this.nodeType === 3 && $.trim(this.nodeValue).length > 0;
                    }).wrap('<p></p>').end()

                    // Remove all br
                    .filter('br').remove();

                    t.semanticTag('div', 'p');
                }

                t.$ta.val(t.$ed.html());

                t.restoreSelection();
            }
        },
        semanticTag: function(oldTag, newTag){
            $(oldTag, this.$ed).each(function(){
                $(this).replaceWith(function(){
                    return '<'+newTag+'>' + $(this).html() + '</'+newTag+'>';
                });
            });
        },


        // Function call when user click on "Insert Link"
        createLink: function(){
            var t = this;
            t.saveSelection();
            t.openModalInsert(t.lang.createLink, {
                url: {
                    label: 'URL',
                    required: true
                },
                title: {
                    label: t.lang.title,
                    value: t.getSelectedText()
                },
                text: {
                    label: t.lang.text,
                    value: t.getSelectedText()
                }
            }, function(v){ // v is value
                t.execCmd('createLink', v.url);
                var l = $('a[href="'+v.url+'"]:not([title])', t.$box);
                if(v.text.length > 0)
                    l.text(v.text);

                if(v.title.length > 0)
                    l.attr('title', v.title);

                return true;
            });
        },
        insertImage: function(){
            var t = this;
            t.saveSelection();
            t.openModalInsert(t.lang.insertImage, {
                url: {
                    label: 'URL',
                    required: true
                },
                alt: {
                    label: t.lang.description,
                    value: t.getSelectedText()
                }
            }, function(v){ // v are values
                t.execCmd('insertImage', v.url);
                $('img[src="'+v.url+'"]:not([alt])', t.$box).attr('alt', v.alt);
                return true;
            });
        },


        /*
         * Call method of trumbowyg if exist
         * else try to call anonymous function
         * and finaly native execCommand
         */
        execCmd: function(cmd, param){
            var t = this;
            if(cmd != 'dropdown')
                t.$ed.focus();

            try {
                t[cmd](param);
            } catch(e){
                try {
                    cmd(param, t);
                } catch(e2){
                    if(cmd == 'insertHorizontalRule')
                        param = null;
                    else if(cmd == 'formatBlock' && (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0))
                        param = '<' + param + '>';

                    t.doc.execCommand(cmd, false, param);
                }
            }
            t.syncCode();
        },


        // Open a modal box
        openModal: function(title, content){
            var t = this,
                prefix = t.o.prefix;

            // No open a modal box when exist other modal box
            if($('.' + prefix + 'modal-box', t.$box).length > 0)
                return false;

            t.saveSelection();
            t.showOverlay();

            // Disable all btnPane btns
            t.$btnPane.addClass(prefix + 'disable');

            // Build out of ModalBox, it's the mask for animations
            var $modal = $('<div/>', {
                'class': prefix + 'modal ' + prefix + 'fixed-top'
            }).css({
                top: (t.$btnPane.height() + 1) + 'px'
            }).appendTo(t.$box);

            // Click on overflay close modal by cancelling them
            t.$overlay.one('click', function(){
                $modal.trigger(prefix + 'cancel');
                return false;
            });

            // Build the form
            var $form = $('<form/>', {
                action: '',
                html: content
            })
            .on('submit', function(){
                $modal.trigger(prefix + 'confirm');
                return false;
            })
            .on('reset', function(){
                $modal.trigger(prefix + 'cancel');
                return false;
            });


            // Build ModalBox and animate to show them
            var $box = $('<div/>', {
                'class': prefix + 'modal-box',
                html: $form
            })
            .css({
                top: '-' + t.$btnPane.outerHeight() + 'px',
                opacity: 0
            })
            .appendTo($modal)
            .animate({
                top: 0,
                opacity: 1
            }, 100);


            // Append title
            $('<span/>', {
                text: title,
                'class': prefix + 'modal-title'
            }).prependTo($box);


            // Focus in modal box
            $('input:first', $box).focus();


            // Append Confirm and Cancel buttons
            t.buildModalBtn('submit', $box);
            t.buildModalBtn('reset', $box);


            $(window).trigger('scroll');

            return $modal;
        },
        // @param n is name of modal
        buildModalBtn: function(n, $modal){
            var t = this,
                prefix = t.o.prefix;

            return $('<button/>', {
                'class': prefix + 'modal-button ' + prefix + 'modal-' + n,
                type: n,
                text: t.lang[n] || n
            }).appendTo($('form', $modal));
        },
        // close current modal box
        closeModal: function(){
            var t = this,
                prefix = t.o.prefix;

            t.$btnPane.removeClass(prefix + 'disable');
            t.$overlay.off();

            // Find the modal box
            var $mb = $('.' + prefix + 'modal-box', t.$box);

            $mb.animate({
                top: '-' + $mb.height()
            }, 100, function(){
                $mb.parent().remove();
                t.hideOverlay();
            });
            
            t.restoreSelection();
        },
        // Preformated build and management modal
        openModalInsert: function(title, fields, cmd){
            var t = this,
                prefix  = t.o.prefix,
                lg = t.lang,
                html = '';

            for(var f in fields){
                var fd = fields[f], // field definition
                    l = fd.label,
                    n = (fd.name) ? fd.name : f;

                html += '<label><input type="'+(fd.type || 'text')+'" name="'+n+'" value="'+(fd.value || '')+'"><span class="'+prefix+'input-infos"><span>'+
                            ((!l) ? (lg[f] ? lg[f] : f) : (lg[l] ? lg[l] : l))+
                            '</span></span></label>';
            }

            return t.openModal(title, html)
            .on(prefix + 'confirm', function(){
                var $form = $('form', $(this)),
                    valid = true,
                    v = {}; // values

                for(var f in fields){
                    var $field = $('input[name="'+f+'"]', $form);

                    v[f] = $.trim($field.val());

                    // Validate value
                    if(fields[f].required && v[f] === ''){
                        valid = false;
                        t.addErrorOnModalField($field, t.lang.required);
                    } else if(fields[f].pattern && !fields[f].pattern.test(v[f])){
                        valid = false;
                        t.addErrorOnModalField($field, fields[f].patternError);
                    }
                }

                if(valid){
                    t.restoreSelection();

                    if(cmd(v, fields)){
                        t.syncCode();
                        t.closeModal();
                        $(this).off(prefix + 'confirm');
                    }
                }
            })
            .one(prefix + 'cancel', function(){
                $(this).off(prefix + 'confirm');
                t.closeModal();
            });
        },
        addErrorOnModalField: function($field, err){
            var prefix = this.o.prefix,
                $label = $field.parent();

            $field
            .on('change keyup', function(){
                $label.removeClass(prefix + 'input-error');
            });

            $label
            .addClass(prefix + 'input-error')
            .find('input+span')
            .append(
                $('<span/>', {
                    'class': prefix +'msg-error',
                    text: err
                })
            );
        },




        // Selection management
        saveSelection: function(){
            var t = this,
                ds = t.doc.selection;

            t.selection = null;
            if(window.getSelection){
                var s = window.getSelection();
                if(s.getRangeAt && s.rangeCount)
                    t.selection = s.getRangeAt(0);
            } else if(ds && ds.createRange)
                t.selection = ds.createRange();
        },
        restoreSelection: function(){
            var t = this,
                range = t.selection;

            if(range){
                if(window.getSelection){
                    var s = window.getSelection();
                    s.removeAllRanges();
                    s.addRange(range);
                } else if(t.doc.selection && range.select)
                    range.select();
            }
        },
        getSelectedText: function(){
            var s = this.selection;
            return (s.text !== undefined) ? s.text : s+'';
        }
    };
})(navigator, window, document, jQuery);

$('.js--trumbowyg').trumbowyg();
              
            
!
999px

Console