Continue I Love Trumbowyg #1431

fabiodellpozzo · 2023-11-22T06:09:43Z

fabiodellpozzo
Nov 22, 2023

/** Trumbowyg v2.25.1 - A lightweight WYSIWYG editor - alex-d.github.io/Trumbowyg - License MIT - Author : Alexandre Demode (Alex-D) / alex-d.fr */

body{background-color:#f9fbfd;}

/*

.trumbowyg-editor,textarea[type="text"] {
outline-color: rgb(17, 0, 255);

outline-width: 0px;
outline-style: solid;



border-radius: 0px;
border-style: inset;
border-width: 0px;
box-shadow: none;
-webkit-focus-ring-color: 0px;

}
*/

#trumbowyg-icons{
overflow:hidden;
visibility:hidden;
}

#trumbowyg-icons,#trumbowyg-icons svg{
height:0;
width:0;
}

.trumbowyg-box svg,.trumbowyg-modal svg{
width:17px;
height:100%;
fill:#222;
}

.trumbowyg-editor,textarea[type="text"]:focus {
outline-color: #c4c7c5;
outline-width: 0px;
outline-style: solid;
border-radius: 0px;
border-style: inset;
box-shadow: none;
-webkit-focus-ring-color: 0px;
}

.trumbowyg-box *,
.trumbowyg-box ::after,
.trumbowyg-box ::before,
.trumbowyg-modal ,
.trumbowyg-modal ::after,
.trumbowyg-modal ::before{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
/ start acrescentei
altera a cor do panel e da linha de escrita no doc
*/

background: transparent;
margin-bottom: 0px;
padding-bottom: 0px;

}

.trumbowyg-box,.trumbowyg-editor{
/* define o background do corpo do doc */
display:block;

position:relative;


width:98%; /* altera a largura do back do doc */
min-height:auto; /* altera a altura do back do doc */

/* start acrescentei margin-top: 20px; */
margin-left: 15px;

margin-top: 115px;
padding-top: 95px;
padding-bottom: 16px;/* alterou o paddin em relação a area editavel ao back do doc */


/*
background:#f2f5fa;
cor background google docs F9FBFD
cor borda back google docs #c4c7c5
*/



/* end acrescentei */

/* 
   comentário
   borda no corpo background do documento
   move a distancia do topo do back e do corpo do doc

*/

}

.trumbowyg-box,.trumbowyg-textarea:hover,.trumbowyg-editor:hover{
border:1px solid #c4c7c5;/* altera a borda do editavel */

border-bottom:0px ;/* altera a borda do editavel */
border-right:0px ;/* altera a borda do editavel */
/* teste de fixação back do doc <------ */ 
/* position:fixed ; */
background:#f9fbfd;   /*
                            alterou a cor do back do doc 23:40 21/11/2023
                            e a cor do campo texto do doc. 
                        */
                  
}

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

/*acrescentei */
/* border-radius: 17px; (tira o border radio do edit doc */

width:63%;/* alterou a largura da area de escrita */

/* end acrescentei */
padding-top:0px;
margin-top:-70px;

background:#fff;
position:relative; 
min-height:1024px; /* altera a altura do back do doc */

border-bottom:1px solid #c4c7c5 ;/* altera a borda do editavel */
border-right:1px solid #c4c7c5 ;/* altera a borda do editavel */


/* 
   comentário
   borda no corpo do documento

*/

}

.trumbowyg-editor,.trumbowyg-textarea{

/* define a area editavel do doc */

/* position:relative; original) */

position:relative;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:5px;
min-height:600px;

width:100%;
overflow:auto;
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;

/* acrescentei */
position:static;
background:#fff;
border:1px solid #c4c7c5;/* altera a borda do editavel */
padding-left: 12px;
/* end acrescentei */

}

.trumbowyg-textarea{
/* position:relative; /
position:fixed; / mantem fixo a area back do doc */
display:block;
overflow:auto;
border:none;
font-size:14px;
font-family:Inconsolata,Consolas,Courier,"Courier New",sans-serif;
line-height:18px;

}

.trumbowyg-editor.trumbowyg-autogrow-on-enter,.trumbowyg-textarea.trumbowyg-autogrow-on-enter{
-webkit-transition:height .3s ease-out;
-o-transition:height .3s ease-out;
transition:height .3s ease-out;
}

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

}

