Останні версії CKEditor і CKFinder можна завантажити з офіційного сайту (http://cksource.com).
Помістіть два вищезазначені ресурси у кореневу директорію сайту: /CKEditor (тут, у версії 3.6.2, потрібно помістити папку _Samples\ckeditor у стиснуту папку) та /CKFinder (без регістру, папку можна помістити безпосередньо сюди). )
Зверніть увагу, іноді тут трапляється помилка в поколінні. Наприклад, існують дублікати тегів типу AssemblyTitle, головним чином тому, що на сайті є кілька AssemblyInfo.cs для видалення завантаженого файлу. Або видаліть папку _source. Якщо у вас є питання тут, ви можете зв'язатися зі мною: мій QQ: 515072775
Використання CKEditor на сторінці:
<textarea cols="80" id="prcontent" name="content" rows="50"> Вітаю, ваше використання було успішним! </textarea>
<scrip видалити ttype="text/javascrip видалити t" >
CKEDITOR.replace('content', { height:200, width: 520 });
</scrip去掉t>. . .
CKEditor не має функції завантаження, тому його потрібно завантажувати через CKFinder
Крок 1: Вебсайт має посилатися на dll CKFinder (каталог: /CKFinder/bin/Release/CKFinder.dll)
Крок 2: Налаштуйте config.js CKEditor (каталог: /CKEditor/config.js) у функції CKEDITOR.editorConfig, і непотрібні функції можна видалити
CKEDITOR.editorConfig = function(config) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; Не пишіть "~/ckfinder/..." або "/ckfinder/..."
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html? Type=Зображення';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html? Type=Спалах';
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'; Налаштування розміру спливаючого вікна Browse Server
config.filebrowserWindowHeight = '500';
}
CKFinder.setupCKEditor(null, '.. /ckfinder/'); Зверніть увагу, що шлях Кфайндера відповідає фактичному розташуванню
Конфігурація CKFinder:
Відкрийте керування користувачем config.ascx у розділі "ckfinder\" і змініть його шлях до BaseUrl:
BaseUrl = "~/ckfinder/userfiles/"; або BaseUrl = "ckfinder/userfiles/";
Ось додатковий момент: це корисно тестувати в IIS. Інакше, якщо завантаження не вдасться, ви подумаєте, що з конфігурацією щось не так.
CKEditor має функцію завантаження після завершення налаштування, але що, якщо файл зображення — це оригінальне ім'я зображення, і він хоче змінити його на випадкове ім'я? Потім подивіться на третій крок.
Крок 3: Модифікувати вихідний код CKFinder. CKFinder має власний вихідний код, каталог: /CKFinde/_source
Створіть новий поточний проєкт у VS у CKFinde/_source/CKFinder.Net.sln, файл рішення, завантажений тут, може не відкритися у VS2008, ви можете додати новий проєкт або використати новішу версію VS для його відкриття.
1) Відкрити файл /Settings/ConfigFile.cs
Знайдіть 27 рядків і додайте атрибут: публічний bool RandomReName; Перейменуйте випадково
Знайдіть 67 рядків і присвоїте властивості значення зараз: RandomReName = true; Значення за замовчуванням є істинним
Зберегти закритий файл
2) Відкрити файл /Connector/Config.cs
Знайдіть 62 рядки, додайте атрибут:
публічний бул: RandomReName
{
отримати { returnSettings.ConfigFile.Current.RandomReName; }
}
Зберегти закритий файл
3) Відкрити файл /Connector/CommandHandlers/FileUploadCommandHandler.cs
Знайдіть рядок 64 і додайте код судження:
if ( Config.Current.RandomReName) // Використати випадкове ім'я
sFileName =DateTime.Now.ToString("yyyyMMddHHmmssffff") + "." +sExtension;
Зберегти закритий файл
4) Відновити проєкт, перезаписати /ckfinder/_source/bin/Debug/CKFinder.dll /ckfinder/bin/Release/CKFinder.dll або видалити раніше додані посилання на проєкт сайту та повторно видалити dll з проєкту CKFinder.Net
Останній крок: Відкрити /ckfinder/config.ascx
Знайдіть 40 рядків і додайте атрибут: (Насправді, ви можете додати це або ні, бо раніше було встановлене значення за замовчуванням, але при використанні оригінального ім'я воно має бути встановлене як false)
//上传完毕后使用随机文件名
RandomReName = true;
Збереження закрито
Добре, тепер, коли конфігурація успішна, CKEditor може мати функцію завантаження. Налаштування інших функцій будуть продовжувати вивчатися, коли матимете час~
Ще одне нагадування: у папках CKEditor і CKFinder багато зайвого, наприклад, назви з підкресленнями, .net-проєкти не потребують php, asp.
Якщо виникає помилка при завантаженні файлу: файл не можна переглянути з міркувань безпеки. Будь ласка, зв'яжіться зі своїм системним адміністратором і перевірте профіль CKFinder.
Вам потрібно змінити файл config.ascx
public override bool CheckAuthentication()
{
reture false (reture wrong);
}
Модифіковано на:
public override bool CheckAuthentication()
{
Валідація форми
returnRequest.IsAuthenticated;
}
3. Застосувати керування CKEditor на сторінці [два методи, a і b]
[A: Цитування INSTALL.html у стисненому пакеті ]
Якщо ви хочете інтегрувати CKEditor зі своєю сторінкою ASP.NET, дотримуйтесь наведених нижче кроків.
1. Перейдіть на офіційний сайт завантаження CKEditor і завантажте останні версії як CKEditor 3.x, так і CKEditor для ASP.NET Control.
2. Розпакуйте обидва інсталяційні пакети у бажане місцезнаходження Видалити n.
3. Додайте посилання на CKEditor для ASP.NET Control на вашому сайті.
У Visual Studio використайте команду Add Reference і перейдіть до bin\Release\CKEditor.NET.dll файлу з розпакованого CKEditor для ASP.NET інсталяційного пакету. Ви також можете вручну скопіювати DLL-файл у папку bin вашого додатку.
4. Скопіюйте розпаковані файли редактора з інсталяційного пакету CKEditor 3.x і вставте їх у каталог додатків вашого сайту.
5. Зареєструйте CKEditor для ASP.NET Control на вашій сторінці:
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
6. Вставте екземпляр CKEditor у тіло сторінки:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>
【b】
1. <head>Додайте відповідне посилання на js на сторінку:
<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. Потім <body>додайте наступний код до місця, де потрібно розмістити контроль, і існують такі методи використання:
(1) Додати вказаний атрибут класу до керування
<textarea id="textarea1" name="editor1" class="ckeditor">hello!</textarea>
Керування сервером:
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>
(2) Інжекція js-коду — тут js-код найкраще писати після контролю, або <head>в ньому
<textarea id="textarea1" name="editor1">hello!</textarea>
<scrip видалити t type="text/javascrip видалити t" >
CKEDITOR.replace('editor1', { height:400, width:800 });
</scrip去掉t>. . .
Керування сервером:
<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
<scrip видалити t type="text/javascrip видалити t" >
CKEDITOR.replace('<%=mckeditor. ClientID %>');
</scrip去掉t>. . .
=============================================================================================================
Друге джерело:
asp.net метод конфігурації для ckeditor 3.0.1 та ckfinder_aspnet_1.4.1.1
Згідно з підказками http://ckeditor.com.cn/docs/, CKEditor налаштований на веб-сторінці, і при перегляді в браузері інтерфейс CKEditor справді дуже гарний, але коли я із задоволенням хотів спробувати функцію завантаження зображення, я не побачив кнопку завантаження.
Продовжуючи пошуки в інтернеті, дійшло висновку, що «CKEditor сам по собі не має функції завантаження, і його потрібно інтегрувати з CKFinder для досягнення функції відвантаження».
Потім завантажте CKFinder 1.4.1.1 для Asp.net, розпакуйте його і покладіть папку ckfinder у кореневу директорію проєкту — бо багато джерел в Інтернеті радять, що найкраще розміщувати CKEditor і CKFinder в одному каталозі рівня. І таким чином, у нашому проєкті буде ще дві папки без жодної причини. Я сама маю фетиш на чистоту кодексу, здається,
Залиште папку як знак поваги до автора — цього буде достатньо. Тримати двох змусило б мене почуватися дуже некомфортно.
Перед тим, як інтегрувати CKFinder у CKEditor, нам також потрібно трохи налаштувати CKFinder. Розумні друзі можуть легко подумати, що оскільки це плагін для завантаження файлів, більшість налаштувань — це шлях до завантаження файлів.
За замовчуванням шлях завантаження CKFinder — це папка userfiles у окремій директорії, але я поклав CKFinder у папку CKEditor, і якщо зберігаю зображення у файлах користувача, система мусить обходити тришарову папку, щоб знайти файл або зображення, тому я планую завантажити образ у папку upFile у кореневій директорії проєкту.
Щоб реалізувати цю функцію, потрібно змінити файл config.ascx у CKFinder, щоб змінити BaseUrl = "/ckfinder/userfiles/" на BaseUrl = "~/upFile/". Потім виріжте CKFinder.dll файли з папки CKFinder/bin у папку bin системного проєкту. Або ввести CKFinder.dll у проєкт, додавши посилання.
Далі ми можемо використовувати CKEditor для завантаження файлів:
Помістіть папку CKFinder у папку CKEditor і на сторінці імпортуйте js-файли обох:
<scrip видалити tsrc="http://www.cnblogs.com/ckeditor/ckeditor.js" type="text/javascrip видалити t"></scrip去掉t>
<scrip видалити t src="http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js" type="text/javascrip видалити t"></scrip去掉t>
Існує два способи посилатися на редактор у керування:
Одна з них — використовувати текстову область керування клієнтом:
<textarea rows="20" cols="40" name="txtContent" id="txtContent"></textarea>
<scrip видалити t type="text/javascrip видалити t" >
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor (редактор, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</scrip去掉t>. . .
Другий — використання серверного керуючого текстового поля:
<asp:TextBox id="txtContent" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>
<scrip видалити t type="text/javascrip видалити t" >
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor (редактор, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</scrip去掉t>Особисто я вважаю, що оскільки це asp.net програма, то краще використовувати серверне керування. Хоча він працює трохи повільніше, ніж клієнтське керування, розробка відбувається трохи швидше. І, як програмісти, ми завжди любимо спробувати всі варіанти, перш ніж обрати той, який нам подобається.
Насправді ви також можете призначати значення контролю без використання Text='<%# Bind("info") %>' і використовувати його безпосередньо у беккоді.
this.txtContent.Text="Початкове значення"
Це також можливо. Ви також можете безпосередньо використати наступний код для отримання значення:
Код CKFinder і CKEditor. Коли я запускаю сторінку безпосередньо з редактором, компілятор видає таку помилку:
string content=this.txtContent.Text
Примітка: атрибут TextMode="MultiLine" є необхідним, інакше значення буде нульовим.
Я не оптимізував програму перед налагодженням
Ім'я типу або простору назв "ControlDesigner" не існує у просторі назв "System.Web.UI.Design" (чи не відсутнє посилання на асемблер?)
Помилка знаходиться на 19-му рядку ckeditor\ckfinder\_source\FileBrowserDesigner.cs, тому просто спростіть файл:
Перший крок — оптимізувати ckeditor: видалити папки _samples та _source, і в директорії lang можна зберігати лише три мовні файли: en.js, zh.js та zh-cn.js;
Другий крок — оптимізувати ckfinder: видалити папки _samples і _source, залишивши лише файли en.js, zh.js та zh-cn.js мов у каталозі lang.
Зверніть увагу на другий рядок коду js тут: CKFinder.SetupCKEditor(редактор, 'http://www.cnblogs.com/ckeditor/ckfinder/'); , де «http://www.cnblogs.com/ckeditor/ckfinder/» — відносний шлях Ckfinder до поточної сторінки,
Будь ласка, не вставляйте код напряму, інакше при завантаженні зображень може виникнути наступна помилка:
Опис: HTTP 404. Ресурс, який ви шукаєте (або один із його залежностей), можливо, був видалений, або його назва змінилася, або він тимчасово недоступний. Будь ласка, перевірте наступну URL і переконайтеся, що написано правильно.
Запитана URL: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
Тож, якщо ви не хочете класти ckfinder у папку ckeditor, як я, це нормально, якщо ви правильно заповните зміни шляху тут.
Я думав, що це буде вся робота, але коли я завантажив зображення, з'явилося наступне повідомлення:
З міркувань безпеки файл не можна переглядати. Будь ласка, зв'яжіться зі своїм системним адміністратором і перевірте профіль CKFinder.
Як кажуть, не може бути, що хороші речі важко їсти. Я можу запитати лише найкращого вчителя — Байду. Скопіював вищезазначену інформацію про запит у пошукове поле Baidu, і після входу в машину я знайшов пост про PHP integration ckeditor. Ось як це зробити:
Змініть файл config.ascx у CKFinder, щоб змінити значення повернення публічної функції bool CheckAuthentication() з return false на true (return override).
Ще раз протестував, зображення успішно завантажено! |
Опубліковано 18.04.2015 19:11:55
|
|
|
