Sử dụng WebEditor

Sử dụng WebEditor hướng dẫn biến textarea thành vùng soạn thảo như Word trong trang web, thích hợp dùng cho nội dung tin, mô tả sản phẩm…


Chuẩn bị

  • Bạn tạo một trang web với form có sẵn để sử dụng webeditor
  • Thực hiện tạo database hocPHP  (nếu chưa tạo) và tạo table sach  gồm các field: id, tensach, gia, urlhinh, ngay, idloai, anhien,mota

Tạo form để sử dụng webeditor

Trong website, tạo 1 file có tên formThemSach.php và code:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="m-auto border border-secondary p-2" style="width:800px">
<form method="post" class="row" enctype='multipart/form-data' >
    <div class="mb-3 col-6">
       <label class="form-label">Tên Sách</label>
       <input name="tensach" placeholder="Nhập tên sách" class="form-control" type="text">
    </div>
    <div class="mb-3 col-6">
       <label class="form-label">Giá</label>
       <input name="gia" placeholder="Nhập giá" type="number" class="form-control">
    </div>
    <div class="mb-3 col-6">
        <label class="form-label">Hình</label>
        <input name="hinh" placeholder="Địa chỉ hình" type="text" class="form-control" >    
    </div>
    <div class="mb-3 col-6">
        <label class="form-label">Ngày nhập</label>
        <input name="ngay" type="date" class="form-control" >    
    </div>
    <div class="mb-3 col-6">
        <label class="form-label">Loại sách</label>
        <select name="loaisach" class="form-select" >
            <option selected> Sách lịch sử </option>
            <option value="1">Văn học </option>
            <option value="2">Nghệ thuật sống</option>
            <option value="3">Học làm người</option>
        </select>
    </div>
    <div class="mb-3 col-6">
        <label class="form-label">Ẩn hiện</label>
        <div class="form-control">
            <div class="form-check form-check-inline">
                <input name="anhien" id="hien" value="1" class="form-check-input" type="radio">
                <label class="form-check-label" for="hien">Hiện</label>
            </div>
            <div class="form-check form-check-inline">
                <input name="anhien" id="an" value="0" class="form-check-input" type="radio" >
                <label class="form-check-label" for="an">Ẩn</label>
            </div>
        </div>
    </div>
  <div class="mb-3">    
    <textarea id="mota" name="mota" rows="4" placeholder="Mô tả" class="form-control"></textarea>
  </div>
   <div class="text-center">
       <button name="btnLuu" type="submit" class="btn btn-primary py-1 px-5">Lưu dữ liệu</button>
       <button type="reset" class="btn btn-danger py-1 px-5">Xóa làm lại</button>
  </div>
</form>
</div>
form thêm sách

Dùng CkEditor

CKEditor là 1 WebEditor rất dễ dùng, nó biến textarea thành vùng soạn thảo giống như word. Và khi submit form, nó phát sinh code html để gửi lên server.

<script>
ClassicEditor
    .create( document.querySelector( '#mota' ) )
    .then( editor => {
        console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );    
</script>

Hiện ra nội dung của editor

Cách 1: Bạn gõ nội dung trong tag textarea hoặc hiện từ database, ví dụ: <?=$sach[‘mota’]?>

<textarea id="mota" name="mota" rows="4" placeholder="Mô tả" class="form-control">
   <p>Đây là nội dung của sách</p>
</textare

Hoặc gán trong lúc khởi tạo với hàm setdata

<script>
ClassicEditor
    .create( document.querySelector( '#mota' ) )
    .then( editor => {
        editor.setData( '<p>Nội dung của sách lấy từ database</p>' );
    } )
    .catch( error => {
        console.error( error );
    } );    
</script>

Lấy giá trị từ editor: khi cần có thể lấy data trong editor bằng hàm getdate

<button type="button" onclick="laydata()">Lấy data</button>
<script>
var ed;
ClassicEditor.create( document.querySelector( '#mota' ) )
.then( editor => {
    editor.setData( '<h4>Nội dung của sách lấy từ database</h4>' );
    ed = editor;
})
.catch( error => {console.error( error )} );
</script>

<script>
function laydata(){
    e = ed.getData();
    console.log(e);
}
</script>

Tiếng việt cho editor: 

Thêm code này vào trang :

<script src="https://cdn.ckeditor.com/ckeditor5/31.0.0/classic/translations/vi.js"> </script>
<script>
ClassicEditor.create( document.querySelector('#mota') , {language: 'vi'} )
.then( editor => { } )
.catch( error => {console.error( error )} );
</script>

Chỉnh độ cao cho Ckeditor

Thêm style định dạng cho vùng soạn  thảo:

<style>
.ck-editor__editable_inline {
    min-height: 250px;
    max-height: 450px;
}
</style>

Lưu dữ liệu trong Editor vào db

Cứ làm bình thường như đã biết. Xem thử để biết cấu trúc của $_POST

<?php
if ( isset( $_POST['btnLuu'])) {
    echo "<xmp>"; print_r($_POST);
}
?>

Sử dụng CKFinder trong file urlHinh

a. Download CKFinder : https://ckeditor.com/ckfinder/download/

b. Giải nén và chép folder ckfinder vào website

c. Vào https://ckeditor.com/docs/ckfinder/ckfinder3/#!/guide/dev_integration , cuộn xuống mục để xem code demo ở mục Using CKFinder in a Popup Window

 <head>
     <meta charset="utf-8">  <title>CKFinder 3</title>
     <script src="/ckfinder/ckfinder.js"></script>
 </head>
 <body>
     <script>
         function openPopup() {
             CKFinder.popup( {
                 chooseFiles: true,
                 onInit: function( finder ) {
                     finder.on( 'files:choose', function( evt ) {
                         var file = evt.data.files.first();
                         document.getElementById( 'url' ).value = file.getUrl();
                     } );
                     finder.on( 'file:choose:resizedImage', function( evt ) {
                         document.getElementById( 'url' ).value = evt.data.resizedUrl;
                     } );
                 }
             } );
         }
     </script>
     <input type="text" size="48" name="url" id="url" /> <button onclick="openPopup()">Select file</button>
 </body>

Trong code trên , chú ý có tag input với tên url, hàm openPopup sẽ được gọi khi click nút Select file

d. Mở trang web của bạn, nhúng script ckfinder.js vào

 <script src="ckfinder/ckfinder.js">

e. Trong sự kiện click của input hinh, gọi hàm openPopup

<input ondblclick="openPopup('hinh')" id="hinh" name="hinh" placeholder="Địa chỉ hình" type="text" class="form-control" >    

f. Định nghĩa hàm openPopup

<script>
function openPopup(idobj) {
    CKFinder.popup( {
        chooseFiles: true,
        onInit: function( finder ) {
            finder.on( 'files:choose', function( evt ) {
                var file = evt.data.files.first();
                document.getElementById( idobj ).value = file.getUrl();
            } );
            finder.on( 'file:choose:resizedImage', function( evt ) {
                document.getElementById( idobj ).value = evt.data.resizedUrl;
            } );
        }
    } );
}
</script>

g. Mở file ckfinnder/config.php, tìm đến mục anthentication, sửa false thành true

$config['authentication'] = function () {
    return true;//false;
};

Xong rồi, hưởng thành quả nhé

Sử dụng CKFinder để nhúng hình vào CkEditor

Trong trang web của bạn, cuộn đến vùng code nhúng CkEdior, và thêm code như mẫu để được như sau:

<script>
ClassicEditor.create( document.querySelector('#mota') , {
    language: 'vi',
    ckfinder: {
        uploadUrl: 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
    },
    toolbar: [ 'ckfinder', 'imageUpload', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo' ]
})
.then( editor => {   })
.catch( error => {console.error( error )} );
</script>

Kết quả, nhắp nút chèn hình trong toolbar thì CKFinder sẽ bật lên

Điều chỉnh các nút trong toolbar của CkEditor

<script>
ClassicEditor.create( document.querySelector('#mota') , {
    language: 'vi',
    ckfinder: {
        uploadUrl: 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
    },    
    toolbar: {
    items: [  
        'fontfamily', 'fontsize', '|',
        'heading', '|',        
        'alignment', '|',
        'fontColor', 'fontBackgroundColor', '|',
        'bold', 'italic', 'underline', 'subscript', 'superscript', '|',
        'link', '|',
        'outdent', 'indent', '|',
        'bulletedList', 'numberedList', 'todoList', '|',
        'code', 'codeBlock', '|',
        'insertTable', '|',
        'uploadImage', '|',
        'ckfinder',
        'undo', 'redo'
    ],
    shouldNotGroupWhenFull: true
}
})
.then( editor => {   })
.catch( error => {console.error( error )} );
</script>