.trumbowyg-editor[contenteditable=true]:empty:not(:focus)::before{
content:attr(placeholder);
color:#999;
pointer-events:none;
white-space:break-spaces;

    border:1px solid rgb(214, 216, 218);
    border-style: solid;

}

.trumbowyg-editor[contenteditable=true]:focus{
background:#fff;
}

@media screen and (min-width:0 \0){
.trumbowyg-box-blur .trumbowyg-editor *,
.trumbowyg-box-blur .trumbowyg-editor::before{
color:rgba(200,200,200,.6)!important;
}
}

@supports (-ms-accelerator:true){
.trumbowyg-box-blur .trumbowyg-editor *,
.trumbowyg-box-blur .trumbowyg-editor::before{
color:rgba(200,200,200,.6)!important;
}
}

.trumbowyg-box-blur .trumbowyg-editor hr,
.trumbowyg-box-blur .trumbowyg-editor img{
opacity:.2;
}

.trumbowyg-box.trumbowyg-editor-visible .trumbowyg-textarea{
height:1px!important;
width:25%;
min-height:0!important;
padding:0!important;
background:0 0;
opacity:0!important;

}

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

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

.trumbowyg-box.trumbowyg-disabled .trumbowyg-textarea{
opacity:.8;
background:0 0;
}

.trumbowyg-box.trumbowyg-fullscreen{
background:#FEFEFE;
border:none!important;
}

/* ---------------------- PANE ------------------------------------------------------ /
/ ---------------------- PANE ------------------------------------------------------ /
/ ---------------------- PANE ------------------------------------------------------ /
/ ---------------------- PANE ------------------------------------------------------ /
/ ---------------------- PANE ------------------------------------------------------ /
/ ---------------------- PANE ------------------------------------------------------ /
/ ---------------------- PANE ------------------------------------------------------ /
/ ---------------------- PANE ------------------------------------------------------ /
/ ---------------------- PANE ------------------------------------------------------ /
/ ---------------------- PANE ------------------------------------------------------ /
/ ---------------------- PANE ------------------------------------------------------ /
/ ---------------------- PANE ------------------------------------------------------ /
/ ---------------------- PANE ------------------------------------------------------ /
/ trumbowyg-button-pane */

.trumbowyg-button-pane{
/*
width:98%;
min-height:36px;
background:#edf2fa;
border-bottom:0px solid #F9FBFD;
margin:0;
padding:0 0px;
position:fixed;
list-style-type:none;
line-height:10px;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
z-index:1000;
margin-top: -148px;
border-radius: 25px;
/
width:98%; / altera a largura do pane */

/* min-height:36px; */
min-height:63px; /* altera a altura da barra azun back do panel */
background:#f9fbfd;
/*background:#edf2fa; (cor padrão) */





border-bottom:1px solid #c4c7c5;
margin-left:-1px;

padding:0 0px;
/* position:relative; (original) */
position:fixed;
list-style-type:none;
line-height:10px;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
z-index:1000;
/*acrescentei */
margin-top: -148px; /* alterei a altura do panel button */




/* teste pane */
/*background:#105ba7;*/  /* acrescentei mudou a cor do background do pane */

}

.trumbowyg-button-pane::after{

/* linha chata que virou o back base */
content:" ";
display:block;
position:absolute;

top:0px; /* move a linha chata do pane 21/11/2023 23:23 */

 /* altura tamanho linha chata 21/11/2023 23:23 */



width:100%;

background:#edf2fa;/* cor da linha chata do pane 21/11/2023 23:23 */
/*acrescentei */



z-index: -1;

padding-left: 12px;

/*acrescentei 2 */
border-radius: 50px;
min-height:41px;

}

.trumbowyg-button-pane .trumbowyg-button-group{
display:inline-block;
margin: 0px;
padding: 0px;
border-radius: 5px;
}

.trumbowyg-button-pane .trumbowyg-button-group .trumbowyg-fullscreen-button svg{
color:transparent;
border:0px;
}

