|
|
Publicado em 17/04/2015 16:20:20
|
|
|
Após dois dias, o Ckeditor e o Ckfinder finalmente integraram a função de upload de imagem.
Aqui vou escrever sobre minha experiência.
Para implementar o módulo de edição de notícias, meu irmão me apresentou ao Ckeditor.
Primeiro, baixe a versão .net do Ckeditor no http://ckeditor.com/, estou usando a ckeditor_aspnet_3.6.4 aqui.
Depois de baixar, abra o zip. Mas nem tudo aqui é útil, então, pode colocar
onde sample é um exemplo, e source é o arquivo source
, diretamente deletado
, o objetivo é reduzir o volume do editor. Depois, copie toda a pasta diretamente para o diretório raiz do site. citação
ckeditro.net.dll
No cabeçalho da página onde você precisa usar o controle do editor:
<scrip remove t src="/ckeditor/ckeditor.js" type="text/javascrip remove t" ></scrip去掉t>
<scrip remove t type="text/javascrip remove t" >
window.onload = função () {
CKEDITOR.replace("txtContent");
}
. .</scrip去掉t>
Corpo
：
<CKEditor:CKEditorControl ID="CKEditor1" BasePath="~/ckeditor/" runat="server">
</CKEditor:CKEditorControl>
O código de fundo também é simples:
artigo. ARTICLECONTENT = CKEditor1.Text; Isso atribui o conteúdo editado ao campo ARTICLECONTENT da classe modelo do artigo.
E com isso, meu editor está concluído com sucesso!
Mas um grande problema surgiu novamente, que é que o Ckeditor não tem a capacidade de enviar imagens, o que realmente é um problema. Como fazer isso? Vá para Baidu.
Assim que entrei online, percebi que existem várias formas de resolver, alguns dizem que é criar uma função de upload de uma imagem fora do editor, e então passar o caminho do link do servidor para o cursor atual do editor quando for passado para o servidor, então implementar, fazer isso, e de repente percebo que, ao clicar na imagem externa do upload, o cursor não está no editor, o que devo fazer??? Pense bem, mas com o conhecimento atual, eu não consigo, só posso desistir. (Se algum deus souber, deixe uma mensagem para me avisar, obrigado); Alguns dizem que você escreve seu próprio JS para implementar essa função, e depois a conecta ao editor para completá-la, e existem muitos desses artigos:
1、 http://www.cnblogs.com/lts8989/archive/2011/08/04/2127326.html
2、 http://www.cnblogs.com/striiiiing/archive/2012/08/15/2640792.html
Acho que esses dois artigos são muito bons, mas meu conhecimento de JS é fraco, então tentei escrevê-lo, mas ainda assim não consegui implementá-lo com sucesso.
Bem, parece que só posso usar o Ckeditor para integrar com o Ckfinder, e eu realmente não queria usar o Ckfinder porque ele é carregado, o que não é bom!! Mas o que há de errado? É bom não estar no site oficial, fui direto aos recursos na Internet, bem, finalmente encontrei um que oferecia recursos muito detalhados (aqui gostaria de agradecer alguns irmãos!!) Site: http://download.csdn.net/download/q8347901/3887066 (Também há artigos introdutórios detalhados sobre Ckeditor e Ckfinder aqui, muito bons!) ）
Baixe o Ckfinder, depois copie o arquivo ckfinder.dll do diretório /bin para o diretório bin do site, copie o diretório ckfinder para o diretório raiz do site (você pode escolher outro caminho) e faça referência ao ckfinder.dll
Configure isso:
Se você está na página .aspx que deseja fazer o ckeditor, é o seguinte:
CKEDITOR.replace ('Caixa de texto que você deseja ativar a edição',
{
filebrowserBrowseUrl:'/ckfinder/ckfinder.html',//启用浏览功能
filebrowserImageBrowseUrl:'/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl:'/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl:'/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',
filebrowserImageUploadUrl:'/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl:'/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'
}
);
Claro, use o método de configuração global
Configure em config.js do plugin Ckeditor
config.filebrowserBrowseUrl="/ckfinder/ckfinder.html";
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";
Após a configuração, modifique o config.ascx no ckfinder
CheckAuthentication()in Return true, caso contrário não será enviado e exige verificação
O caminho para BaseUrl em SetConfig() é o caminho para upload
Além disso, depois de prestar atenção, não esqueça de consultar o arquivo BLL no ckfinder
Bem, sua integração e o upload das imagens foram concluídos com sucesso.
Alternativamente, se quiser esconder as abas Hyperlinks e Avançado no painel Imagens, pode fazer isso nos plugins/image/diálogos/image.js do CKEditor.
Procure por "Link" e "advanced" em "id:'Link'" e "id:'advanced'" e adicione "hidden:true", apenas faça isso.
Se você quer melhorar a aparência e otimizar seu site, confira alguns dos artigos a seguir.
1、 http://www.cnblogs.com/netec/archive/2009/11/02/ckeditor_ckfinder.html
2、 http://blog.csdn.net/lulu_jiang/article/details/5532345
3、 http://blog.csdn.net/hzq1074/article/details/5893475 |
Anterior:asp.net Editor de Texto (FCKeditor)Próximo:O SQL Server determina se existem bancos de dados, tabelas, colunas e vistas
|
