Baixe o CKeditor no endereço:
http://ckeditor.com/
Faça o download no botão indicado pela seta. Na página de download, escolha a versão 3.6.5, sobre a qual vamos descrever o processo de configuração.
Descompacte o arquivo zip obtido no download.:
Estrutura do diretório:
Debaixo do diretório anterior existe o diretório ckeditor, e debaixo dele a estrutura mostrada abaixo e à direita:
O diretório de exemplos é o _samples.
Os arquivos que vamos criar são os dois apontados pelas setas.
Copiamos o arquivo replacebyclass.html para replacebyclass2.html, traduzimos as mensagens e retiramos o que não interessava, além de colocar um evento onSubmit para o formulário do HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Replace Textareas by Class Name — CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<script type="text/javascript">
function formataSubmit(obj){
var Texto;
Texto = obj.editor1.innerText;
Texto = Texto.replace(/\n|\r|\t/g,"");
return true;
}
</script>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="samples">
CKEditor Sample — Substitui Elementos Textarea pelo nome da Class(e)
</h1>
<div class="description">
</div>
<!-- Esta <div> mostra mensagens de alerta do editor. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requer JavaScript para execução</strong>.
</p>
</noscript>
</div>
<!-- Este form prepara o HTML para envio do conteúdo para alguma script ASP que irá processá-lo -->
<form action="RecebeTextarea.asp" method="post" onSubmit="return formataSubmit(this);">
<p>
<label for="editor1">
Editor 1:</label>
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. Você está usando <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<!-- Créditos -->
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright © 2003-2012, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>
Retiramos o excesso de códigos que poderiam confundir os desenvolvedores, e incluímos o código javascript que retira os caracteres "new line", "line feed" e tabulações no evento onSubmit do formulário.
Cole este código em um editor, salve o HTML e execute.
Muito obrigado Be pela sua ajuda esta precisando colocar este em um site e o codigo que achei no proprio site do ckeditor é muito complexo. Novamente muito obrigado
ResponderExcluir