.trumbowyg-button-pane .trumbowyg-button-group::after{

content:" ";
display:inline-block;

width:1px; /* alterou a largura dos separadores do pane */

/* background:#c7c7c7; /
background:#c7c7c7; / alterou a cor dos separadores do pane */

margin-left: 5px;

height:18px;
vertical-align:top;

/* editando a altura do buton pane */
margin-top: 13px;

}

.trumbowyg-button-pane .trumbowyg-button-group:last-child::after{
content:none;
border-radius: 5px;

}

.trumbowyg-button-pane button{
display:inline-block;
position:relative;
width:32px;
height:30px;

padding:1px 6px!important;

/* margin-bottom:1px; */
margin-bottom:5px;
padding-left:7px;
padding-left:7px;

margin-left:6px;

margin-top:6px;

overflow:hidden;
border:none;
cursor:pointer;
background:0 0;
vertical-align:middle;
-webkit-transition:background-color 150ms,opacity 150ms;
-o-transition:background-color 150ms,opacity 150ms;
transition:background-color 150ms,opacity 150ms;


background: #edf2fa;/* altera a cor do funfo do botao pane */
border-radius: 5px;

}

.trumbowyg-button-pane button.trumbowyg-textual-button{
width:auto;
line-height:35px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}

.trumbowyg-button-pane button.trumbowyg-disable,
.trumbowyg-button-pane.trumbowyg-disable button:not(.trumbowyg-not-disable):not(.trumbowyg-active),
.trumbowyg-disabled .trumbowyg-button-pane button:not(.trumbowyg-not-disable):not(.trumbowyg-viewHTML-button){
opacity:.2;
cursor:default;
pointer-events:none;
}

.trumbowyg-button-pane.trumbowyg-disable .trumbowyg-button-group::before,
.trumbowyg-disabled .trumbowyg-button-pane .trumbowyg-button-group::before{
background:#e3e9eb;
border:1px;
border-color: #F9FBFD;
}

.trumbowyg-button-pane button.trumbowyg-active,
.trumbowyg-button-pane button:not(.trumbowyg-disable):focus,
.trumbowyg-button-pane button:not(.trumbowyg-disable):hover{
padding: 2px;
outline:0;
}

.trumbowyg-button-pane .trumbowyg-open-dropdown::after{
display:block;
content:" ";
position:absolute;
top:15px;
right:2px;
height:2;
width:1;
margin-left: 122px;
border:4px solid transparent;/* altera os icones de dropdown */
border-top-color:#928e8e;

}

.trumbowyg-button-pane .trumbowyg-right{
float:right;
margin-right: 15px;
}

.trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button{
padding-left:10px!important;
padding-right:18px!important;

background:#edf2fa;

}

.trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button::after{
top:10px;
right:7px;
margin-left: 5px;
position:relative;
}

/* --------- DROPDOWN -------- /
/ --------- DROPDOWN -------- /
/ --------- DROPDOWN -------- /
/ --------- DROPDOWN -------- /
/ --------- DROPDOWN -------- /
/ --------- DROPDOWN -------- /
/ --------- DROPDOWN -------- /
/ --------- DROPDOWN -------- /
/ --------- DROPDOWN -------- /
/ --------- DROPDOWN -------- /
/ --------- DROPDOWN -------- /
/ --------- DROPDOWN -------- /
/ --------- DROPDOWN -------- /
/ --------- DROPDOWN -------- */

.trumbowyg-dropdown{
display: block;
max-width:400px;
max-height:350px;
overflow-y:auto;
overflow-x:hidden;
white-space:nowrap;
border:1px solid #rgb(18, 85, 102);
padding-top:-25px 0;
border-top:none;
margin-left:-1px;
margin-top:-25px;
line-height:52px;
-webkit-box-shadow:rgba(0,0,0,.1) 0 2px 3px;
box-shadow:rgba(0,0,0,.1) 0 2px 3px;
z-index:120;
background:#cbcecf;
position:fixed;
letter-spacing:.25px;line-height:16px;

display:inline-block;line-height:24px;vertical-align:middle

}

.trumbowyg-dropdown button{
display:block;
width:100%;
height:25px;
line-height:2px;
text-decoration:none;
padding:0 0px 0 0px;
color:#333!important;
border:none;
cursor:pointer;
text-align:left;
font-size:35px;
-webkit-transition:all 150ms;
-o-transition:all 150ms;
transition:all 150ms;
background:#cbcecf;
position:fixed;
letter-spacing:.25px;line-height:16px;

/*    background:#e78181; acrescentei 23:51 21/11/2023 */

}

.trumbowyg-dropdown button:focus,
.trumbowyg-dropdown button:hover{
background:#cbcecf;

}

.trumbowyg-dropdown button svg{
float:left;
margin-right:14px;
z-index:120;
position:relative;
background:#cbcecf;
}

/* -------------------- MODAL ---------------------------------------------------- /
/ -------------------- MODAL ---------------------------------------------------- /
/ -------------------- MODAL ---------------------------------------------------- /
/ -------------------- MODAL ---------------------------------------------------- /
/ -------------------- MODAL ---------------------------------------------------- /
/ -------------------- MODAL ---------------------------------------------------- /
/ -------------------- MODAL ---------------------------------------------------- /
/ -------------------- MODAL ---------------------------------------------------- /
/ -------------------- MODAL ---------------------------------------------------- /
/ -------------------- MODAL ---------------------------------------------------- */

.trumbowyg-modal{
position:absolute;
top:0;
left:50%;
-webkit-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-o-transform:translateX(-50%);
transform:translateX(-50%);
max-width:520px;
width:100%;
height:350px;
z-index:12;
overflow:hidden;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}

.trumbowyg-modal-box{
position:absolute;
top:0;
left:50%;
-webkit-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-o-transform:translateX(-50%);
transform:translateX(-50%);
max-width:500px;
width:calc(100% - 20px);
padding-bottom:45px;
z-index:1;
background-color:#FFF;
text-align:center;
font-size:14px;
-webkit-box-shadow:rgba(0,0,0,.2) 0 2px 3px;
box-shadow:rgba(0,0,0,.2) 0 2px 3px;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}

.trumbowyg-modal-box .trumbowyg-modal-title{
font-size:24px;
font-weight:700;
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%;
height:3px;
position:absolute;
top:58px;
}

.trumbowyg-modal-box .trumbowyg-progress .trumbowyg-progress-bar{
background:#2BC06A;
width:0;
height:100%;
-webkit-transition:width 150ms linear;
-o-transition:width 150ms linear;
transition:width 150ms linear;
}

.trumbowyg-modal-box .trumbowyg-input-row{
position:relative;
margin:15px 12px;
border:1px solid #DEDEDE;
overflow:hidden;
}

.trumbowyg-modal-box .trumbowyg-input-infos{
text-align:left;
-webkit-transition:all 150ms;
-o-transition:all 150ms;
transition:all 150ms;
width:150px;
border-right:1px solid #DEDEDE;
padding:0 7px;
background-color:#fbfcfc;
position:absolute;
left:0;
top:0;
bottom:0;
}

.trumbowyg-modal-box .trumbowyg-input-infos label{
color:#69878f;
overflow:hidden;
}

.trumbowyg-modal-box .trumbowyg-input-infos label,
.trumbowyg-modal-box .trumbowyg-input-infos label span{
display:block;
height:27px;
line-height:27px;
-webkit-transition:all 150ms;
-o-transition:all 150ms;
transition:all 150ms;
}

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

.trumbowyg-modal-box .trumbowyg-input-html{
padding:1px 1px 1px 152px;
}

.trumbowyg-modal-box .trumbowyg-input-html,
.trumbowyg-modal-box .trumbowyg-input-html input,
.trumbowyg-modal-box .trumbowyg-input-html select,
.trumbowyg-modal-box .trumbowyg-input-html textarea{
font-size:14px;
}

.trumbowyg-modal-box .trumbowyg-input-html input,
.trumbowyg-modal-box .trumbowyg-input-html select,
.trumbowyg-modal-box .trumbowyg-input-html textarea{
-webkit-transition:all 150ms;
-o-transition:all 150ms;
transition:all 150ms;
height:27px;
line-height:27px;
border:0;
width:100%;
padding:0 7px;
}

.trumbowyg-modal-box .trumbowyg-input-html input:focus,
.trumbowyg-modal-box .trumbowyg-input-html input:hover,
.trumbowyg-modal-box .trumbowyg-input-html select:focus,
.trumbowyg-modal-box .trumbowyg-input-html select:hover,
.trumbowyg-modal-box .trumbowyg-input-html textarea:focus,
.trumbowyg-modal-box .trumbowyg-input-html textarea:hover{
outline:#95a5a6 solid 1px;
}

