Khmer Web Library

តាមធម្មតា បណ្តាកម្មវិធីគេហទំព័រទាំងឡាយណាដែលមានលក្ខណៈជា Blog តែងតែមានយ៉ាងហោចណាស់ក៏ផ្នែកពិសេសមួយកន្លែង នៅក្នុងទំព័រណាមួយ សំរាប់រៀបរៀបសរសេរអត្ថបទចុះផ្សាយនូវព័ត៌មានគ្រប់ជំពូក។

យ៉ាងណាម៉ិញ នៅក្នុងការបង្កើតផ្នែកពិសេសនោះ យើងអាចយកកម្មវិធីមានស្រាប់ CKEDITOR មកកែច្នៃជាកន្លែងសំរាប់សរសេររៀបរៀងការចុះផ្សាយផ្សេងៗជាភាសាខ្មែរ បានគ្រប់បែបយ៉ាងទាំងអស់។ លើសពីនេះទៀត អក្សរខ្មែរយូនីកូដដំណើរការបានយ៉ាងល្អឥតខ្ចោះ នៅក្នុងកម្មវិធីមួយនេះ។

ជាកិច្ចចាប់ផ្តើម យើងអាចទាញយកកញ្ចប់ CKEDITOR Full package ពីអាស័យដ្ឋានមួយនេះ https://ckeditor.com/ckeditor-4/download/ ។ បន្ទាប់មកទៀត យើងត្រូវ unzip កញ្ចប់នេះ និងចំឡងយកថត ckeditor យកទៅទុកនៅក្នុងថត public/javascript/ ដូចនៅក្នុងរូបខាងក្រោមនេះ៖

ក្រោយមកទៀត យើងចាំបាច់ត្រូវបង្កើតតំណរភ្ជាប់ទៅកាន់ឯកសារ ckeditor.js នៅក្នុងថត ckeditor ដោយបើកឯកសារ users.ejs នៅក្នុងថត views រួចសរសេរបន្ថែមនៅក្នុងថា៖

<!--users.ejs-->
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/users-style.css' />
    <link href="https://fonts.googleapis.com/css?family=Angkor|Battambang|Bayon|Bokor|Chenla|Content|Dangrek|Fasthand|Freehand|Hanuman|Kantumruy|Kdam+Thmor|Khmer|Koulen|Metal|Moul|Moulpali|Nokora|Odor+Mean+Chey|Preahvihear|Siemreap|Suwannaphum|Taprom&display=swap" rel="stylesheet">
    <link rel="icon" href="https://3.bp.blogspot.com/-P2DOhVx8mTw/Xko-i2asuHI/AAAAAAABlWc/O0vC3539nj8wOrgfjxCPoF9TEWb47rMxgCLcBGAsYHQ/s1600/download.png">
    <script src="/javascripts/ckeditor/ckeditor.js"></script>
  </head>
  <body>
    <%- include('users-header.ejs') %>
    <%- include('users-main.ejs') %>
    <%- include('users-footer.ejs') %>
  </body>
</html>

នៅលើបន្ទាត់លេខ 9 ការសរសេរថា <script src="/javascripts/ckeditor/ckeditor.js"></script> គឹជាការបង្កើតតំណរភ្ជាប់ដើម្បីយកក្បួនខ្នាតនៅក្នុងឯកសារ ckeditor.js មកប្រើក្នុងការបង្កើតកន្លែងសរសេររៀបរៀងការចុះផ្សាយ។

យ៉ាងណាម៉ិញ យើងអាចជ្រើសរើសយកកន្លែងមួយនៅក្នុងឯកសារ users-main.ejs ជាកន្លែងសំរាប់សំរាប់កម្មវិធី ckeditor ដោយធ្វើដូចខាងក្រោមនេះ៖

<!--users-main.ejs-->
<div id="main" class="main region">
  <%- include('users-main-sidebar.ejs') %>
  <%- include('users-main-content.ejs') %>
</div>

<!--users-main-sidebar.ejs-->
<div class="sidebar">
  <div class="title">
    <a href="/users/dashboard/">ផ្នែកការផ្សាយ</a>
  </div>
</div>

<!--users-main-content.ejs-->
<div class="content">
  <div class="posting">
    <div id="editor"></div>
    <script>
      CKEDITOR.replace( 'editor', {height:315} );
    </script>
  </div><!--posting-->
</div><!--content-->

ចំណែកឯនៅលើបន្ទាត់លេខ 6 នៃឯកសារ users-main-content.ejs ការសរសេរថា CKEDITOR.replace( 'editor', {height:270} ); គឺជាការបង្កើតកម្មវិធី ckeditor មួយមានឈ្មោះថា editor ដែលជាកម្មវិធីសំខាន់ជាងគេបំផុត នៅក្នុងការរៀបរៀងការផ្សាយនានា។

