Hướng dẫn tích hợp ckfinder 3.4.2 và ckeditor

https://docs-old.ckeditor.com/ckfinder3-net/integration.html

 

Advertisements

AdminLTE template

Bài này hướng dẫn cách dùng AdminLTE tích hợp vào MVC Project

  1. Tạo project mới, chọn template ASP.NET MVC
  2. NugetPackage -> install WebHelpers.MVC5
  3. Chép các file trong thư mục Contents từ mẫu AdminLTE qua project ASP.NET MVC
  4. Thiết lập bundle css, js

Hope this help

CKEditor 4 và CFinder 3 – PHP

Hướng dẫn cài đặt CKEditor 4 và Cfinder 3

  • Tải CKEditor, CKFinder ở 2 link sau

https://ckeditor.com/ckeditor-4/
https://ckeditor.com/ckeditor-4/download/#ckfinder (3.4.2)

  • Giải nén và chép ckeditor, cfinfer vào thư mục gốc của website (web root folder)
  • Cấu hình cfinder tích hợp với ckeditor

Thay đổi $config[‘authentication’] file config.php nằm trong thư mục cfinder như sau

$config[‘authentication’] = function () {
return true; // FALSE -> TRUE
};

  • Add CKEditor vào trang web

src=”ckeditor/ckeditor.js”>
src=”ckfinder/ckfinder.js” type=”text/javascript”>

Thành phần TEXT EDITOR //TextArea
<textarea name=”editor1″ id=”editor1″ rows=”10″ cols=”80″>
This is my textarea to be replaced with CKEditor.
</textarea>
//Script for CKEditor

// Replace the with a CKEditor
// instance, using default configuration.
var editor = CKEDITOR.replace( ‘editor1’, {
filebrowserBrowseUrl: ‘ckfinder/ckfinder.html’,
filebrowserImageBrowseUrl: ‘ckfinder/ckfinder.html?type=Images’,
filebrowserFlashBrowseUrl: ‘ckfinder/ckfinder.html?type=Flash’,
filebrowserUploadUrl: ‘ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files’,
filebrowserImageUploadUrl: ‘ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images’,
filebrowserFlashUploadUrl: ‘ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash’
});
CKFinder.setupCKEditor( editor, {
skin: ‘jquery-mobile’,
swatch: ‘b’,
onInit: function( finder ) {
finder.on( ‘files:choose’, function( evt ) {
var file = evt.data.files.first();
console.log( ‘Selected: ‘ + file.get( ‘name’ ) );
} );
}
} );

 

ChartJS – Hướng dẫn sử dụng biểu đồ ChartJS

Bài viết này hướng dẫn bạn cách tích hợp ChartJS và sử dụng biểu đồ trong ứng dụng web, các bước thực hiện khá đơn giản như sau:

  • Download ChartJS và tích hợp vào trang như sau

<script src=”Scripts/Chart.min.js” />;

  • Khai báo canvas trong HTML như sau

<canvas id=”clients” width=”500″ height=”350″></canvas>

  • Load dữ liệu cho biểu đồ và vẽ biểu đồ

<script>
var barData = {
labels: [‘Italy’, ‘UK’, ‘USA’, ‘Germany’, ‘France’, ‘Japan’],
datasets: [
{
label: ‘2010 customers #’,
fillColor: ‘#382765’,
data: [2500, 1902, 1041, 610, 1245, 952]
},
{
label: ‘2014 customers #’,
fillColor: ‘#7BC225’,
data: [3104, 1689, 1318, 589, 1199, 1436]
}
]
};

var context = document.getElementById(‘clients’).getContext(‘2d’);
var clientsChart = new Chart(context).Bar(barData);
</script>

Hướng dẫn sử dụng DataTables

Các bước dưới đây hướng dẫn cách sử dụng DataTables pluggin

  1. _Lauout.cshtml

Chèn đoạn code sau vào phần

<head>
….
<link href=”https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css&#8221; rel=”stylesheet” />
</head>

Chép đoạn code sau trước thẻ đóng </form>

src

2. Trong trang index.cshtml hoặc trang bất kỳ dùng bảng

1) Chỉnh sửa lại id của bảng và class như sau

<table class=”display” id=”mytable”>
<thead>
<tr>
<th>

//Những phần highlight là những nội dung thay đổi và bổ sung
2) Trước vòng lặp để hiển thị dữ liệu cho bảng, bổ sung thêm thẻ <tbody>
<tbody>
@foreach (var item in Model)
{

….

}
</tbody>

3) Chèn thêm đoạn mã sau vào cuối trang Index.cshtml hoặc trang sử dụng bảng bất kỳ
@section scripts
{
    $(document).ready(function () {
        $(‘#mytable’).DataTable();
    });
}

Bootstrap Dropdown menu is not working

Hướng dẫn dưới đây giúp khắc phục lỗi Bootstrap Dropdown không hoạt động (Bootstrap Dropdown menu is not working)

Khắc phục:

  1. Thứ tự file JS đặt trước file CSS trong phần head của trang
  2. Thứ tự file Jquery.js đặt trước bootstrap.js

src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js“>

src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js” integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”>

<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&#8221; integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”>