Hướng Dẫn Dùng CKEDITER và CKFILDER Cho MVC3 và MVC4

[caohoangnam114]

hôm này mình sẽ giới thiệu các bạn cách cài đặt CKediter và thằng CKfilder để quản lý ảnh và nhập văn bản.
do video nặng quá không upload lên được youtube nên mình chỉ nêu các bước và share soruce được thôi
cách làm:

1.	Đầu tiên bạn download  2 file ckediter và ckfinder  về.
        http://ckeditor.com/download
        http://cksource.com/ckfinder/trial (chọn asp.net nhé)
2.	Tạo một project mới.ở đây mình làm bằng MVC4.các bạn làm bằng MVC3 Cũng được
3.	Sau khi tạo được project xong các bạn copy 2 thu mục ckediter và ckfiler vào thu mục conten
4.	Bạn add reference của thằng ckfiler :Content\ckfinder\bin\Release\CKFinder.dll
5.	Các bạn xóa 2 thư mục _samples và _source trong cai ckfilder đi
6.	Sau đó ta cần vào file: Content\ckfilder\config.ascx
        - CheckAuthentication bạn sửa lại return true;
        - trong hàm SetConfig bạn sửa 2 cai link nay như sau:(ở đây mình muốn ảnh ở trong 1 thư mục mình tạo ra là Images)
           BaseUrl = "/Images/";
           BaseDir = HttpContext.Current.Server.MapPath("~/Images/");

1.	ok giờ các bạn mở file Content\ckeditor\config.js ở thư mục ckediter ra và cấu hình như sau.
         CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
        // config.uiColor = '#AADC6E';
            config.enterMode = CKEDITOR.ENTER_BR;
            config.toolbar = 'Full';
            config.filebrowserBrowseUrl = '/Content/ckfinder/ckfinder.html';
            config.filebrowserImageBrowseUrl = '/Content/ckfinder/ckfinder.html?type=Images';
            config.filebrowserFlashBrowseUrl = '/Content/ckfinder/ckfinder.html?type=Flash';
            config.filebrowserUploadUrl = '/Content/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
            config.filebrowserImageUploadUrl = '/Content/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
            config.filebrowserFlashUploadUrl = '/Content/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
            config.filebrowserWindowWidth = '1000';
            config.filebrowserWindowHeight = '700';
};
2.	Vậy là được giờ tớ sẽ tạo một trang để test

trang view

<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script><script src="../../Content/ckeditor/ckeditor.js" type="text/javascript"></script><script src="../../Content/ckfinder/ckfinder.js" type="text/javascript"></script>anh bia:<input id="anhbia" name="anhbia" type="text" /><input id="chonanhbia" type="button"                                                      value="Chon anh" /><textarea id="TextArea1" cols="20" rows="2"></textarea>  <script language="javascript" type="text/javascript">     $(function () {        $("#chonanhbia").click(function () {            var finder = new CKFinder();            finder.selectActionFunction = function (fileUrl) {                $("#anhbia").val(fileUrl);            };            finder.popup();        });    });</script><script type="text/javascript">    var editor;    function createEditor(languageCode, id) {        var editor = CKEDITOR.replace(id, {            language: languageCode        });    }     $(function () {        createEditor('vi', 'TextArea1');    });</script>

https://skydrive.live.com/redir?resi...BtwVUjz0bZ8pic

View more random threads:

• Vlog 4: Hướng dẫn lập trình: Xử lý file và thư mục trong C#
• Unit Test trong lập trình C#
• [Video] Hướng dẫn cách đọc dữ liệu Exel lên DataGridView và insert vào CSDL
• Giúp mình làm REPORT trong Asp.net với :(((((
• Mã hóa chuỗi kết nối trong web.config
• Hướng dẫn add NUnit vào Visual Studio
• Giới thiệu thread và multi thread trong lập trình C#
• Lấy đường dẫn icon mặc định một tập tin bất kỳ trong windows
• Talking Nhận biết file thuộc loại gì trong lập trình C#
• Lập trình C# | Đi tắt tới C#

[vthao93hp]

cách của đức ko biết có up ảnh lên được không vậy, nếu không thì có cách này mau nè, 3 dòng là xong
http://adambielecki.blogspot.com/201...c-3-mvc-4.html

[ngochoa]

cách của đức ko biết có up ảnh lên được không vậy, nếu không thì có cách này mau nè, 3 dòng là xong
http://adambielecki.blogspot.com/201...c-3-mvc-4.html

up ảnh được mà bạn

[canhodiamondvn]

Chào bạn.không biết dùng CKFinder bạn đã gặp cái lỗi như này chưa ?Giúp mình với .
Mình đã cấu hình gắn nó vào ckEditor nhưng sau khi chọn ảnh thì nó load song báo lỗi sau "The uploaded file is corrupt".
Mình đã kiểm tra vấn đề phân quyền trên thư mục upload đầy đủ .

[hoanganit19]

bạn đã phân quyền nghi ảnh lên thư mục ckFinder cấu hình tới chưa?

[thanhtungbooking]

bạn đã phân quyền nghi ảnh lên thư mục ckFinder cấu hình tới chưa?

chào bác giờ mình muốn hiển thị những thông tin có cả ảnh mà khi subbmit form sử dụng ckeditor thì làm như thế nào