หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ทรัพยากรอื่นๆ
ดาวน์โหลด

ชุดเครื่องมือแก้ไขข้อความที่สมบูรณ์

สร้างบรรณาธิการข้อความที่หลากหลายใน Elm

Rich Text Editor Toolkit เป็นโครงการโอเพ่นซอร์สเพื่อสร้างตัวแก้ไขแพลตฟอร์มข้ามบนเว็บ แพ็คเกจนี้ถือว่าเป็นที่ชื่นชอบในฐานะอุปกรณ์ I/O และใช้เหตุการณ์เบราว์เซอร์และผู้สังเกตการณ์การกลายพันธุ์เพื่อตรวจจับการเปลี่ยนแปลงและอัปเดตตัวเอง โมเดลของตัวแก้ไขถูกกำหนดและตรวจสอบโดยข้อกำหนดที่ตั้งโปรแกรมได้ซึ่งช่วยให้คุณสร้างตัวแก้ไขที่ปรับแต่งเองที่เหมาะกับความต้องการของคุณ

แพ็คเกจนี้ได้รับแรงบันดาลใจอย่างมากจากกรอบการแก้ไขข้อความอื่น ๆ เช่น Prosemirror, Trix และ DraftJS

ทรัพยากร

  • แพ็คเกจ Elm: https://package.elm-lang.org/packages/mweiss/elm-rte-toolkit/latest/
  • หน้าตัวอย่าง: https://mweiss.github.io/elm-rte-toolkit (ซอร์สโค้ดอยู่ในไดเรกทอรีตัวอย่าง)
  • Wiki: https://github.com/mweiss/elm-rte-toolkit/wiki

เริ่มต้น

แพ็คเกจนี้ต้องใช้เว็บคอมโพสิตบางส่วนเพื่อเริ่มต้น

หากคุณสามารถรองรับ ES6 คุณสามารถรวม JS/Elmeditor.js ในโครงการของคุณและนำเข้าพร้อมกับ polyfill เว็บคอมโพเนนต์ที่คุณชื่นชอบ 

 import '@webcomponents/webcomponentsjs/webcomponents-bundle.js'
import 'elmEditor.js'

การสาธิตในที่เก็บนี้ทำเช่นนั้น

อย่างไรก็ตามหากคุณต้องการใช้ Bundler และ Polyfill คุณสามารถนำเข้าโพลีฟิลที่คุณชื่นชอบและนำเข้าแพ็คเกจ NPM ที่มี JS ที่เก็บนี้รวบรวมกับ ES5 ด้วย NPM เช่น: 

npm install --save @webcomponents/webcomponentsjs
npm install --save elm-rte-toolkit

และในจาวาสคริปต์ของคุณคุณสามารถนำเข้าได้เช่นนั้น: 

 import '@webcomponents/webcomponentsjs/webcomponents-bundle.js'
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'
import 'elm-rte-toolkit' ;

เริ่มต้น CSS

คุณสามารถใช้สไตล์ใดก็ได้ที่คุณต้องการสำหรับตัวแก้ไข แต่คุณอาจต้องการใช้สิ่งต่อไปนี้เป็นจุดกระโดด สิ่งสำคัญที่สุดคือคุณอาจต้องการ white-space: pre-wrap; เพื่อแยกความแตกต่างระหว่างหลายช่องว่าง: 

. rte-main {
    text-align : left;
    outline : none;
    user-select : text;
    -webkit-user-select : text;
    white-space : pre-wrap;
    word-wrap : break-word;
}

. rte-hide-caret {
    caret-color : transparent;
}

การบริจาค

แพ็คเกจนี้เป็นซอฟต์แวร์โอเพนซอร์ซที่แจกจ่ายได้อย่างอิสระภายใต้เงื่อนไขของใบอนุญาต BSD-3-clause ซอร์สโค้ดโฮสต์บน GitHub

การมีส่วนร่วมในรูปแบบของรายงานข้อผิดพลาดการร้องขอการดึงหรือการอภิปรายอย่างรอบคอบในตัวติดตามปัญหา GitHub ยินดีต้อนรับ โปรดดูจรรยาบรรณสำหรับคำมั่นสัญญาของเราต่อผู้มีส่วนร่วม

เรียกใช้การสาธิต

การสาธิตถูกบูตด้วย Create-Elm-App ดูที่ที่เก็บสำหรับคำแนะนำเกี่ยวกับวิธีการติดตั้งคำสั่ง elm-app

ในการดีบักการสาธิตในพื้นที่ให้เรียกใช้สิ่งต่อไปนี้จากไดเรกทอรีรากของที่เก็บ: 

 cd demo
elm-app start

ในการสร้างการสาธิตให้เรียกใช้สิ่งต่อไปนี้จากไดเรกทอรีรากของที่เก็บ: 

 cd demo
./build.sh

การสาธิตนั้นโฮสต์ด้วย GH-PAGES ดังนั้นเพื่ออัปเดตการสาธิตโปรดอัปเดตสาขา GH-PAGES ด้วยบิลด์ล่าสุด

การทดสอบกำลังดำเนินการ

สำหรับตอนนี้เนื่องจากปัญหาแพ็คเกจลึกลับด้วยการทดสอบ ELM ฉันไม่ต้องการแก้ไขข้อบกพร่องการทดสอบสำหรับแพ็คเกจอยู่ในโฟลเดอร์แอพสาธิต เพื่อเรียกใช้การทดสอบ: 

 cd demo
elm-test
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด