As versões mais recentes do CKEditor e do CKFinder podem ser baixadas no site oficial (http://cksource.com).
Coloque os dois recursos acima no diretório raiz do site: /CKEditor (aqui na versão 3.6.2, você precisa colocar a pasta _Samples\ckeditor na pasta comprimida) e /CKFinder (insensível a maiúsculas, você pode colocar a pasta aqui diretamente). )
Observe, aqui às vezes há um erro na geração. Por exemplo, existem tags duplicadas do tipo AssemblyTitle, principalmente porque o site tem mais de uma AssemblyInfo.cs para deletar o arquivo baixado. Ou delete a pasta _source. Se você tiver alguma dúvida aqui, pode me contatar: meu QQ: 515072775
Usando o CKEditor em uma página:
<textarea cols="80" id="prcontent" name="content" linhas="50"> Olá, seu uso foi bem-sucedido! </textarea>
<scrip remove ttype="text/javascrip remove t" >
CKEDITOR.replace('content', { height:200, width: 520 });
. .</scrip去掉t>
O CKEditor não vem com função de upload, então precisa ser enviado com o CKFinder
Passo 1: O site precisa referenciar o dll do CKFinder (diretório: /CKFinder/bin/Release/CKFinder.dll)
Passo 2: Configure o config.js do CKEditor (diretório: /CKEditor/config.js) na função CKEDITOR.editorConfig, e funções desnecessárias podem ser removidas
CKEDITOR.editorConfig = function(config) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; Não escreva "~/ckfinder/..." ou "/ckfinder/..."
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html? Tipo=Imagens';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html? Tipo=Flash';
config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
config.filebrowserWindowWidth = '800'; A configuração de tamanho do pop-up do servidor de navegação
config.filebrowserWindowHeight = '500';
}
CKFinder.setupCKEditor(null, '.. /caçador/'); Note que o caminho do localizador corresponde à posição real
Configuração do CKFinder:
Abra o controle de usuário config.ascx em "ckfinder\" e mude seu caminho BaseUrl:
BaseUrl = "~/ckfinder/userfiles/"; ou BaseUrl = "ckfinder/userfiles/";
Aqui vai um ponto extra: é útil testar no IIS. Caso contrário, se o upload não der certo, você vai achar que há algo errado com a configuração.
O CKEditor tem uma função de upload após a configuração ser concluída, mas e se o arquivo de imagem for o nome original e quiser mudar para um nome aleatório? Depois olhe para o terceiro passo.
Passo 3: Modificar o código-fonte do CKFinder. O CKFinder vem com seu próprio código-fonte, diretório: /CKFinde/_source
Crie um novo projeto atual no VS para CKFinde/_source/CKFinder.Net.sln, o arquivo da solução baixado aqui pode não abrir no VS2008, você pode escolher adicionar um novo projeto ou usar uma versão mais recente do VS para abri-lo.
1) Abra o arquivo /Settings/ConfigFile.cs
Localize 27 linhas e adicione um atributo: bool público RandomReName; Renomeie aleatoriamente
Localize 67 linhas e atribua um valor à propriedade agora: RandomReName = true; O valor padrão é verdadeiro
Salvar o arquivo fechado
2) Abra o arquivo /Connector/Config.cs
Localize as 62 linhas, adicione um atributo:
bool público RandomReName
{
get { returnSettings.ConfigFile.Current.RandomReName; }
}
Salvar o arquivo fechado
3) Abrir o arquivo /Connector/CommandHandlers/FileUploadCommandHandler.cs
Localize a linha 64 e adicione um código de sentença:
if ( Config.Current.RandomReName) // Use um nome aleatório
sFileName =DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." +sExtensão;
Salvar o arquivo fechado
4) Regenerar o projeto, sobrescrever /ckfinder/_source/bin/Debug/CKFinder.dll /ckfinder/bin/Release/CKFinder.dll ou remover as referências previamente adicionadas ao projeto do site e remover novamente a dll do projeto CKFinder.Net
Último passo: Abrir /ckfinder/config.ascx
Localize 40 linhas e adicione um atributo: (Na verdade, você pode adicionar isso ou não, porque havia um valor padrão definido antes, mas ele deve ser definido como falso ao usar o nome original)
//上传完毕后使用随机文件名
RandomReName = true;
Salvar fechado
Ok, agora que a configuração foi bem-sucedida, o CKEditor pode ter uma função de upload. As configurações de outras funções continuarão sendo estudadas quando você tiver tempo~
Mais um lembrete: as pastas CKEditor e CKFinder têm muitas coisas desnecessárias, como nomes com sublinhados, projetos .net não precisam de php, asp.
Se houver um erro no upload de um arquivo: O arquivo não pode ser visualizado por razões de segurança. Por favor, entre em contato com o administrador do sistema e verifique o perfil do CKFinder.
Você precisa modificar o arquivo config.ascx
override público bool CheckAuthentication()
{
reture false;
}
Modificado para:
override público bool CheckAuthentication()
{
Validação de forma
returnRequest.IsAuthenticated;
}
3. Aplicar o controle CKEditor na página [dois métodos, a e b]
[R: Citando o INSTALL.html no pacote comprimido]
Se você quiser integrar o CKEditor à sua página de ASP.NET, siga os passos descritos abaixo.
1. Acesse o site oficial de download do CKEditor e baixe as versões mais recentes tanto do CKEditor 3.x quanto do CKEditor para ASP.NET Control.
2. Descompacte ambos os pacotes de instalação para a localização desejada Remova n.
3. Adicione uma referência ao CKEditor para ASP.NET Controle no seu site.
No Visual Studio, use o comando Add Reference e navegue até o arquivo bin\Release\CKEditor.NET.dll do pacote de instalação descompactado CKEditor for ASP.NET instalado. Você também pode copiar manualmente o arquivo DLL para a pasta bin da sua aplicação.
4. Copie os arquivos do editor desempacotados do pacote de instalação CKEditor 3.x e cole no diretório de aplicativos do seu site.
5. Registre o CKEditor para ASP.NET Controle em sua página:
<%@ Assemblagem de registradores="CKEditor.NET" namespace="CKEditor.NET" tagPrefix="CKEditor" %>
6. Insira uma instância CKEditor no corpo da página:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>
【b】
1. <head>Adicionar a referência correspondente ao js à página:
<scrip remove t type="text/javascrip remove t" language="javascrip remove t" src="ckfinder/ckfinder.js"></scrip去掉t>
<scrip remove t type="text/javascrip remove t" linguagem="javascrip remove t" src="ckeditor/ckeditor.js"></scrip去掉t>
2. Depois, <body>adicione o seguinte código ao local onde o controle precisa ser colocado, e existem os seguintes métodos de uso:
(1) Adicionar o atributo de classe especificado ao controle
<textarea id="textarea1" nome="editor1" class="ckeditor">olá!</textarea>
Controles do servidor:
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>
(2) Injetar código js - aqui o código js é melhor escrito após o controle, ou <head>dentro dele
<textarea id="textarea1" nome="editor1">olá!</textarea>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('editor1', { altura:400, largura:800 });
. .</scrip去掉t>
Controles do servidor:
<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('<%=mckeditor. ClientID %>');
. .</scrip去掉t>
=============================================================================================================
Segunda referência:
asp.net o método de configuração do ckeditor 3.0.1 e ckfinder_aspnet_1.4.1.1
De acordo com os prompts do http://ckeditor.com.cn/docs/, o CKEditor está configurado na página web e, quando visualizado no navegador, sinto que a interface do CKEditor é realmente muito bonita, mas quando quis tentar a função de upload da imagem, não vi o botão para enviar a imagem.
Continuando a busca online, a conclusão foi que "o CKEditor não possui uma função de upload em si, e ela precisa ser integrada ao CKFinder para alcançar a função de upload".
Depois, baixe o CKFinder 1.4.1.1 para Asp.net, descompacte e coloque a pasta ckfinder na diretório raiz do projeto – porque muitas fontes na Internet dizem que é melhor colocar CKEditor e CKFinder no mesmo diretório de nível. E dessa forma, teremos mais duas pastas no nosso projeto sem motivo. Eu mesmo tenho um fetiche por limpeza de código, acho,
Deixe uma pasta como sinal de respeito ao autor, isso já será suficiente. Ficar com dois me deixaria muito desconfortável.
Antes de integrarmos o CKFinder ao CKEditor, também precisamos configurar um pouco o CKFinder. Amigos inteligentes deveriam pensar facilmente que, como é um plug-in para upload de arquivos, a maioria das configurações são o caminho para enviar arquivos.
O caminho padrão de upload do CKFinder é a pasta userfiles em seu próprio diretório, mas coloquei o CKFinder na pasta CKEditor; se eu armazenar a imagem nos userfiles, o sistema precisa pular a pasta de três camadas para encontrar o arquivo ou imagem, então pretendo enviar a imagem para a pasta upFile no diretório raiz do projeto.
Para implementar essa função, você precisa modificar o arquivo config.ascx em CKFinder para mudar BaseUrl = "/ckfinder/userfiles/" para BaseUrl = "~/upFile/". Depois, corte os arquivos CKFinder.dll da pasta CKFinder/bin para a pasta bin do projeto do sistema. Ou introduza CKFinder.dll no projeto adicionando referências.
Em seguida, podemos usar o CKEditor com upload de arquivos:
Coloque a pasta CKFinder na pasta CKEditor e, na página, importe os arquivos js de ambos:
<scrip remove tsrc="http://www.cnblogs.com/ckeditor/ckeditor.js" type="text/javascrip remove t"></scrip去掉t>
<scrip remove t src="http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js" type="text/javascrip remove t"></scrip去掉t>
Existem duas maneiras de referenciar o editor a um controle:
Uma delas é usar a área de texto de controle do cliente:
<textoarea linhas="20" cols="40" nome="txtConteúdo" id="txtConteúdo"></textarea>
<scrip remove t type="text/javascrip remove t" >
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor (editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');
. .</scrip去掉t>
A segunda é usar a caixa de texto de controle do lado do servidor:
<asp:TextBox id="txtContent" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor (editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</scrip去掉t>Pessoalmente, acho que, como é um programa asp.net, então use os controles do lado do servidor. Embora rode um pouco mais devagar que os controles do cliente, o desenvolvimento é um pouco mais rápido. E, como programadores, sempre gostamos de tentar todas as possibilidades antes de escolher a que gostamos.
Na verdade, você também pode atribuir valores ao controle sem usar Text='<%# Bind("info") %>', e usá-lo diretamente no backcode
this.txtContent.Text="Valor inicial"
Também é possível. Você também pode usar o código a seguir diretamente para obter o valor:
Código CKFinder e CKEditor. Quando executo a página diretamente com o editor, o compilador dá o seguinte erro:
string content=this.txtContent.Text
Nota: O atributo TextMode="MultiLine" é essencial, caso contrário o valor será nulo.
Eu não otimizei antes de depurar o programa
O tipo ou nome do namespace "ControlDesigner" não existe no namespace "System.Web.UI.Design" (falta referência assembly?)
O erro está na linha 19 de ckeditor\ckfinder\_source\FileBrowserDesigner.cs, então simplifique o arquivo:
O primeiro passo é simplificar o ckeditor: exclua as pastas _samples e _source, e apenas três arquivos de idioma podem ser mantidos no diretório lang: en.js, zh.js e zh-cn.js;
O segundo passo é simplificar o ckfinder: exclua as pastas _samples e _source, e mantenha apenas os arquivos de idiomas en.js, zh.js e zh-cn.js no diretório lang.
Note a segunda linha de código js aqui: CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/'); , onde o "http://www.cnblogs.com/ckeditor/ckfinder/" é o caminho relativo do ckfinder até a página atual,
Por favor, não copie e cole o código diretamente, caso contrário, o seguinte erro pode aparecer ao enviar imagens:
Descrição: HTTP 404. O recurso que você está procurando (ou uma de suas dependências) pode ter sido removido, ou seu nome mudou, ou está temporariamente indisponível. Por favor, verifique a URL a seguir e certifique-se de que está escrita corretamente.
URL solicitado: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
Então, se você não quiser colocar o ckfinder na pasta do ckeditor como eu fiz, tudo bem, desde que preencha o caminho corretamente aqui.
Achei que isso seria considerado todo o trabalho, mas quando enviei a imagem, apareceu o seguinte prompt:
Por razões de segurança, o arquivo não pode ser visualizado. Por favor, entre em contato com o administrador do sistema e verifique o perfil do CKFinder.
Não há como, como diz o ditado, coisas boas serem difíceis de comer. Só posso perguntar ao melhor professor - Baidu. Copie as informações do prompt acima para a caixa de busca do Baidu e, depois de entrar no carro, encontrei um post sobre o PHP, integração com o PHP. Veja como fazer:
Modificar o arquivo config.ascx sob CKFinder para alterar o valor de retorno da função pública de override bool CheckAuthentication() de return false para return true.
Testei novamente, a imagem foi enviada com sucesso! |
Publicado em 18/04/2015 19:11:55
|
|
|
