Resumo detalhado da configuração do ckEditor em asp

<script type=text/javascript src=ckeditor/ckeditor.js></script>

2. Insira o controle HTML <textarea> onde o editor é utilizado.

Copie o código da seguinte forma:

<textarea id=. TextArea1 cols= 20 rows=2 class=ckeditor></textarea>

Se for um ambiente ASP.NET, você também pode usar o controle do lado do servidor <TextBox>

para copiar o código da seguinte forma:

<asp:TextBox ID=tbContent runat=server TextMode=MultiLine class=ckeditor></asp:TextBox>

Observe que class=ckeditor é adicionado ao controle.

3. Substitua o controle correspondente pelo código do editor.

Copie

o código da seguinte forma:

<script type=text/javascript>

CKEDITOR.replace('TextArea1');

ambiente <TextBox >

CKEDITOR.replace('tbContent');

Se

o controle <TextBox> estiver na página master, escreva

CKEDITOR.replace

('<%=tbContent.ClientID.Replace(_,$) %>')

;

código O código é o seguinte:

A configuração do ckeditor está concentrada no arquivo ckeditor/config.js A seguir estão alguns parâmetros de configuração comumente usados:

// Idioma da interface, o padrão é 'en'

config.language = 'zh-cn. ';

/// Definir largura e altura

config.width = 400;

config.height = 400;

// Existem três estilos de editor: 'kama' (padrão), 'office2003', 'v2'

config.skin = 'v2'

;

config.uiColor = '#FFF';

// Barra de ferramentas (Básico'Básico', Completo'Completo', Personalizado) plugins/toolbar/plugin.js

config.toolbar = 'Básico';

config.toolbar = 'Full';

Isto irá corresponder:

config.toolbar_Full = [

['Source','-','Save','NewPage','Preview','-', 'Modelos'],

['Cortar','Copiar','Colar','ColarTexto','ColarDaPalavra','-','Imprimir', 'Verificador Ortográfico', 'Scayt'],

['Desfazer','Refazer','-','Localizar','Substituir','-','SelecionarTudo','RemoverFormatação'],

['Formulário', 'Caixa de seleção ', 'Rádio', 'TextField', 'Textarea', 'Selecionar', 'Botão', 'ImageButton', 'HiddenField'],

'/',

['Negrito','Itálico','Sublinhado','Strike','-','Subscrito','Sobrescrito'],

['NumberedList','BulletedList','-','Outdent' ,'Indent','Blockquote'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

['Link','Desvincular','Âncora'],

['Imagem','Flash','Tabela','HorizontalRule','Smiley','SpecialChar','PageBreak'],

'/',

[' Estilos','Format','Font','FontSize'],

['TextColor','BGColor']

];

//Se a barra de ferramentas pode ser recolhida

config.toolbarCanCollapse = true;

//A localização da barra de ferramentas

config.toolbarLocation = 'top'; //Opcional: bottom

//Se a barra de ferramentas é expandida por padrão

config.toolbarStartupExpanded = true

/ /Cancelar Arrastar e soltar para alterar a função de tamanho plugins/resize/plugin.js

config.resize_enabled = false

//Alterar a altura máxima do tamanho

config.resize_maxHeight = 3000;

//Alterar a largura máxima do tamanho

config.resize_maxWidth = 3000;

//Alterar a altura mínima do tamanho

config.resize_minHeight = 250;

//

Alterar a largura mínima do tamanho

config.resize_minWidth = 750;

formulário que contém este editor Quando, se deseja atualizar automaticamente os dados no elemento

config.autoUpdateElement = true;

// Defina se deve usar um diretório absoluto ou um diretório relativo, se vazio, significa um diretório relativo

config.baseHref = ''

// Valor do índice z do editor

config.baseFloatZIndex = 10000;

// Definir teclas de atalho

config.keystrokes = [

[ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], // Obter foco

[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], //Foco do elemento

[CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //Menu de texto

[ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], // Desfazer

[ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //Refazer

[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'refazer' ], //

[ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //Link

[ CKEDITOR.CTRL + 66 /*B*/, 'negrito' ], // Negrito

[ CKEDITOR.CTRL + 73 /*I*/, 'itálico' ] , //Itálico

[ CKEDITOR.CTRL + 85 /*U*/, 'sublinhado' ], // Sublinhado

[ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]

]

//Definir teclas de atalho pode entrar em conflito com as teclas de atalho do navegador plugins/keystrokes/plugin.js

config.blockedKeystrokes = [

CKEDITOR.CTRL + 66 /*B*/,

CKEDITOR.CTRL + 73 /*I* / ,

CKEDITOR.CTRL + 85 /*U*/

]

//Defina o valor da cor de fundo do elemento no editor plugins/colorbutton/plugin.js.

config.colorButton_backStyle = {

element : 'span',

estilos : { 'background-color' : '#(color)' }

}

//Defina o valor da cor de primeiro plano plugins/colorbutton/plugin.js

config.colorButton_colors = '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,B22222,A52A2A,DAA520,

006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,

A9A9A9,FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,FFF0F5,

FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF'

//Se exibir outras opções de cores ao selecionar uma cor plugins/colorbutton/ plug-in .js

config.colorButton_enableMore = false

//O valor padrão da cor de primeiro plano do bloco é definido plugins/colorbutton/plugin.js

config.colorButton_foreStyle = {

element : 'span',

estilos : { 'color' : '#(color)' } }

;

// /Os arquivos CSS que precisam ser adicionados podem ser adicionados aqui usando caminhos relativos e caminhos absolutos para o site

config.contentsCss = './contents.css';

//Direção do texto

config.contentsLangDirection = 'rtl'; //Da esquerda para a direita

//Se você não quiser configurar o arquivo de configuração do CKeditor, deixe-o em branco

CKEDITOR.replace( 'myfiled', { customConfig : '. /config.js' } );

//Cor de fundo da caixa de edição da interface plugins/dialog/plugin.js

config.dialog_backgroundCoverColor = 'rgb(255, 254, 253)'; //Pode ser definido para referência

config.dialog_backgroundCoverColor = 'white' //Padrão

//O valor de opacidade do fundo deve estar entre: 0,0~1,0 plugins/dialog/plugin.js

config.dialog_backgroundCoverOpacity = 0,5

// Mover ou A unidade de distância de adsorção da borda ao alterar o elemento: pixel plugins/dialog/plugin.js

config.dialog_magnetDistance = 20;

//Se deve negar verificação ortográfica local e prompts. O padrão é negar. Atualmente apenas o Firefox e o Safari suportam plugins/wysiwygarea/

plugin.js

.

Atualmente apenas o Firefox suporta plugins/wysiwygarea /plugin.js

config.disableNativeTableHandles = true; //O padrão não está habilitado

//Se habilitar a função de alteração do tamanho de imagens e tabelas config.disableObjectResizing = true;

config.disableObjectResizing = false //O padrão está habilitado

//Definir o tipo de documento HTML

config.docType = '<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22

';

//Se renderizar a área de edição plugins/editingblock/plugin.js

config.editingBlock = true;

rótulo gerado pelo

EnterMode = CKEDITOR.ENTER_P; //Opcional: CKEDITOR.ENTER_BR ou CKEDITOR.ENTER_DIV

//Se usar entidades HTML para saída plugins/entities/plugin.js

config.entities = true;

//Definir mais entidades plugins/entities/plugin.js

config.entities_additional = '#39'; //onde # é substituído &

//Se converter alguns caracteres difíceis de exibir em caracteres HTML correspondentes plugins/entities/plugin.js

config.entities_greek = true;

Se converter alguns caracteres latinos em HTML; plugins/entities/plugin.js

config.entities_latin

= true;

//Se deseja converter alguns caracteres especiais em caracteres ASCII, como Isto é chinês: 汉语.Converter para Isto é chinês: 中文.

= false ;

//Adicionar novo componente

config.extraPlugins = 'myplugin'; //Apenas exemplo não padrão

//Usar cor de destaque ao pesquisar plugins/find/plugin.js

config.find_highlight = {

element : 'span',

styles : { 'background-color' : '#ff0', 'color' : '#00f' }

};

//Nome da fonte padrão plugins/font/plugin.js

config.font_defaultLabel = 'Arial';

//Caracteres chineses comumente usados ​​podem ser adicionados ao conjunto de caracteres ao editar fontes: Song, Kai, Hei, etc. plugins/font/plugin.js

config.font_names

= 'Arial;Times New Roman;Verdana';

de texto plugins/ font/plugin.js

config.font_style = {

elemento: 'span',

estilos: { 'font-family': '#(family)' },

substituições: [ {elemento: 'font', atributos : { 'face' : null } } ]

};

//Tamanho da fonte

padrão plugins/font/plugin.js

config.fontSize_defaultLabel = '12px';

.js

config.fontSize_sizes ='8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;2 0/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px'

//Estilos usados ​​ao definir o tamanho da fonte plugins/font/plugin.js

config.fontSize_style = {

element : 'span',

estilos : { 'font-size' : '#(size)' },

overrides : [ { element : ' font', atributos : { 'size' : null } } ]

}

//Se deve forçar o conteúdo copiado a remover o formato plugins/pastetext/plugin.js

config.forcePasteAsPlainText =false //Não remova

//Se deve forçar e substituir &plugins/htmldataprocessor/plugin.js

config.forceSimpleAmpersand = false;

//Formatar a tag de endereço plugins/format/plugin.js

config.format_address = { element : 'address' , atributos: {class: 'styledAddress' } };

//Formatar tags DIV automaticamente plugins/format/plugin.js

config.format_div = { element: 'div', atributos: { class: 'normalDiv' } };

//Formatar automaticamente a tag H1 plugins/format/plugin.js

config.format_h1 = {elemento: 'h1', atributos: { class: 'contentTitle1' } };

//Formatar tags H2 automaticamente plugins/format/plugin.js

config.format_h2 = {elemento: 'h2', atributos: {classe: 'contentTitle2' } };

//Formatar tags H3 automaticamente plugins/format/plugin.js

config.format_h1 = {elemento: 'h3', atributos: {class: 'contentTitle3' } };

//Formatar tags H4 automaticamente plug-ins/ format/plugin.js

config.format_h1 = {elemento: 'h4', atributos: {classe: 'contentTitle4' } };

//Formatar automaticamente tags H5 plugins/format/plugin.js

config.format_h1 = {elemento: 'h5', atributos: {class: 'contentTitle5' } }

//Formatar automaticamente tags H6 plugins/format /plugin.js

config. format_h1 = {elemento: 'h6', atributos: {classe: 'contentTitle6' } };

//Formatar automaticamente a tag P plugins/format/plugin.js

config.format_p = { element : 'p', atributos : { class : 'normalPara' } }

//Formatar automaticamente a tag PRE plugins/format /plugin.js

config.format_pre = {elemento: 'pré', atributos: {classe: 'código' } };

//Nomes de tags separados por ponto e vírgula são exibidos na barra de ferramentas plugins/format/plugin.js

config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div'

//Se você use o modo de edição html completo, o código fonte incluirá: <html><body></body></html> e outras tags

config.fullPage = false;

caracteres

serão representados por plugins/wysiwygarea/plugin.js

config.ignoreEmptyParagraph = true;

ao limpar o atributo link na caixa de atributos de imagem Tag plugins/image/plugin.js

config.image_removeLinkByEmptyURL = true;

//Um conjunto de nomes de tags separados por vírgulas, exibidos no aninhamento hierárquico no canto inferior esquerdo plugins/menu/plugin.js

config.menu_groups ='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor, link ,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea'

//Atraso na exibição do submenu, unidade: ms plugins/menu/plugin.js

config.menu_subMenuDelay = 400;

conteúdo

no editor plugins/newpage/plugin.js

config.newpage_html = '';

, se deseja formatar e remover texto plugins/pastefromword/plugin.js

config.pasteFromWordIgnoreFontFace = true; //O padrão é ignorar o formato

//Se usar tags como <h1><h2> para modificar ou substituir o conteúdo colado do documento do Word plugins/pastefromword/plugin.js

config.pasteFromWordKeepsStructure

= false;

colando conteúdo do Word Se deseja remover o formato plugins/pastefromword/plugin.js

config.pasteFromWordRemoveStyle = false;

//Formatar o conteúdo HTML de saída correspondente ao tipo de linguagem de fundo. O padrão é vazio

config.protectedSource.push( /</?[/s/S]*?/?>/g )

; protectedSource.push( //g ); // Código ASP

config.protectedSource.push( /(]+>[/s|/S]*?<//asp:[^/>]+>)|(] + //>)/gi); // Código ASP.Net

//O rótulo inserido ao entrar: shift+Enter

config.shiftEnterMode = CKEDITOR.ENTER_P; //Opcional: CKEDITOR.ENTER_BR ou CKEDITOR.ENTER_DIV

//Caracter de substituição de expressão opcional plugins/smiley/plugin

config. smiley_descrições = [

':)', ':(', ';)', ':D', ':/', ':P',

'', '', '', ''

, ' ', '', '', ';(', '', '', '', '',

'', ':beijo' , '' ];

//Imagens de expressão correspondentes plugins/smiley/plugin.js

config.smiley_images = [

'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif',

'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif',

'devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif',

'broken_heart.gif','kiss.gif','envelope .gif'];

//O endereço dos plugins de emoticons/smiley/plugin.js

config.smiley_path = 'plugins/smiley/images/';

Quando

a página carrega, se a caixa de edição recebe foco imediatamente plugins/editingblock/plugin.js plugins/editingblock/plugin.js

.

Como editar o código-fonte e os plug-ins WYSIWYG e wysiwyg/editingblock/plugin.js

config.startupMode ='wysiwyg';

//Se deve exibir a borda do quadro ao carregar plugins/showblocks/plugin.js

config.startupOutlineBlocks

= false;

//Se deve carregar o arquivo de estilo plugins/stylescombo/plugin.js

. a seguir estão opcionais

config.stylesCombo_stylesSet

= 'mystyles';

'mystyles:/editorstyles/styles.js';

config.stylesCombo_stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';

//Valor de índice inicial

config.tabIndex

= 0;

o usuário digita TAB, o número de espaços passados ​​pelo editor, () quando o valor é 0, o foco sairá da caixa de edição plugins/tab/plugin.js

config.tabSpaces = 0;

//O modelo padrão plugins/templates/plugin.js.

config.templates

= 'default';

//Arquivos de modelo separados por vírgula plugins/templates/plugin.js.

templates/templates/default.js' ]

//Ao usar templates, o conteúdo editado será substituído se a caixa plugins/templates/plugin.js estiver marcada

config.templates_replaceContent = true;

//Tema

config.theme = 'default';

//

O número de etapas de desfazer gravação plugins/undo/plugin.js

config.undoStackSize =20;

seleção do ckfinder esteja correta.

//CKFinder.SetupCKEditor(null, '/ckfinder/');