ទន្តឹមគ្នានេះដែរ ដើម្បីអាចចំឡងយកពុម្ពអក្សរខ្មែរយូនីកូដ មកប្រើប្រាស់នៅក្នុងកម្មវិធី ckeditor របស់យើងបាន យើងចាំបាច់ត្រូវធ្វើការកែប្រែមួយចំនួនដូចខាងក្រោមនេះ៖

<!--users.ejs-->
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/users-style.css' />
    <link href="https://fonts.googleapis.com/css?family=Angkor|Battambang|Bayon|Bokor|Chenla|Content|Dangrek|Fasthand|Freehand|Hanuman|Kantumruy|Kdam+Thmor|Khmer|Koulen|Metal|Moul|Moulpali|Nokora|Odor+Mean+Chey|Preahvihear|Siemreap|Suwannaphum|Taprom&display=swap" rel="stylesheet">
    <link rel="icon" href="https://3.bp.blogspot.com/-P2DOhVx8mTw/Xko-i2asuHI/AAAAAAABlWc/O0vC3539nj8wOrgfjxCPoF9TEWb47rMxgCLcBGAsYHQ/s1600/download.png">
    <script src="/javascripts/ckeditor/ckeditor.js"></script>
  </head>
  <body>
    <%- include('users-header.ejs') %>
    <%- include('users-main.ejs') %>
    <%- include('users-footer.ejs') %>
  </body>
</html>

/**
 * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */
 
CKEDITOR.editorConfig = function( config ) {
 // Define changes to default configuration here. For example:
 // config.language = 'fr';
 // config.uiColor = '#AADC6E';
 
 config.language = 'km';
 config.contentsCss = 'https://fonts.googleapis.com/css?family=Angkor|Battambang|Bayon|Bokor|Chenla|Content|Dangrek|Fasthand|Freehand|Hanuman|Kantumruy|Kdam+Thmor|Khmer|Koulen|Metal|Moul|Moulpali|Nokora|Odor+Mean+Chey|Preahvihear|Siemreap|Suwannaphum|Taprom&display=swap';
 config.font_names = 'បាត់ដំបង/Battambang/;បាយ័ន/Bayon;បូគោ/Bokor;ចេនឡា/Chenla;អត្ថបទ/Content;ដងរែក/Dangrek;ដៃរហ័ស/Fasthand;ដៃសេរី/Freehand;ហនុមាន/Hanuman;កន្ទុំរុយ/Kantumruy;ក្តាមថ្ម/Kdam Thmor;ខ្មែរ/Khmer;គូលែន/Koulen;លោហៈ/Metal;មូល/Moul;មូលបាលី/Moulpali;នគរា/Nokora;ឧត្តរមានជ័យ/Odor Mean Chey;ព្រះវិហារ/Preahvihear;សៀមរាប/Siemreap;សុវណ្ណភូមិ/Suwannaphum;តាព្រហ្ម/Taprom';
};

នៅបន្ទាត់លេខ 7 នៃឯកសារ users.ejs គឺជាការចំឡងយកពុម្ពអក្សរខ្មែរយូនីកូដមួយចំនួនមកប្រើនៅក្នុងកម្មវិធីគេហទំព័រ Blog របស់យើងទាំងមូល។

នៅលើបន្ទាត់លេខ 11 នៃឯកសារ config.js ស្ថិតនៅក្នុងថតនៃកម្មវិធី ckeditor ការសរសេរថា config.language = 'km'; គឺជាការកំណត់ភាសាខ្មែរជាភាសាប្រើប្រាស់នៅក្នុងកម្មវិធី ckeditor ទាំងមូល។ ប្រការនេះនឹងធ្វើអោយប្រព័ន្ធបង្អួចនៃកម្មវិធីនេះ ប្រើប្រាស់ភាសាខ្មែរសំរាប់បង្ហាញព័ត៌មានទាំងឡាយ។

នៅលើបន្ទាត់លេខ 12 នៃឯកសារ config.js គឺជាការចំលងយកពុម្ពអក្សរខ្មែរយូនីកូដពីប្រព័ន្ធ Google មកប្រើប្រាស់នៅក្នុងកម្មវិធី ckeditor ទាំងមូល។

ចុងក្រោយបង្អស់ នៅលើបន្ទាត់លេខ 13 គឺជាការបញ្ចូលពុម្ពអក្សរខ្មែរយូនីកូដ ចូលទៅក្នុងកន្លែងជ្រើសរើសពុម្ពអក្សរនៃកម្មវិធី ckeditor ៕