.trumbowyg-modal-box .trumbowyg-input-html input:focus,
.trumbowyg-modal-box .trumbowyg-input-html select:focus,
.trumbowyg-modal-box .trumbowyg-input-html textarea:focus{
background:#fbfcfc;
}

.trumbowyg-modal-box .trumbowyg-input-html input[type=checkbox]{
width:16px;
height:16px;
padding:0;
}

.trumbowyg-modal-box .trumbowyg-input-html-with-checkbox{
text-align:left;
padding:3px 1px 1px 3px;
}

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

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

.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;
cursor:pointer;
font-family:"Trebuchet MS",Helvetica,Verdana,sans-serif;
font-size:16px;
-webkit-transition:all 150ms;
-o-transition:all 150ms;
transition:all 150ms;
}

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

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

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

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

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

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

.trumbowyg-overlay{
position:absolute;
background-color:rgba(255,255,255,.5);
height:100%;
width:100%;
left:0;
display:none;
top:0;
z-index:10;
}

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-editor,
.trumbowyg-fullscreen.trumbowyg-box{
border:none;
}

.trumbowyg-fullscreen .trumbowyg-editor,
.trumbowyg-fullscreen .trumbowyg-textarea{
height:calc(100% - 37px)!important;
overflow:auto;
}

.trumbowyg-fullscreen .trumbowyg-overlay{
height:100%!important;
}

.trumbowyg-fullscreen .trumbowyg-button-group .trumbowyg-fullscreen-button svg{
color:#222;
fill:transparent;
}

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

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

.trumbowyg-editor img{
cursor:move;
}

.trumbowyg-editor canvas:focus{
outline:0;

border:1px;
border-color: #F9FBFD;

}

.trumbowyg-editor.trumbowyg-reset-css{
background:#FEFEFE!important;
font-family:"Trebuchet MS",Helvetica,Verdana,sans-serif!important;
font-size:14px!important;
line-height:1.45em!important;
color:#333;
}

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

.trumbowyg-editor.trumbowyg-reset-css blockquote,
.trumbowyg-editor.trumbowyg-reset-css div,
.trumbowyg-editor.trumbowyg-reset-css ol,
.trumbowyg-editor.trumbowyg-reset-css p,
.trumbowyg-editor.trumbowyg-reset-css ul{
-webkit-box-shadow:none!important;
box-shadow:none!important;
background:0 0!important;
margin:0 0 15px!important;
line-height:1.4em!important;
font-family:"Trebuchet MS",Helvetica,Verdana,sans-serif!important;
font-size:14px!important;
border:none;
}

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

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

.trumbowyg-editor.trumbowyg-reset-css ul{
list-style:disc;
}

.trumbowyg-editor.trumbowyg-reset-css ol{
list-style:decimal;
}

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

.trumbowyg-editor.trumbowyg-reset-css ol ol,
.trumbowyg-editor.trumbowyg-reset-css ol ul,
.trumbowyg-editor.trumbowyg-reset-css ul ol,
.trumbowyg-editor.trumbowyg-reset-css ul ul{
border:none;
margin:2px!important;
padding:0 0 0 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:0 0;
margin:0!important;
padding:0!important;
font-weight:700;
}

.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;
}

