Las últimas versiones de CKEditor y CKFinder pueden descargarse desde la página web oficial (http://cksource.com).
Pon los dos recursos anteriores en el directorio raíz de la web: /CKEditor (aquí en la versión 3.6.2, tienes que poner la carpeta _Samples\ckeditor en la carpeta comprimida) y /CKFinder (insensible a mayúsculas, puedes poner la carpeta aquí directamente). )
Ten en cuenta que aquí a veces hay un error en la generación. Por ejemplo, existen etiquetas duplicadas tipo AssemblyTitle, principalmente porque la web tiene más de una AssemblyInfo.cs para eliminar el archivo descargado. O borra la carpeta _source. Si tienes alguna pregunta aquí, puedes contactarme: mi QQ: 515072775
Usando CKEditor en una página:
<textarea cols="80" id="prcontent" nombre="contenido" filas="50"> ¡Hola, tu uso ha sido exitoso! </textarea>
<scrip remove ttype="text/javascrip remove t" >
CKEDITOR.replace('content', { height:200, width: 520 });
. .</scrip去掉t>
CKEditor no viene con función de subida, por lo que debe subirse con CKFinder
Paso 1: La web necesita referenciar la dll de CKFinder (directorio: /CKFinder/bin/Release/CKFinder.dll)
Paso 2: Configura la config.js CKEditor (directorio: /CKEditor/config.js) en la función CKEDITOR.editorConfig, y se pueden eliminar funciones innecesarias
CKEDITOR.editorConfig = function(config) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; No escribas "~/ckfinder/..." ni "/ckfinder/..."
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html? Tipo=Imágenes';
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'; La configuración de tamaño de la ventana emergente Browse Server
config.filebrowserWindowHeight = '500';
}
CKFinder.setupCKEditor(null, '.. /cazador de caza/'); Obsérvese que la trayectoria del localizador corresponde a la ubicación real
Configuración de CKFinder:
Abre el control de usuario config.ascx bajo "ckfinder\" y cambia su ruta BaseUrl:
BaseUrl = "~/ckfinder/userfiles/"; o BaseUrl = "ckfinder/userfiles/";
Aquí va un punto extra: es útil para probar en IIS. De lo contrario, si la subida no tiene éxito, pensarás que hay algún problema en la configuración.
CKEditor tiene una función de subida después de completar la configuración, pero ¿qué pasa si el archivo de imagen es el nombre original y quiere cambiarlo a un nombre aleatorio? Luego mira el tercer paso.
Paso 3: Modificar el código fuente de CKFinder. CKFinder viene con su propio código fuente, directorio: /CKFinde/_source
Crea un nuevo proyecto actual en VS a CKFinde/_source/CKFinder.Net.sln, el archivo de solución descargado aquí puede no abrirse en VS2008, puedes elegir añadir un nuevo proyecto o usar una versión más reciente de VS para abrirlo.
1) Abre el archivo /Settings/ConfigFile.cs
Localiza 27 filas y añade un atributo: bool público RandomReName; Renombrar aleatoriamente
Localiza 67 filas y asigna un valor a la propiedad ahora mismo: RandomReName = true; El valor por defecto es verdadero
Guardar el archivo cerrado
2) Abre el archivo /Connector/Config.cs
Localiza las 62 filas, añade un atributo:
bool público RandomReName
{
get { returnSettings.ConfigFile.Current.RandomReName; }
}
Guardar el archivo cerrado
3) Abrir el archivo /Connector/CommandHandlers/FileUploadCommandHandler.cs
Localiza la línea 64 y añade un código de sentencia:
if ( Config.Current.RandomReName) // Usa un nombre aleatorio
sNombreArchivo =FechaTiempo.Ahora.ToString("yyyyMMddHHmmssfff") + "." +sExtensión;
Guardar el archivo cerrado
4) Regenerar el proyecto, sobrescribir /ckfinder/_source/bin/Debug/CKFinder.dll /ckfinder/bin/Release/CKFinder.dll o eliminar las referencias añadidas previamente al proyecto web y volver a eliminar la dll del proyecto CKFinder.Net
Último paso: Abrir /ckfinder/config.ascx
Localiza 40 líneas y añade un atributo: (De hecho, puedes añadirlo o no, porque antes había un valor predeterminado establecido, pero debe estar configurado como falso al usar el nombre original)
//上传完毕后使用随机文件名
RandomReName = true;
Guardar cerrado
Bien, ahora que la configuración ha funcionado, CKEditor puede tener una función de subida. Los ajustes de otras funciones seguirán estudiándose cuando tengas tiempo~
Un recordatorio más: las carpetas de CKEditor y CKFinder tienen muchas cosas innecesarias, como nombres con guiones bajos, los proyectos .net no necesitan php, asp.
Si hay un error al subir un archivo: El archivo no puede verse por razones de seguridad. Por favor, contacta con tu administrador de sistema y consulta el perfil de CKFinder.
Necesitas modificar el archivo config.ascx
Anulación pública bool CheckAuthentication()
{
reture false;
}
Modificado a:
Anulación pública bool CheckAuthentication()
{
Validación de la forma
returnRequest.IsAuthenticated;
}
3. Aplicar el control CKEditor en la página [dos métodos, a y b]
[R: Citando la INSTALL.html en el paquete comprimido]
Si quieres integrar CKEditor con tu página de ASP.NET, sigue los pasos que se describen a continuación.
1. Accede al sitio oficial de descarga de CKEditor y descarga las últimas versiones tanto de CKEditor 3.x como de CKEditor para ASP.NET Control.
2. Desempaquetar ambos paquetes de instalación hasta la ubicación deseada Eliminar n.
3. Añadir una referencia al CKEditor para ASP.NET Control en tu página web.
En Visual Studio utiliza el comando Añadir Referencia y navega hasta el archivo bin\Release\CKEditor.NET.dll desde el paquete de instalación descomprimido CKEditor for ASP.NET instalado. También puedes copiar manualmente el archivo DLL a la carpeta bin de tu aplicación.
4. Copia los archivos del editor desempaquetado del paquete de instalación CKEditor 3.x y pégalos en el directorio de aplicaciones de tu sitio web.
5. Registra el CKEditor para ASP.NET Control en tu página:
<%@ Ensamblaje de registro="CKEditor.NET" Espacio de nombres="CKEditor.NET" TagPrefix="CKEditor" %>
6. Insertar una instancia de CKEditor en el cuerpo de la página:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>
【b】
1. <head>Añadir la referencia js correspondiente a la 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" language="javascrip remove t" src="ckeditor/ckeditor.js"></scrip去掉t>
2. Luego, <body>añade el siguiente código a la ubicación donde debe colocarse el control, y existen los siguientes métodos de uso:
(1) Añadir el atributo de clase especificado al control
<id/área de texto="id_area1» nombre="editor1" clase="ckeditor">¡Hola!</textarea>
Controles del servidor:
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>
(2) Inyectar código js: aquí el código js se escribe mejor después del control, o <head>dentro de él
<textarea id="textarea1" nombre="editor1">¡Hola!</textarea>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('editor1', { height:400, width:800 });
. .</scrip去掉t>
Controles del 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 referencia:
asp.net el método de configuración de CKeditor 3.0.1 y ckfinder_aspnet_1.4.1.1
Según las indicaciones del http://ckeditor.com.cn/docs/, CKEditor está configurado en la página web, y cuando se ve en el navegador, siento que la interfaz de CKEditor es realmente muy bonita, pero cuando quise probar con gusto la función de subida de imágenes, no vi el botón para subir la imagen.
Continuando la búsqueda en línea, la conclusión fue que "CKEditor no tiene una función de subida en sí mismo, y necesita integrarse con CKFinder para lograr la función de subida".
Luego descarga CKFinder 1.4.1.1 para Asp.net, descomprime y pon la carpeta ckfinder en el directorio raíz del proyecto, porque muchas fuentes en Internet dicen que lo mejor es poner CKEditor y CKFinder en el mismo directorio de nivel. Y así, tendremos dos carpetas más en nuestro proyecto sin motivo alguno. Yo mismo tengo una fetiche por la limpieza de los códigos, creo,
Deja una carpeta como muestra de respeto al autor, eso será suficiente. Tener dos me haría sentir muy incómodo.
Antes de integrar CKFinder en CKEditor, también necesitamos configurar un poco CKFinder. Los amigos listos deberían pensar fácilmente que, al ser un complemento para subir archivos, la mayoría de las cosas que hay que configurar son las rutas para subir archivos.
La ruta de subida predeterminada de CKFinder es la carpeta userfiles en su propio directorio, pero he puesto CKFinder en la carpeta CKEditor; si guardo la imagen en los userfiles, el sistema tiene que saltarse la carpeta de tres capas para encontrar el archivo o la imagen, así que planeo subir la imagen a la carpeta upFile en el directorio raíz del proyecto.
Para implementar esta función, necesitas modificar el archivo config.ascx en CKFinder para cambiar BaseUrl = "/ckfinder/userfiles/" a BaseUrl = "~/upFile/". Luego, corta los archivos CKFinder.dll de la carpeta CKFinder/bin a la carpeta bin del proyecto del sistema. O introduce CKFinder.dll en el proyecto añadiendo referencias.
A continuación, podemos usar CKEditor con la subida de archivos:
Pon la carpeta CKFinder en la carpeta CKEditor y, en la página, importa los archivos js de ambas:
<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>
Hay dos formas de referir al editor a un control:
Una es usar el área de texto de control del cliente:
<filas del área de texto="20" cols="40" nombre="txtContenido" id="txtContenido"></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>
La segunda es usar el cuadro de texto de control del lado del 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>Personalmente, creo que, como es un programa asp.net, entonces usa los controles del lado del servidor. Aunque funciona un poco más lento que los controles del cliente, el desarrollo es algo más rápido. Y, como programadores, siempre nos gusta probar todas las posibilidades antes de elegir la que nos gusta.
De hecho, también puedes asignar valores al control sin usar Text='<%# Bind("info") %>', y usarlo directamente en el backcode
this.txtContent.Text="Valor inicial"
También es posible. También puedes usar el siguiente código directamente para obtener el valor:
Código CKFinder y CKEditor. Cuando ejecuto la página directamente con el editor, el compilador da el siguiente error:
cadena content=this.txtContent.Text
Nota: El atributo TextMode="MultiLine" es esencial, de lo contrario el valor será nulo.
No simplificé antes de depurar el programa
El tipo o nombre del espacio de nombres "ControlDesigner" no existe en el espacio de nombres "System.Web.UI.Design" (¿falta referencia de ensamblador?)
El error está en la línea 19 de ckeditor\ckfinder\_source\FileBrowserDesigner.cs, así que simplemente simplifica el archivo:
El primer paso es simplificar el editor ck: elimina las carpetas _samples y _source, y solo se pueden mantener tres archivos de idioma en el directorio lang: en.js, zh.js y zh-cn.js;
El segundo paso es simplificar ckfinder: elimina las carpetas _samples y _source, y solo conserva los archivos de en.js, zh.js y zh-cn.js idiomas en el directorio lang.
Fíjate en la segunda línea de código js aquí: CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/'); , donde el "http://www.cnblogs.com/ckeditor/ckfinder/" es la trayectoria relativa de ckfinder a la página actual,
Por favor, no copies y pegues el código directamente, de lo contrario puede aparecer el siguiente error al subir imágenes:
Descripción: HTTP 404. El recurso que buscas (o alguna de sus dependencias) puede haber sido eliminado, o su nombre cambiado, o estar temporalmente inaccesible. Por favor, revisa la siguiente URL y asegúrate de que está correctamente escrita.
URL solicitada: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
Así que, si no quieres poner el ckfinder en la carpeta ckeditor como hice yo, está bien, siempre que rellenes el path que cambia correctamente aquí.
Pensé que esto se consideraría todo el trabajo, pero cuando subí la imagen, apareció el siguiente prompt:
Por razones de seguridad, el archivo no puede ser visualizado. Por favor, contacta con tu administrador de sistema y consulta el perfil de CKFinder.
No hay manera, como dice el refrán, de que las cosas buenas sean difíciles de comer. Solo puedo preguntar al mejor profesor: Baidu. Copia la información anterior en el cuadro de búsqueda de Baidu y, tras entrar en el coche, encontré una publicación sobre la integración de PHP, ckeditor. Así es como se hace:
Modifica el archivo config.ascx bajo CKFinder para cambiar el valor de retorno de la función pública de override bool CheckAuthentication() de return false a return true.
Probé de nuevo, ¡la imagen se subió con éxito! |
Publicado en 18/4/2015 19:11:55
|
|
|
