Najnowsze wersje CKEditor i CKFinder można pobrać z oficjalnej strony internetowej (http://cksource.com).
Umieść powyższe dwa zasoby w katalogu głównym strony: /CKEditor (tutaj w wersji 3.6.2 musisz umieścić folder _Samples\ckeditor w folderze skompresowanym) oraz /CKFinder (bez rozróżniania wielkości liter, możesz umieścić folder bezpośrednio tutaj). )
Zwróć uwagę, że tutaj czasem występuje błąd w generacji. Na przykład istnieją zduplikowane tagi typu AssemblyTitle, głównie dlatego, że strona ma więcej niż jeden AssemblyInfo.cs usunięcia pobranego pliku. Albo usuń folder _source. Jeśli masz jakieś pytania, możesz się ze mną skontaktować: my QQ: 515072775
Używanie CKEditora na stronie:
<textarea cols="80" id="prcontent" nazwa="content" rows="50"> Cześć, Twoje użycie zakończyło się sukcesem! </textarea>
<scrip usuń ttype="text/javascrip usuń t" >
CKEDITOR.replace('content', { height:200, width: 520 });
</scrip去掉t>. . .
CKEditor nie posiada funkcji przesyłania, więc musi być przesłany przez CKFinder
Krok 1: Strona musi odwoływać się do dll CKFinder (katalog: /CKFinder/bin/Release/CKFinder.dll)
Krok 2: Skonfiguruj config.js CKEditora (katalog: /CKEditor/config.js) w funkcji CKEDITOR.editorConfig, a zbędne funkcje mogą zostać usunięte
CKEDITOR.editorConfig = function(config) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; Nie pisz "~/ckfinder/..." ani "/ckfinder/..."
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html? Type=Images';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html? Type=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'; Ustawienie rozmiaru wyskakującego okna Browse Server
config.filebrowserWindowHeight = '500';
}
CKFinder.setupCKEditor(null, '.. /ckfinder/'); Należy zauważyć, że ścieżka ckfindera odpowiada rzeczywistemu położeniu
Konfiguracja CKFinder:
Otwórz konfigurację użytkownika config.ascx pod "ckfinder\" i zmień ścieżkę BaseURL:
BaseUrl = "~/ckfinder/userfiles/"; lub BaseUrl = "ckfinder/userfiles/";
Jeszcze jedna uwaga: warto testować to w IIS. W przeciwnym razie, jeśli przesłanie nie powiodło się, pomyślisz, że coś jest nie tak z konfiguracją.
CKEditor ma funkcję przesyłania po zakończeniu konfiguracji, ale co jeśli plik obrazu to oryginalna nazwa obrazu i chce zmienić ją na losową nazwę? Potem spójrz na trzeci krok.
Krok 3: Zmodyfikuj kod źródłowy CKFinder. CKFinder posiada własny kod źródłowy, katalog: /CKFinde/_source
Utwórz nowy aktualny projekt w VS do CKFinde/_source/CKFinder.Net.sln, plik rozwiązania pobrany tutaj może się nie otworzyć w VS2008, możesz wybrać dodanie nowego projektu lub użyć nowszej wersji VS do jego otwarcia.
1) Otwórz plik /Settings/ConfigFile.cs
Znajdź 27 wierszy i dodaj atrybut: public bool RandomReName; Losowa zmiana nazwy
Znajdź 67 wierszy i przypisz wartość właściwości właśnie teraz: RandomReName = true; Domyślna wartość jest prawdziwa
Zapisz zamknięty plik
2) Otwórz plik /Connector/Config.cs
Znajdź 62 wiersze, dodaj atrybut:
publiczny bool RandomReName
{
get { returnSettings.ConfigFile.Current.RandomReName; }
}
Zapisz zamknięty plik
3) Otwórz plik /Connector/CommandHandlers/FileUploadCommandHandler.cs
Znajdź linię 64 i dodaj kod wyroku:
if ( Config.Current.RandomReName) // Użyj losowej nazwy
sFileName =DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." +sExtension;
Zapisz zamknięty plik
4) Zregeneruj projekt, nadpisz /ckfinder/_source/bin/Debug/CKFinder.dll /ckfinder/bin/Release/CKFinder.dll lub usuń wcześniej dodane odniesienia do projektu strony internetowej i usuń dll z projektu CKFinder.Net
Ostatni krok: otwórz /ckfinder/config.ascx
Znajdź 40 linii i dodaj atrybut: (W rzeczywistości możesz dodać to lub nie, ponieważ wcześniej była ustawiona wartość domyślna, ale przy użyciu oryginalnej nazwy musi być ustawiona na fals)
//上传完毕后使用随机文件名
RandomReName = true;
Zapisz zamknięty
Dobrze, teraz gdy konfiguracja się pomyślała, CKEditor może mieć funkcję przesyłania. Ustawienia innych funkcji będą nadal badane, gdy będziesz miał czas~
Jeszcze jedno przypomnienie: foldery CKEditor i CKFinder zawierają wiele zbędnych rzeczy, takich jak nazwy z podkreśleniem, projekty .net nie potrzebują php, asp.
Jeśli wystąpi błąd podczas przesyłania pliku: Ze względów bezpieczeństwa nie można go obejrzeć. Prosimy o kontakt z administratorem systemu i sprawdzenie profilu CKFinder.
Musisz zmodyfikować plik config.ascx
public override, bool CheckAuthentication()
{
retura fałszywa;
}
Zmodyfikowane do:
public override, bool CheckAuthentication()
{
Walidacja formularza
returnRequest.IsAuthenticated;
}
3. Zastosuj kontrolę CKEditora na stronie [dwie metody, a i b]
[A: Cytując INSTALL.html w skompresowanym opakowaniu ]
Jeśli chcesz zintegrować CKEditor ze swoją stroną ASP.NET, postępuj zgodnie z poniższymi krokami.
1. Wejdź na oficjalną stronę CKEditor do pobrania i pobierz najnowsze wersje zarówno CKEditor 3.x, jak i CKEditor for ASP.NET Control.
2. Rozpakuj oba pakiety instalacyjne do wybranej lokalizacji Remove n.
3. Dodaj na swojej stronie źródło CKEditor for ASP.NET Control.
W Visual Studio użyj polecenia Dodaj Referencję i przejdź do pliku bin\Release\CKEditor.NET.dll z rozpakowanego CKEditora dla ASP.NET pakietu instalacyjnego. Możesz też ręcznie skopiować plik DLL do folderu bin swojej aplikacji.
4. Skopiuj rozpakowane pliki edytora z pakietu instalacyjnego CKEditor 3.x i wklej je do katalogu aplikacji na swojej stronie internetowej.
5. Zarejestruj CKEditora do ASP.NET Control na swojej stronie:
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefiks="CKEditor" %>
6. Wstaw instancję CKEditora do treści strony:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>
【b】
1. <head>Dodaj odpowiadające odnośnik js do strony:
<scrip usuń t type="text/javascrip usuń t" language="javascrip usuń t" src="ckfinder/ckfinder.js"></scrip去掉t>
<scrip usuń t type="text/javascrip usuń t" language="javascrip usuń t" src="ckeditor/ckeditor.js"></scrip去掉t>
2. Następnie <body>dodaj następujący kod do miejsca, gdzie należy umieścić kontrolę, a dostępne są następujące metody użycia:
(1) Dodaj określony atrybut klasy do kontroli
<textarea id="textarea1" nazwa="editor1" class="ckeditor">cześć!</textarea>
Sterowanie serwerem:
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>
(2) Wstrzyknięcie kodu js – tutaj kod js najlepiej zapisać po sterowaniu lub <head>w nim
<textarea id="textarea1" nazwa="editor1">cześć!</textarea>
<scrip usuń t type="text/javascrip usuń t" >
CKEDITOR.replace('editor1', { height:400, width:800 });
</scrip去掉t>. . .
Sterowanie serwerem:
<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
<scrip usuń t type="text/javascrip usuń t" >
CKEDITOR.replace('<%=mckeditor. ClientID %>');
</scrip去掉t>. . .
=============================================================================================================
Drugie odniesienie:
asp.net metodą konfiguracji w CKEDITOR 3.0.1 i ckfinder_aspnet_1.4.1.1
Według wskazówek http://ckeditor.com.cn/docs/, CKEditor jest skonfigurowany na stronie internetowej, a po przeglądaniu w przeglądarce uważam, że interfejs CKEditora rzeczywiście jest bardzo piękny, ale gdy z radością chciałem spróbować funkcji przesyłania obrazu, nie zobaczyłem przycisku do przesłania obrazu.
Kontynuując poszukiwania w internecie, doszedłem do wniosku, że "CKEditor nie posiada funkcji uploadu i musi być zintegrowany z CKFinder, aby uzyskać funkcję uploadu".
Następnie pobierz CKFinder 1.4.1.1 dla Asp.net, rozpakuj go i umieść folder ckfinder w katalogu głównym projektu – ponieważ wiele źródeł w Internecie mówi, że najlepiej umieścić CKEditor i CKFinder w tym samym katalogu poziomów. I w ten sposób będziemy mieli dwa kolejne foldery w projekcie bez powodu. Sam mam fetysz czystości kodu, tak mi się wydaje,
Zostaw teczkę jako wyraz szacunku dla autora, to wystarczy. Trzymanie dwóch byłoby dla mnie bardzo niekomfortowe.
Zanim zintegrujemy CKFinder z CKEditor, musimy też trochę skonfigurować CKFinder. Mądrzy przyjaciele powinni łatwo pomyśleć, że skoro to wtyczka do przesyłania plików, większość rzeczy do skonfigurowania to ścieżka do przesyłania plików.
Domyślną ścieżką przesyłania CKFinder jest folder plików użytkownika w osobnym katalogu, ale umieściłem CKFinder w folderze CKEditor, jeśli przechowuję obraz w plikach użytkownika, system musi ominąć folder trzywarstwowy, aby znaleźć plik lub obraz, więc planuję przesłać obraz do folderu upFile w katalogu głównym projektu.
Aby zaimplementować tę funkcję, musisz zmodyfikować plik config.ascx w CKFinder, aby zmienić BaseUrl = "/ckfinder/userfiles/" na BaseUrl = "~/upFile/". Następnie wytnij pliki CKFinder.dll z folderu CKFinder/bin do folderu bin projektu systemowego. Albo wprowadź CKFinder.dll do projektu, dodając odniesienia.
Następnie możemy użyć CKEditora do przesyłania plików:
Włóż folder CKFinder do folderu CKEditor i na stronie zaimportuj pliki js obu z nich:
<scrip usuń tsrc="http://www.cnblogs.com/ckeditor/ckeditor.js" type="text/javascrip usuń t"></scrip去掉t>
<scrip usuń t src="http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js" type="text/javascrip usuń t"></scrip去掉t>
Istnieją dwa sposoby odniesienia edytora do sterowania:
Jednym z nich jest użycie obszaru tekstowego sterowania klientem:
<textarea rows="20" cols="40" name="txtContent" id="txtContent"></textarea>
<scrip usuń t type="text/javascrip usuń t" >
editor var = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor(edytor, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</scrip去掉t>. . .
Drugim jest użycie tekstu sterującego po stronie serwera:
<asp:TextBox id="txtContent" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>
<scrip usuń t type="text/javascrip usuń t" >
editor var = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor(edytor, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</scrip去掉t>Osobiście uważam, że skoro to asp.net program, to skorzystaj z sterowania po stronie serwera. Chociaż program jest nieco wolniejszy niż sterowanie klientem, rozwój jest nieco szybszy. Jako programiści zawsze lubimy wypróbować wszystkie możliwości, zanim wybierzemy tę, która nam odpowiada.
W rzeczywistości możesz też przypisać wartości do kontrolki bez używania Text='<%# Bind("info") %>', i używać go bezpośrednio w backcode
this.txtContent.Text="Wartość początkowa"
To też możliwe. Możesz także bezpośrednio użyć następującego kodu, aby uzyskać tę wartość:
Kod CKFinder i CKEditor. Gdy uruchamiam stronę bezpośrednio z edytorem, kompilator wyświetla następujący błąd:
string content=this.txtContent.Text
Uwaga: Atrybut TextMode="MultiLine" jest niezbędny, w przeciwnym razie wartość będzie zerowa.
Nie uprościłem programu przed debugowaniem
Nazwa typu lub przestrzeni nazw "ControlDesigner" nie istnieje w przestrzeni nazw "System.Web.UI.Design" (czy brakuje w niej odniesienia do asemblera?)
Błąd znajduje się w linii 19 ckeditor\ckfinder\_source\FileBrowserDesigner.cs, więc po prostu uprość plik:
Pierwszym krokiem jest usprawnienie edytora CK: usunięcie folderów _samples i _source, a w katalogu lang można przechowywać tylko trzy pliki językowe: en.js, zh.js i zh-cn.js;
Drugim krokiem jest usprawnienie ckfindera: usuń foldery _samples i _source i zachowaj tylko pliki językowe en.js, zh.js i zh-cn.js w katalogu lang.
Zwróć uwagę na drugą linię kodu js tutaj: CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/'); , gdzie "http://www.cnblogs.com/ckeditor/ckfinder/" to względna ścieżka ckfindera do bieżącej strony,
Prosimy nie kopiować i nie wklejać kodu bezpośrednio, w przeciwnym razie podczas przesyłania obrazów może pojawić się następujący błąd:
Opis: HTTP 404. Zasób, którego szukasz (lub jedna z jego zależności), może zostać usunięty, zmieniła się jego nazwa lub jest tymczasowo niedostępny. Prosimy sprawdzić poniższy adres URL i upewnić się, że jest poprawnie napisany.
Żądany adres URL: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
Więc jeśli nie chcesz wkładać ckfindera do folderu ckeditor, jak ja zrobiłem, to w porządku, o ile poprawnie wypełnisz zmiany ścieżek tutaj.
Myślałem, że to będzie uznane za całą pracę, ale gdy przesłałem obraz, pojawił się następujący prompt:
Ze względów bezpieczeństwa plik nie może być przeglądany. Prosimy o kontakt z administratorem systemu i sprawdzenie profilu CKFinder.
Nie ma mowy, jak mówi przysłowie, że dobre rzeczy są trudne do jedzenia. Mogę zapytać tylko najlepszego nauczyciela – Baidu. Skopiowałem powyższe informacje do pola wyszukiwania Baidu, a po wejściu do samochodu znalazłem post o integracji z PHP ckeditor. Oto jak to zrobić:
Zmodyfikuj plik config.ascx w CKFinder, aby zmienić wartość return funkcji public override bool CheckAuthentication() z return false na return true.
Przetestowałem ponownie, obraz został pomyślnie przesłany! |
Opublikowano 18.04.2015 19:11:55
|
|
|
