Adaptar CKEDITOR

Detalhes da questão

Endereço do fórum: brasilplayfreedom.forumeiro.com/forum
Versão do fórum: PunBB

Descrição

Eu gostaria de ajuda para adaptar esse CKeditor.

Porém, eu gostaria de aprender como posso fazer isso:

https://imgur.com/a/IfJa1

Fórum onde vi:

http://www.rlhackers.net/forum/

Conta: uYoutuber
senha: 1234567abc

Olá autor, Bom Dia.

Achei que você sabia, boatos que você era o autor do código, enfim, sugiro que faça uma pesquisa:
Basta clicar aqui , o fórum é da plataforma IPB, e disse bem... só da para adaptar, pois o autor principal sempre será o mesmo.

Até mais.

Em momento algum falei que sou o dono do código e sim falei que meu irmão adaptou, pois foi isso que o mesmo me disse, quando informei sobre a MP do Yotuber, mas msm assim obrigado pela sua ajuda.

O Único que pediu esse editor foi o Youtuber: https://ajuda.forumeiros.com/t106782-sceditor-ipb?highlight=SCeditor porém não é o mesmo editor. E o código foi privatizado.

Bom, não precisa justificar, não vem ao caso.

O código é igual o que seu irmão "Adaptou", só precisa de uns ajustes... pois a versão que seu irmão adaptou, ou melhor dizendo, eu passei é uma versão mais antiga.

Mas, porque você não vê outros editores? basta clicar no link da mensagem que postei acima pra ver alguns outros editores, existem diversos.

Até mais.

Já vir muitos editores, porém gostei desse e gostaria de ajuda para aprender a adaptar. Não teria algum vídeo aula ou tutorial ensinando adaptar esse tipo de editor?

É Muito simples adaptar, basta ter um certo entendimento sobre Javascript e Css.

Você pode ver os vídeos já postados no TV Forumeiros (Canal do youtube), acredito que ao ver os vídeos terá uma noção maior de como a magia acontece (magia no sentido de, fazer o impossível tornar possível, um dia você saberá o que estou a dizer).

Veja o canal: https://www.youtube.com/user/tvforumeiros
Como também uns Tópicos importantes: https://ajuda.forumeiros.com/t16183-elaborar-um-codigo-css
https://ajuda.forumeiros.com/t72751-elaborar-um-codigo-css3-vol-1-efeitos

Até mais.

Poderia me explica algumas classes para que eu possa começa a tentar?

Como assim autor? Para saber as classes/ids basta você inspecionar o elemento desejado.

OBS: No CKEditor é mais complexo inspecionar .

Existem alguns tutoriais ensinando como inspecionar o elemento com o uso da ferramenta do desenvolvedor, é algo absolutamente fácil, e que todos tem acesso.

Até mais.

Encontrei este código:

Código:

CKEDITOR.editorConfig = function(config) {
   
   
   config.language = 'pt-br';
   config.height = 600;
   config.toolbarCanCollapse = true;
   
   
   
      
   config.filebrowserBrowseUrl = 'ckeditor/kcfinder/browse.php?opener=ckeditor&type=images';
  config.filebrowserImageBrowseUrl = 'ckeditor/kcfinder/browse.php?opener=ckeditor&type=files';
  config.filebrowserFlashBrowseUrl = 'ckeditor/kcfinder/browse.php?opener=ckeditor&type=flash';
  config.filebrowserUploadUrl = 'ckeditor/kcfinder/upload.php?opener=ckeditor&type=files';
  config.filebrowserImageUploadUrl = 'ckeditor/kcfinder/upload.php?opener=ckeditor&type=images';
  config.filebrowserFlashUploadUrl = 'ckeditor/kcfinder/upload.php?opener=ckeditor&type=flash';
   
   

config.toolbarGroups = [

      { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
      { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
      { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
      { name: 'forms', groups: [ 'forms' ] },
      '/',
      { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
      { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
      { name: 'links', groups: [ 'links' ] },
      '/',
      { name: 'styles', groups: [ 'styles' ] },
      { name: 'insert', groups: [ 'insert' ] },
      { name: 'colors', groups: [ 'colors' ] },
      { name: 'tools', groups: [ 'tools' ] },
      { name: 'others', groups: [ 'others' ] },
      { name: 'about', groups: [ 'about' ] }
   ];

   config.removeButtons = 'Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,About';



config.skin = 'icy_orange';



};
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;

]

Agora oque devo fazer?

Este código não faz sentido algum... só se tivesse o CKEditor instalado no seu fórum, ai sim, poderia haver sentido.

Não reparei bem ele, mas percebe-se que não fará efeito algum, para não demorar muito nessa questão, que estou vendo que você não chegará no resultado esperado se ficar por conta própria.

Adicione esse código em sua folha de estilo css:

Código:

#text_editor_textarea{height:250px;width:90%}#message-box{float:left;width:80%}.sceditor-container{border:2px solid #69C!important;border-radius:0!important}.sceditor-container .sceditor-toolbar{background-color:#69C;border-color:#58B;border-radius:0}.sceditor-container .sceditor-group{background:rgba(255,255,255,.45);border-color:#58B;border-radius:0;padding:0}.sceditor-container .sceditor-button{border-radius:0;padding:4px 6px;position:relative}.codebox dd,blockquote{padding:3px}.sceditor-container .sceditor-button:hover{box-shadow:none;background-color:rgba(255,255,255,.3)}.sceditor-container .hover,.sceditor-container .sceditor-button.active,.sceditor-container .sceditor-button:active{box-shadow:none;background-color:rgba(255,255,255,.6)}.sceditor-container .sceditor-button.disabled{opacity:.5}.sceditor-container .sceditor-button div{background-image:none}.sceditor-button:after{content:"\f128"}.sceditor-button:after,.sceditor-button:before{color:#555;font-size:14px;font-weight:400;font-family:FontAwesome;text-align:center;position:absolute;top:0;left:0;right:0;bottom:0;line-height:28px;text-indent:0}.sceditor-button-bold:after{content:"\f032"}.sceditor-button-italic:after{content:"\f033"}.sceditor-button-underline:after{content:"\f0cd"}.sceditor-button-strike:after{content:"\f0cc"}.sceditor-button-left:after{content:"\f036"}.sceditor-button-center:after{content:"\f037"}.sceditor-button-right:after{content:"\f038"}.sceditor-button-justify:after{content:"\f039"}.sceditor-button-bulletlist:after{content:"\f0ca"}.sceditor-button-orderedlist:after{content:"\f0cb"}.sceditor-button-horizontalrule:after{content:"\f068"}.sceditor-button-quote:after{content:"\f10d"}.sceditor-button-code:after{content:"\f121"}.sceditor-button-faspoiler:after{content:"\f071"}.sceditor-button-fahide:after{content:"\f070"}.sceditor-button-table:after{content:"\f0ce"}.sceditor-button-servimg:after{content:"\f093"}.sceditor-button-image:after{content:"\f03e"}.sceditor-button-link:after{content:"\f0c1"}.sceditor-button-youtube:after{content:"\f16a"}.sceditor-button-dailymotion:before,.sceditor-button-flash:before{content:"";background:#555;top:6px;left:6px;right:6px;bottom:6px}.sceditor-button-dailymotion:after{content:"d";color:#FFF;font-weight:700;font-family:"trebuchet ms",arial,verdana,sans-serif;left:3px;top:1px}.sceditor-button-flash:after{content:"Æ’";color:#FFF;font-weight:700;font-family:sans-serif;top:-1px}.sceditor-button-headers:after{content:"\f1dc"}.sceditor-button-size:after{content:"\f034"}.sceditor-button-color:after{content:"\f1fb"}.sceditor-button-font:after,.sceditor-button-removeformat:before{content:"\f031"}.sceditor-button-removeformat:after{content:"\f056";font-size:10px;left:auto;top:auto;right:5px;bottom:3px;line-height:normal}#chatbox_footer,#divPub{bottom:0}.sceditor-button-more:after{content:"\f141"}.sceditor-button-subscript:after{content:"\f12c"}.sceditor-button-superscript:after{content:"\f12b"}.sceditor-button-fascroll:after{content:"\f100"}.sceditor-button-faupdown:after{content:"\f102"}.sceditor-button-farand:after{content:"\f074"}.sceditor-button-emoticon:after{content:"\f118"}.sceditor-button-date:after{content:"\f271"}.sceditor-button-time:after{content:"\f017"}.sceditor-button-pastetext:after{content:"\f0ea"}.sceditor-button-source:after{content:"\f0f6"}

Esse código deve estar no topo da sua folha de estilo css e tens que ter o Font-Awesome instalado no seu fórum.
Até mais.

Certo, como faço para instalar essa font?
E ficou com essa aparência: https://imgur.com/a/nYukJ

@Edit:

Seguir este tutorial:

https://ajuda.forumeiros.com/t103208-tutorial-instalacao-do-font-awesome-no-forum

E adicionei somente esse código no template overall_header:

Código:

@import url("https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css") print;

Porém não deu mudança nos icones.

Veja este tutorial, PrisoN:

https://ajuda.forumeiros.com/t76253-adicionar-mais-fontes

Bom, vi este tutorial, porém não deu efeito:

https://ajuda.forumeiros.com/t103208-tutorial-instalacao-do-font-awesome-no-forum

Troque o css por este:

Código:

 #text_editor_textarea{height:250px;width:90%}#message-box{float:left;width:80%}.sceditor-container{border:2px solid #69C!important;border-radius:0!important}.sceditor-container .sceditor-toolbar{background-color:#69C;border-color:#ddd;border-radius:0}.sceditor-container .sceditor-group{background:rgba(255,255,255,.45);border-color:none!important;border-radius:0;padding:0;margin: 0px 25px 0px -20px!important;}.sceditor-container .sceditor-button{border-radius:0;padding:4px 6px;position:relative}.codebox dd,blockquote{padding:3px}.sceditor-container .sceditor-button:hover{box-shadow:none;background-color:rgba(255,255,255,.3)}.sceditor-container .hover,.sceditor-container .sceditor-button.active,.sceditor-container .sceditor-button:active{box-shadow:none;background-color:rgba(255,255,255,.6)}.sceditor-container .sceditor-button.disabled{opacity:.5}.sceditor-container .sceditor-button div{background-image:none}.sceditor-button:after{content:"\f128"}.sceditor-button:after,.sceditor-button:before{color:#555;font-size:14px;font-weight:400;font-family:FontAwesome;text-align:center;position:absolute;top:0;left:0;right:0;bottom:0;line-height:28px;text-indent:0}.sceditor-button-bold:after{content:"\f032"}.sceditor-button-italic:after{content:"\f033"}.sceditor-button-underline:after{content:"\f0cd"}.sceditor-button-strike:after{content:"\f0cc"}.sceditor-button-left:after{content:"\f036"}.sceditor-button-center:after{content:"\f037"}.sceditor-button-right:after{content:"\f038"}.sceditor-button-justify:after{content:"\f039"}.sceditor-button-bulletlist:after{content:"\f0ca"}.sceditor-button-orderedlist:after{content:"\f0cb"}.sceditor-button-horizontalrule:after{content:"\f068"}.sceditor-button-quote:after{content:"\f10d"}.sceditor-button-code:after{content:"\f121"}.sceditor-button-faspoiler:after{content:"\f071"}.sceditor-button-fahide:after{content:"\f070"}.sceditor-button-table:after{content:"\f0ce"}.sceditor-button-servimg:after{content:"\f093"}.sceditor-button-image:after{content:"\f03e"}.sceditor-button-link:after{content:"\f0c1"}.sceditor-button-youtube:after{content:"\f16a"}.sceditor-button-dailymotion:before,.sceditor-button-flash:before{content:"";background:#555;top:6px;left:6px;right:6px;bottom:6px}.sceditor-button-dailymotion:after{content:"d";color:#FFF;font-weight:700;font-family:"trebuchet ms",arial,verdana,sans-serif;left:3px;top:1px}.sceditor-button-flash:after{content:"Æ’";color:#FFF;font-weight:700;font-family:sans-serif;top:-1px}.sceditor-button-headers:after{content:"\f1dc"}.sceditor-button-size:after{content:"\f034"}.sceditor-button-color:after{content:"\f1fb"}.sceditor-button-font:after,.sceditor-button-removeformat:before{content:"\f031"}.sceditor-button-removeformat:after{content:"\f056";font-size:10px;left:auto;top:auto;right:5px;bottom:3px;line-height:normal}#chatbox_footer,#divPub{bottom:0}.sceditor-button-more:after{content:"\f141"}.sceditor-button-subscript:after{content:"\f12c"}.sceditor-button-superscript:after{content:"\f12b"}.sceditor-button-fascroll:after{content:"\f100"}.sceditor-button-faupdown:after{content:"\f102"}.sceditor-button-farand:after{content:"\f074"}.sceditor-button-emoticon:after{content:"\f118"}.sceditor-button-date:after{content:"\f271"}.sceditor-button-time:after{content:"\f017"}.sceditor-button-pastetext:after{content:"\f0ea"}.sceditor-button-source:after{content:"\f0f6"}
a.sceditor-button.sceditor-button-date, #textarea_content > div > div.sceditor-toolbar > div:nth-child(6) > a.sceditor-button.sceditor-button-time , #textarea_content > div > div.sceditor-toolbar > div:nth-child(5) > a.sceditor-button.sceditor-button-removeformat.disabled > div , #textarea_content > div > div.sceditor-toolbar > div:nth-child(6) > a.sceditor-button.sceditor-button-source.hover, .sceditor-container .sceditor-button.disabled {display:none!important;}
.sceditor-container .sceditor-button:hover {background: #ddd!important;}
.sceditor-container {border:1px solid #ddd!important;}
div.sceditor-resize-cover, div.sceditor-grip {display:none!important;}

Seria assim?
Tentei o mais parecido.

Até mais.

Ficou assim: https://imgur.com/a/rDoDA

Não tem como deixa o mais parecido com um desses dois não?

https://imgur.com/a/gtpRN

Precisa utilizar algum JS para fica com essa aparencia?

Pra ter as mesmas funções, é obvio que precisa de JS.

Eu apenas adaptei a aparência dele... entende? Não ficou 100% é claro... mas, ficou um pouco parecido.

Se não é assim que deseja, lamento, não posso fazer mais nada por você, pedirei que aguarde outro usuário atender.
Até mais.

Ok, estarei no aguardo.

PrisoN†BreaK escreveu:Certo, como faço para instalar essa font?
E ficou com essa aparência: https://imgur.com/a/nYukJ

@Edit:

Seguir este tutorial:

https://ajuda.forumeiros.com/t103208-tutorial-instalacao-do-font-awesome-no-forum

E adicionei somente esse código no template overall_header:

Código:

@import url("https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css") print;

Porém não deu mudança nos icones.

Bom dia!

Por favor, verifique novamente o tutorial e perceba que está claro que o código que você mencionou deve ser aplicado na Folha de estilos CSS e não no template Overall_header. Irei fazer um vídeo tutorial explicando isso.

Se for para colocar no template, você deve adicionar abaixo da variável {CSS} este código:

Código:

<link rel="stylesheet" href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" />

Salve e publique.

Até mais!

Obrigado, Sheik.

--
Aguardando alguém para me ajuda com o CKEditor

Retire todos os códigos passados, e crie um novo javascript com esse código:

Código:

 
jQuery(function() {
  jQuery.ajax({
    type: "GET",
    url: "http://cdn.ckeditor.com/4.5.11/standard-all/ckeditor.js",
    dataType: "script"
  }).done(function() {
        CKEDITOR.replace("text_editor_textarea", {
            extraPlugins: "bbcode"
        });
  });
  jQuery(function() {
          $("#text_editor_textarea").sceditor("instance").destroy();
  });
});

Seria assim?
Até mais.

Não é o mesmo é editor mas pode ser assim mesmo muito obrigado. To sem teclado kkkk,tenho q falar no mic pra colar o texto aq.