.trumbowyg-dark .trumbowyg-textarea{background:#111;color:#ddd;}
.trumbowyg-dark .trumbowyg-box{border:10px solid #343434;}
.trumbowyg-dark .trumbowyg-box.trumbowyg-fullscreen{background:#111;}
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *,
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before{text-shadow:0 0 7px #ccc;}
@media screen and (min-width:0 \0){
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *,
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before{color:rgba(20,20,20,.6)!important;}}
@supports (-ms-accelerator:true){
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *,
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before{color:rgba(20,20,20,.6)!important;}}
.trumbowyg-dark .trumbowyg-box svg{fill:#ecf0f1;color:#ecf0f1;}
.trumbowyg-dark .trumbowyg-button-pane{background-color:#222;border-bottom-color:#343434;}
.trumbowyg-dark .trumbowyg-button-pane::after{background:#343434;}
.trumbowyg-dark .trumbowyg-button-pane .trumbowyg-button-group:not(:empty)::after{background-color:#343434;}
.trumbowyg-dark .trumbowyg-button-pane .trumbowyg-button-group:not(:empty) .trumbowyg-fullscreen-button svg{color:transparent;}
.trumbowyg-dark .trumbowyg-button-pane.trumbowyg-disable .trumbowyg-button-group::after{background-color:#2a2a2a;}
.trumbowyg-dark .trumbowyg-button-pane button.trumbowyg-active,
.trumbowyg-dark .trumbowyg-button-pane button:not(.trumbowyg-disable):focus,
.trumbowyg-dark .trumbowyg-button-pane button:not(.trumbowyg-disable):hover{background-color:#333;}
.trumbowyg-dark .trumbowyg-button-pane .trumbowyg-open-dropdown::after{border-top-color:#fff;}
.trumbowyg-dark .trumbowyg-fullscreen .trumbowyg-button-pane .trumbowyg-button-group:not(:empty) .trumbowyg-fullscreen-button svg{color:#ecf0f1;fill:transparent;}
.trumbowyg-dark .trumbowyg-dropdown{border-color:#222;background:#333;-webkit-box-shadow:rgba(0,0,0,.3) 0 2px 3px;box-shadow:rgba(0,0,0,.3) 0 2px 3px;}
.trumbowyg-dark .trumbowyg-dropdown button{background:#333;color:#fff!important;}
.trumbowyg-dark .trumbowyg-dropdown button:focus,
.trumbowyg-dark .trumbowyg-dropdown button:hover{background:#222;}
.trumbowyg-dark .trumbowyg-modal-box{background-color:#222;}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-title{border-bottom:1px solid #555;color:#fff;background:#3c3c3c;}
.trumbowyg-dark .trumbowyg-modal-box label{display:block;position:relative;margin:15px 12px;height:27px;line-height:27px;overflow:hidden;}
.trumbowyg-dark .trumbowyg-modal-box label .trumbowyg-input-infos span{color:#eee;background-color:#2f2f2f;border-color:#222;}
.trumbowyg-dark .trumbowyg-modal-box label .trumbowyg-input-infos span.trumbowyg-msg-error{color:#e74c3c;}
.trumbowyg-dark .trumbowyg-modal-box label.trumbowyg-input-error input,
.trumbowyg-dark .trumbowyg-modal-box label.trumbowyg-input-error textarea{border-color:#e74c3c;}
.trumbowyg-dark .trumbowyg-modal-box label input{border-color:#222;color:#eee;background:#333;}
.trumbowyg-dark .trumbowyg-modal-box label input:focus,
.trumbowyg-dark .trumbowyg-modal-box label input:hover{border-color:#626262;}
.trumbowyg-dark .trumbowyg-modal-box label input:focus{background-color:#2f2f2f;}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit{background:#1b7943;}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus,
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover{background:#25a25a;}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active{background:#176437;}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset{background:#333;color:#ccc;}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus,
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover{background:#444;}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active{background:#111;}
.trumbowyg-dark .trumbowyg-overlay{background-color:rgba(15,15,15,.6);}

################################################################### index ########################

<!doctype html>

<title>Documento Local</title>
<link rel="shortcut icon" href="favicon.ico">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="dist/ui/trumbowyg.min.css">


<!-- Import Trumbowyg plugins -->
<link rel="stylesheet" href="dist/plugins/colors/ui/trumbowyg.colors.css">

<link rel="stylesheet" href="dist/plugins/emoji/ui/trumbowyg.emoji.min.css">

<?php
$dados = filter_input_array(INPUT_POST, FILTER_DEFAULT);


if (!empty($dados['SendCadArtigo'])) {
    //var_dump($dados);
    $query_cad_artigo = "INSERT INTO artigos (titulo, conteudo) VALUES (:titulo, :conteudo)";
    $cad_artigo = $conn->prepare($query_cad_artigo);
    $cad_artigo->bindParam(':titulo', $dados['titulo']);
    $cad_artigo->bindParam(':conteudo', $dados['conteudo']);
    $cad_artigo->execute();

    if ($cad_artigo->rowCount()) {
        echo "<p style='color: green;'>Artigo cadastrado com sucesso!</p>";
    } else {
        echo "<p style='color: #f00;'>Erro: Artigo não cadastrado com sucesso!</p>";
    }
}
?>




<form method="POST" action="">

<a class="navbar-brand" href="#">
  <img src="icon.png" alt="Bootstrap" width="26" height="36">
</a>

    <textarea class="test form-control mt-4" style="padding-top:300px;" name="conteudo" id="trumbowyg-editor" rows="5" ></textarea>


    <input type="submit" value="Cadastrar" name="SendCadArtigo" />
</form>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script src="dist/trumbowyg.min.js"></script>

<script type="text/javascript" src="dist/langs/pt_br.min.js"></script>



<script src="dist/plugins/upload/trumbowyg.upload.min.js"></script>

<!-- Import Trumbowyg indent at the end of <body>... -->
<script src="dist/plugins/indent/trumbowyg.indent.min.js"></script>

<!-- Import Trumbowyg history JS at the end of <body>... -->

<script>
    $('#trumbowyg-editor').trumbowyg({

        linkTargets: ['_blank', '_self', '_parent', '_top'],

        lang: 'pt_br',

        btnsDef: {

            align: {
                    dropdown: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
                    ico: '',
                    title: 'Displayed dropdown button name',
                },

            teste: {
                    dropdown: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
                    ico: '',
                    tag: 'tagName',
        title: 'Button tooltip',
                    title: 'Displayed dropdown button name',
                }
            },

            

        btns: [
            ['teste'], 
            ['undo', 'redo'], // Only supported in Blink browsers
        
            ['formatting'],
            ['template'],
            ['fontfamily'],
            ['fontsize'],
            
            ['strong', 'em', 'del','superscript', 'subscript','horizontalRule','foreColor', 'backColor'],
            ['link','insertImage','upload'],

            ['align','lineheight','unorderedList', 'orderedList','indent', 'outdent'], 

            

            ['removeformat','preformatted','viewHTML'],
            ['fullscreen']
           
        ],

        plugins: {

            fontsize: {
                sizeList: [
                    '12px',
                    '14px',
                    '16px'
                ]
            },

        templates: [

            {
                name: 'Texto normal',
                html: '<p>Texto normal</p>'
            },

            {
                name: '<h1>Título</h1>',
                html: '<h1>Título</h1>'
            },

            {
                name: '<h4 class="pt-1">Sub-título</h4>',
                html: '<h4>Sub-título</h4>'
            },

            {
                name: '<h2 class="mt-1">Título 2</h2>',
                html: '<h2>Título</h2>'
            },
            {
                name: '<h3>Título 3</3>',
                html: '<h3>Título</h3>'
            }

        ],

        lineheight: {

            sizeList: [
                '14px',
                '18px',
                '22px'
            ]

        },

        colors: {

            colorList: [
                    '000', '111', '222', 'ffea00'
                ]
        },

        // Add imagur parameters to upload plugin for demo purposes
        upload: {
             serverPath: './upload.php',
            fileFieldName: 'image',
            headers: {
                    'Authorization': 'Client-ID xxxxxxxxxxxx'
                },
            urlPropertyName: 'file'
            }
        },

        autogrow: true

    });

</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

![icon](https://github.com/Alex-D/Trumbowyg/assets/4947967/5f2c45f5-a355-498d-825e-dd308bbedd31) ![tab-icon](https://github.com/Alex-D/Trumbowyg/assets/4947967/d1422200-eba2-4941-a6df-ae9c45836b7a)

fabiodellpozzo · 2023-11-26T11:52:41Z

fabiodellpozzo
Nov 26, 2023
Author

Responding to the direction.

1 reply

Alex-D Nov 26, 2023
Maintainer

Thank you for helping to keep Discussions clean :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Continue I Love Trumbowyg #1431

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Continue I Love Trumbowyg #1431

fabiodellpozzo Nov 22, 2023

Replies: 1 comment · 1 reply

fabiodellpozzo Nov 26, 2023 Author

Alex-D Nov 26, 2023 Maintainer

fabiodellpozzo
Nov 22, 2023

Replies: 1 comment 1 reply

fabiodellpozzo
Nov 26, 2023
Author

Alex-D Nov 26, 2023
Maintainer