Adaptar CKEDITOR

4 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Adaptar CKEDITOR

Mensagem por PrisoN†BreaK 22.09.16 14:34

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
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por while 22.09.16 16:18

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.
while

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por PrisoN†BreaK 22.09.16 16:45

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.

PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por while 22.09.16 17:00

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.
while

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por PrisoN†BreaK 22.09.16 17:31

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?
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por while 22.09.16 17:35

É 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.
while

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por PrisoN†BreaK 22.09.16 18:11

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

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por while 22.09.16 18:15

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

OBS: No CKEditor é mais complexo inspecionar Rindo.

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.
while

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por PrisoN†BreaK 22.09.16 18:32

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?
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por while 22.09.16 18:42

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.
while

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por PrisoN†BreaK 22.09.16 18:57

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.


Última edição por PrisoN†BreaK em 22.09.16 19:13, editado 2 vez(es)
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por Maori 22.09.16 19:10

Maori

Maori
Membro

Membro desde : 08/06/2014
Mensagens : 521
Pontos : 702

http://baixacidade.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por PrisoN†BreaK 22.09.16 19:18

PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por while 22.09.16 21:26

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.
while

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por PrisoN†BreaK 22.09.16 21:38

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?

PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por while 22.09.16 21:44

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.
while

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por PrisoN†BreaK 22.09.16 21:46

Ok, estarei no aguardo.
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por Shek 23.09.16 16:28

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. Piscada

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!
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por PrisoN†BreaK 23.09.16 19:27

Obrigado, Sheik.

--
Aguardando alguém para me ajuda com o CKEditor
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por while 23.09.16 19:35

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.
while

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por PrisoN†BreaK 23.09.16 21:59

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.
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Adaptar CKEDITOR

Mensagem por while 23.09.16 22:01

Adaptar CKEDITOR Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
while

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos