ดาวน์โหลด jodit - ดาวน์โหลดซอร์สโค้ด jodit

การสาธิตและเว็บไซต์อย่างเป็นทางการ
เวอร์ชันโปร
ผู้สร้าง
สนามเด็กเล่น - เล่นพร้อมตัวเลือก
เอกสาร
ดาวน์โหลดและเปลี่ยนแปลง
การเปลี่ยนแปลง
ตัวอย่าง
TypeScript Starter

เริ่มต้นใช้งาน

วิธีใช้

ดาวน์โหลดรุ่นล่าสุดหรือผ่าน NPM:

npm install jodit

คุณจะได้รับไฟล์ต่อไปนี้:

Inside /esm : ESM เวอร์ชันของตัวแก้ไข (เข้ากันได้กับเครื่องมือเช่น WebPack)
Inside /es5 , /es2015 , /es2018 , /es2021 : UMD Bundled Files (ไม่ลดขนาด)
Inside /es5 , /es2015 , /es2018 , /es2021 พร้อม .min.js Extension: UMD รวมและมินิไฟล์
types/index.d.ts : ไฟล์นี้ระบุ API ของตัวแก้ไข มันเป็นเวอร์ชันในขณะที่ทุกอย่างอื่นถือว่าเป็นส่วนตัวและอาจเปลี่ยนแปลงในแต่ละรุ่น

รวม jodit ในโครงการของคุณ

รวมไฟล์สองไฟล์ต่อไปนี้:

ES5 เวอร์ชัน:

 < link type =" text/css " rel =" stylesheet " href =" es2015/jodit.min.css " />
< script type =" text/javascript " src =" es2015/jodit.min.js " > </ script >

ES2021 เวอร์ชัน (สำหรับเบราว์เซอร์ที่ทันสมัยเท่านั้น):

 < link type =" text/css " rel =" stylesheet " href =" es2021/jodit.min.css " />
< script type =" text/javascript " src =" es2021/jodit.min.js " > </ script >

โมดูล ESM:

 < script type =" importmap " >
  {
    "imports" : {
      "autobind-decorator" : "https://unpkg.com/[email protected]/lib/esm/index.js"
    }
  }
</ script >
< link rel =" stylesheet " href =" ./node_modules/jodit/es2021/jodit.min.css " />
< script type =" module " >
  import { Jodit } from './node_modules/jodit/esm/index.js' ;
  Jodit . make ( '#editor' , {
    width : 600 ,
    height : 400
  } ) ;
</ script >

โมดูล ESM จะรวมชุดปลั๊กอินพื้นฐานและภาษาอังกฤษโดยอัตโนมัติ คุณสามารถรวมปลั๊กอินและภาษาเพิ่มเติมได้ตามต้องการด้วยตนเอง

 < script type =" importmap " >
  {
    "imports" : {
      "autobind-decorator" : "https://unpkg.com/[email protected]/lib/esm/index.js"
    }
  }
</ script >
< link rel =" stylesheet " href =" ./node_modules/jodit/es2021/jodit.min.css " />
< script type =" module " >
  import { Jodit } from './node_modules/jodit/esm/index.js' ;
  import './node_modules/jodit/esm/plugins/add-new-line/add-new-line.js' ;
  import './node_modules/jodit/esm/plugins/fullsize/fullsize.js' ;
  import de from './node_modules/jodit/esm/langs/de.js' ;

  Jodit . langs . de = de ;

  Jodit . make ( '#editor' , {
    width : 600 ,
    height : 400 ,
    language : 'de'
  } ) ;
</ script >

ใช้ CDN

cdnjs

 < link
  rel =" stylesheet "
  href =" https://cdnjs.cloudflare.com/ajax/libs/jodit/4.0.1/es2021/jodit.min.css "
/>
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jodit/4.0.1/es2021/jodit.min.js " > </ script >

