substitebyclass.html

Substituir Elementos Textarea por Nome de Classe

Executando o exemplo:

4.3- Criar CKEditor com jQuery

Exemplo de criação CKEditorusando JQuery.

Crie editores com jQuery

Executando o exemplo:

5- Personalização básica

5.1- Alterar a cor da interface

CKEDITOR.replace ("textarea_id", (uiColor: "# 14B8C4"));

Cor da IU

Veja também:

5.2- Alterar idioma

uilanguages.html

Idiomas da interface do usuário

Nota: Você pode consultar a lista de códigos e nomes de idiomas em:

• /samples/assets/uilanguages/languages.js

Executando o exemplo:

6- Edição Inline

6.1- Criação de um editor embutido complexo

Este exemplo mostra a edição embutida - objeto CKEditor será criado automaticamente a partir de elementos que possuem um atributo contenteditable \u003d "true".

Você pode alterar o conteúdo dentro do elemento Htmlque tem o atributo contenteditable \u003d "true". E a barra de ferramentas aparecerá quando alterada:

Neste exemplo:

• E se h1, h2, h3ou marcar com id \u003d taglist, và có contenteditable \u003d "true" então a barra de ferramentas mostra (plugin removido botão de cor, localizar, flash, fontes ,...)
• Oposto da barra de ferramentas é mostrado por padrão.

Uma ilustração da execução do exemplo:

Edição em linha massiva

Executando o exemplo:

6.2- Converter um elemento para o editor embutido usando código

inlinebycode.html

Edição Inline por Código

6.3- Substituir textarea com editor embutido

inlinetextarea.html

Substituir Textarea com Editor Inline

6.4- Edição em linha com jQuery

jquery-inline.html

Crie editores com jQuery - exemplo inline

7- configuração do CKEditor

Você pode personalizar CKEditor na inicialização. Você tem 2 maneiras de configurar CKEditor:

1. Configuração estatística:
   • Terá um efeito em todos CKEditor
2. Configuração para um CKEditor específico:
   • Tem efeito apenas para configurado CKEditor.

7.1- Configuração estática

Configuração estatística:

• Terá um efeito em todos CKEditor, para aqueles que não especificam uma configuração específica.

Veja um exemplo de configuração estatística:

// Configurando a barra de ferramentas, exibe alguns botões. CKEDITOR.config.toolbar \u003d [["Fonte", "Tamanho da fonte"], ["Negrito", "Itálico"]]; // Configurando a cor da IU. CKEDITOR.config.uiColor \u003d "# 9AB8F3"; CKEDITOR.config.width \u003d "500px"; CKEDITOR.config.height \u003d "70px";

config-static.html

Configuração estática do CKEditor

Executando o exemplo:

Veja também configuração Barra de ferramentas

7.2- Configuração para um objeto CKEditor específico

Com cada CKEditor na página, você pode personalizá-los de forma diferente. Por exemplo, uma página da web tem 2 diferentes CKEditorcom uma diferença Barra de ferramentas em quantidade Botão.

config-instance.html

Configuração da instância CKEditor

Executando o exemplo:

7.3- Atributos de Configuração

Você pode ver a lista de atributos de configuração aqui:

8- Configurações da barra de ferramentas

Existem várias abordagens para configurar a barra de ferramentas CKEditor:

1. Use o Configurador de Barra de Ferramentas
2. Configuração de item por item
   • config.toolbar
3. Configuração de grupos da barra de ferramentas
   • config.toolbarGroups

8.1- Configuração da barra de ferramentas "Item a Item"

Você pode configurar Barra de ferramentasusando o caminho "Item por Item" , isto é, você declara grupos, cada grupo consiste em Botão.

// Declarando grupos, cada grupo com os botões. CKEDITOR.config.toolbar \u003d [(nome: "my_document", items: ["Source", "-", "NewPage", "Preview", "-", "Templates"]), (name: "my_clipboard", itens: ["Cortar", "Copiar", "Colar"]), "/", (nome: "meus_estilos", itens: ["Negrito", "Itálico", "Formato"])];

Você também não precisa anunciar o nome do grupo.

CKEDITOR.config.toolbar \u003d [["Source", "-", "NewPage", "Preview", "-", "Templates"], ["Cut", "Copy", "Paste"], "/" , ["Negrito", "Itálico", "Formato"]];

toolbar-itembyitem.html

Configuração da barra de ferramentas CKEditor - Item por Item

Executando o exemplo:

8.2- Configurando Grupos da Barra de Ferramentas

Benefícios da configuração de grupo:

A Vantagem Mais Importante da Configuração de Grupos de Barra de Ferramentas em relação à Configuração "Item por item" esta? automação.

Agora para desenvolvedores plugaré possível definir o grupo ao qual o botão.

Embora não seja obrigatório, é recomendado (recomendado) configurar todos os grupos e subgrupos (incluindo aqueles que você não usa), porque a qualquer momento no futuro, ao instalar um novo plugar, este botão aparecerá automaticamente na barra de ferramentas sem a necessidade de outras configurações.

Por exemplo:

// O Ckeditor construiu um grupo básico chamado "modo", "documento", "área de transferência", "desfazer", "estilos", "links" ..... // Você pode definir seu grupo com qualquer nome e conter o grupo básico do CKEditor. // Seu grupo pode ter o mesmo nome do grupo Ckeditor disponível. // Seu grupo pode não precisar listar o subgrupo, então, por padrão, ele conterá um subgrupo com o mesmo nome do seu grupo. CKEDITOR.config.toolbarGroups \u003d [(nome: "documento", grupos: ["modo", "documento"]), (nome: "meu_grupo", grupos: ["área de transferência", "desfazer"]), (nome: "estilos"), (nome: "links")];

Vantagem de configuração Grupos da barra de ferramentas isto é quando você muda a biblioteca CKEditor para a nova versão, se houver gruponova versão é adicionada nova Botão, ele aparecerá automaticamente no painel Barra de ferramentas, você não precisa alterar o código da sua página da web.

Você também pode usar "/" em configuração Barra de ferramentaspara quebrar as linhas (mover para trás botãoem uma nova linha).

CKEDITOR.config.toolbarGroups \u003d [(nome: "documento", grupos: ["modo", "documento"]), (nome: "meu_clipboard", grupos: ["área de transferência", "desfazer"]), "/" , (nome: "estilos"), (nome: "links")];

toolbar-group.html

Configuração de grupos da barra de ferramentas CKEditor

Executando o exemplo:

8.3- Lista de grupos e itens prontos no CKEditor

Estas são as definições de grupos em CKEditor 3.x:

(nome: "documento", itens: ["Fonte", "-", "Salvar", "Nova página", "DocProps", "Visualizar", "Imprimir", "-", "Modelos"]), (nome : "clipboard", items: ["Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Desfazer", "Refazer"]), (nome: "edição", itens : ["Find", "Replace", "-", "SelectAll", "-", "SpellChecker", "Scayt"]), (nome: "forms", items: ["Form", "Checkbox", "Radio", "TextField", "Textarea", "Select", "Button", "ImageButton", "HiddenField"]), (nome: "basicstyles", items: ["Negrito", "Itálico", "Sublinhado "," Strike "," Subscript "," Superscript "," - "," RemoveFormat "]), (name:" paragraph ", items: [" NumberedList "," BulletedList "," - "," Outdent ", "Indent", "-", "Blockquote", "CreateDiv", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock", "-", "BidiLtr", "BidiRtl"]), (nome: "links", itens: ["Link", "Desvincular", "Âncora"]), (nome: "inserir", itens: ["Imagem", "Flash", "Tabela", "Regra Horizontal", "Smiley", "SpecialChar", "PageBreak", "Iframe"]), (nome: "estilos", itens: ["Estilos", "Formato", "Fonte", "Tamanho da fonte" ]), (nome: "cores", itens: ["TextColor", "BGColor"]), (nome: "ferramentas", itens: ["Maximize", "ShowBlocks", "-", "About"])

9- Mais exemplos no site CKEditor

Por exemplo, crie um personalizado Plugarpara o seu CKEditor.

Crie o plugin CKEditor:

Na minha opinião, CKEditor é um dos melhores editores wysiwyg para sites. Recentemente, apareceu muito zaum nele para simplificar a vida do usuário, por isso interferindo nele como ACF. Como posso editar e desativá-lo já. Mas voltando ao tópico do nosso artigo sobre como instalar plug-ins no CKEditor.

Eu vejo duas abordagens aqui.

Primeiro, vamos ao site do editor e reconstruímos o CKeditor para nós mesmos, incluindo os plug-ins de que precisamos. Isto se faz do seguinte modo. Vá para o site ckeditor.com, vá para a guia de download. Em seguida, selecione Ou deixe-me personalizar o CKEditor

Mas, neste caso, nem todos os plug-ins são exibidos. Para incluir alguns plug-ins novos ou especiais em uma montagem, você precisa montar sua montagem de uma maneira ligeiramente diferente. Vamos ao item Add-ons -\u003e Plug-ins e vemos à direita o seguinte menu móvel

Quando você clica no botão adicionar ao meu editor, o plugin é adicionado à montagem. Quando terminar, clique em Construir meu editor e substitua nosso editor integrado pelo gerado.

A segunda abordagem é para aqueles que estão interessados \u200b\u200bem se aprofundar no código por conta própria.

No site ckeditor.com, vá para a seção add-ons-\u003e plug-ins e clique no plug-in necessário.

Escolha Download e siga as instruções do site. Na maioria das vezes, eles se resumem ao fato de que você precisa instalar dependências para este plug-in e registrar o próprio plug-in no campo do arquivo de configuração config.js e o plug-in do qual ele depende, que é instalado separado por vírgulas , por exemplo,

Config.extraPlugins \u003d "codemirror, youtube, imagerotate";

CKEditor é um editor visual que você pode adicionar ao seu site, blog ou fórum gratuitamente. É open source e roda nos CMS mais populares. Com a instalação deste editor visual mesmo webmasters inexperientes podem lidar com isso. De fato, adicionando CKEditor para o site ocorre em duas etapas: primeiro, você descompacta o arquivo no servidor e, em seguida, adiciona algumas linhas ao código da página. Instruções detalhadas para instalação, você encontrará no arquivo com o editor.

Pronto para uso, esta extensão para um site oferece a capacidade de redimensionar a janela de entrada, copiar e colar texto, formatar links, alterar a fonte, trabalhar com texto sobrescrito e subscrito, adicionar caracteres especiais, adicionar uma fonte de informação, inserir imagens , âncoras e assim por diante. A funcionalidade fornecida depende da versão do CKEditor selecionada. Existem três deles: Básico, Padrão e Completo. Se a funcionalidade da edição mais "avançada" não for suficiente para você, você pode expandir os recursos do editor usando plug-ins.

Os desenvolvedores não se esqueceram da possibilidade de mudança aparência CKEditor. Se nenhum dos dois temas de design padrão se adequar ao seu gosto, você pode procurar "skins" adicionais no site oficial e recursos especializados de terceiros. Lembramos que todas as funcionalidades acima estão disponíveis para webmasters para uso "único" totalmente gratuito. Também existem versões do editor visual com licenças comerciais.

Principais recursos e funções

• distribuído em três versões, que diferem em funcionalidade;
• pode ser "estendido" com plug-ins;
• muito fácil de instalar e funciona nos CMS mais populares;
• suporta a alteração dos temas da barra de ferramentas;
• é totalmente gratuito.

O que há de novo neste lançamento?

4.6.1 (08.12.2016)