UNPKG

 < link
  rel =" stylesheet "
  href =" https://unpkg.com/[email protected]/es2021/jodit.min.css "
/>
< script src =" https://unpkg.com/[email protected]/es2021/jodit.min.js " > </ script >

การใช้งาน

เพิ่มองค์ประกอบ textarea ลงใน HTML ของคุณ:

 < textarea id =" editor " name =" editor " > </ textarea >

เริ่มต้น jodit บน textarea:

 const editor = Jodit . make ( '#editor' ) ;
editor . value = '<p>start</p>' ;

สร้างปลั๊กอิน

 Jodit . plugins . yourplugin = function ( editor ) {
  editor . events . on ( 'afterInit' , function ( ) {
    editor . s . insertHTMl ( 'Text' ) ;
  } ) ;
} ;

เพิ่มปุ่มที่กำหนดเอง

 const editor = Jodit . make ( '.someselector' , {
  extraButtons : [
    {
      name : 'insertDate' ,
      iconURL : 'https://xdsoft.net/jodit/logo.png' ,
      exec : function ( editor ) {
        editor . s . insertHTML ( new Date ( ) . toDateString ( ) ) ;
        editor . synchronizeValues ( ) ; // For history saving
      }
    }
  ]
} ) ;

หรือ

 const editor = Jodit . make ( '.someselector' , {
  buttons : [ 'bold' , 'insertDate' ] ,
  controls : {
    insertDate : {
      name : 'insertDate' ,
      iconURL : 'https://xdsoft.net/jodit/logo.png' ,
      exec : function ( editor ) {
        editor . s . insertHTML ( new Date ( ) . toDateString ( ) ) ;
      }
    }
  }
} ) ;

ปุ่มพร้อมปลั๊กอิน

 Jodit . plugins . add ( 'insertText' , function ( editor ) {
  editor . events . on ( 'someEvent' , function ( text ) {
    editor . s . insertHTMl ( 'Hello ' + text ) ;
  } ) ;
} ) ;

// or

Jodit . plugins . add ( 'textLength' , {
  init ( editor ) {
    const div = editor . create . div ( 'jodit_div' ) ;
    editor . container . appendChild ( div ) ;
    editor . events . on ( 'change.textLength' , ( ) => {
      div . innerText = editor . value . length ;
    } ) ;
  } ,
  destruct ( editor ) {
    editor . events . off ( 'change.textLength' ) ;
  }
} ) ;

// or use class

Jodit . plugins . add (
  'textLength' ,
  class textLength {
    init ( editor ) {
      const div = editor . create . div ( 'jodit_div' ) ;
      editor . container . appendChild ( div ) ;
      editor . events . on ( 'change.textLength' , ( ) => {
        div . innerText = editor . value . length ;
      } ) ;
    }
    destruct ( editor ) {
      editor . events . off ( 'change.textLength' ) ;
    }
  }
) ;

const editor = Jodit . make ( '.someselector' , {
  buttons : [ 'bold' , 'insertText' ] ,
  controls : {
    insertText : {
      iconURL : 'https://xdsoft.net/jodit/logo.png' ,
      exec : function ( editor ) {
        editor . events . fire ( 'someEvent' , 'world!!!' ) ;
      }
    }
  }
} ) ;

FileBrowser และ Updoader

สำหรับการทดสอบโมดูล FileBrowser และ Uploader จำเป็นต้องติดตั้งตัวเชื่อมต่อ PHP

composer create-project --no-dev jodit/connector

เรียกใช้เซิร์ฟเวอร์ทดสอบ PHP

php -S localhost:8181 -t ./

และตั้งค่าตัวเลือกสำหรับ jodit:

 const editor = Jodit . make ( '#editor' , {
  uploader : {
    url : 'http://localhost:8181/index-test.php?action=fileUpload'
  } ,
  filebrowser : {
    ajax : {
      url : 'http://localhost:8181/index-test.php'
    }
  }
} ) ;