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

คำเตือนการเปลี่ยนแปลงที่กำลังจะเกิดขึ้น

เมื่อวันที่ 18.10 เราจะเปิดตัวรุ่นใหญ่ใหม่ (V8) ของโปรแกรมแก้ไขข้อความที่หลากหลายซึ่งเป็นการเขียนใหม่ของ codebase เก่า คำเตือนนี้ไม่สำคัญสำหรับผู้ใช้แพ็คเกจ NPM โดยใช้การกำหนดเวอร์ชัน แต่ผู้ใช้ Bundle UNPKG (http://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js) จะสังเกตเห็นว่าชุดล่าสุดของรหัสจะไม่ทำงานตามที่คาดไว้อีกต่อไป เพื่อหลีกเลี่ยงการเปลี่ยนแปลงในระบบของคุณคุณสามารถตั้งค่าเวอร์ชันของแพ็คเกจ UNPKG อย่างชัดเจนเป็นเวอร์ชันที่เสถียรล่าสุดของ V7 ดังนี้: http://unpkg.com/[email protected]/dist/rich-text-editor-bundle.js

สิ่งนี้จะทำให้คุณมีเวลาในการพัฒนาระบบของคุณเพื่อรองรับเวอร์ชันใหม่เมื่อเปิดตัว

abitti.net

การใช้นโยบายเครื่องหมายการค้า Abitti

โปรแกรมแก้ไขข้อความที่สมบูรณ์พร้อมการสนับสนุนทางคณิตศาสตร์สำหรับคณะกรรมการสอบการบวชการบวชของฟินแลนด์ การสาธิตสดสามารถดูได้ที่ https://math-demo.abitti.fi/

ตั้งแต่ v4.0.0 มีเพียงรหัส ES2017 ที่มีโมดูล ES เท่านั้น (ในไดเรกทอรี dist ) หากคุณต้องการใช้ไลบรารีนี้อาจจำเป็นต้องใช้ Bundler เช่น WebPack หรือ Rollup

การใช้งาน

การใช้งานกับ NPM

ติดตั้งแพ็คเกจด้วย npm install rich-text-editor ตัวแก้ไขข้อความที่สมบูรณ์สามารถใช้เป็นได้

  • ส่วนประกอบตอบสนอง import RichTextEditor from 'rich-text-editor'
  • หรือเป็นฟังก์ชั่นในแอพที่ไม่ได้ใช้ react import { makeRichText } from 'rich-text-editor/dist/rich-text-editor'

คุณสมบัติส่วนใหญ่ที่ส่งผ่านไปยังส่วนประกอบหรือฟังก์ชั่นการเริ่มต้นอธิบายไว้ด้านล่าง ข้อมูลเพิ่มเติมสามารถพบได้ในประเภทและ/หรือซอร์สโค้ด

การใช้เป็นชุด CDN

เพิ่มแท็กสคริปต์ลงในหน้า HTML ของคุณซึ่งแหล่งที่มาคือ https://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js , เช่น <script type="module" src="https://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js"></script>

สิ่งนี้จะเพิ่ม makeRichText ไปยังหน้าต่างซึ่งสามารถใช้ในการเริ่มต้นโปรแกรมแก้ไข

ฟังก์ชั่นใช้พารามิเตอร์ต่อไปนี้เป็นวัตถุ:

สำคัญ ค่าเริ่มต้น
คอนเทนเนอร์ document.getElementById ('Rich-text-editor-root')
ภาษา 'fi'
baseurl -
อนุญาตให้ใช้งาน ['image/png', 'image/jpeg']
onvaluechange -
TextareAprops -

ตัวอย่าง: 

 {
  container: document.getElementById('rich-text-editor-root')!,
  language: 'FI',
  baseUrl: '',
  allowedFileTypes: ['image/png', 'image/jpeg'],
  onValueChange: () => {},
  textAreaProps: {},
}

TextareAprops ถูกส่งผ่านไปยังองค์ประกอบ DIV พื้นฐานที่เป็นองค์ประกอบตัวแก้ไขที่มองเห็นได้นี่คือสิ่งที่เกี่ยวข้องกับการกำหนดค่าของผู้ใช้ CDN:

สำคัญ พิมพ์ วัตถุประสงค์
ariainvalid บูลีน เพิ่ม Aria-invalid
Arialabelledby สาย เพิ่ม Aria-Labelledby
บรรณาธิการ react.cssproperties ตรงคุณสมบัติ CSS โดยตรงไปยังองค์ประกอบตัวแก้ไข
ชื่อชั้นเรียน สาย ชื่อคลาสเพิ่มเติมสำหรับองค์ประกอบตัวแก้ไข
รหัสประจำตัว สาย ID-Field ไปยังองค์ประกอบตัวแก้ไข
หรั่ง สาย Lang-Field ไปยัง Editor-Element เพื่อการเข้าถึง

เป้าหมาย (อ่านสิ่งนี้ก่อนส่ง)

Rich Text Editor ได้รับการพัฒนาเพื่อให้ผู้สมัครรับการตรวจการบวชการบวชของฟินแลนด์เพื่อแนบภาพหน้าจอและการเขียนสมการเป็นส่วนหนึ่งของการส่งของพวกเขา จุดมุ่งหมายของเราคือไม่สร้างการแทนที่แบบหล่นอเนกประสงค์ทั่วไปสำหรับ Textarea แต่เป็นตัวแก้ไขที่ทำงานใน Abitti และเบราว์เซอร์ฝังตัว

ในขณะที่เราเฉลิมฉลองรายงานข้อผิดพลาดทุกครั้งคำขอคุณลักษณะและคำขอดึงเราขอให้คุณจดจำการติดตาม:

  • ปัญหาส่วนใหญ่ที่เกี่ยวข้องกับการป้อนสูตรและการแสดงผลน้ำยางเกิดจากไลบรารี Mathjax และ Mathquill เราไม่มีทรัพยากรในการเขียนคำขอดึงตามปัญหาที่ส่งถึงเรา ด้วยเหตุผลที่คล้ายกันเราจะไม่ผ่านปัญหาต้นน้ำที่รายงานถึงเรา
  • เราไม่ได้ให้ความสนใจกับปัญหาหรือดึงคำขอที่อยู่นอกภารกิจของเรา - Abitti

เราหวังว่าคุณจะเข้าใจความปรารถนาของเราที่จะมุ่งเน้นไปที่เป้าหมายของเราที่ระบุตามกฎหมาย

การพึ่งพาอาศัยกัน

  • Mathquill (https://github.com/digabi/mathquill)
  • Mathjax-node
  • jQuery
  • sanitize-html

เริ่มต้น

  1. ติดตั้ง node.js
  2. เรียกใช้ npm install
  3. เรียกใช้ npm run dev
  4. การทดสอบเบราว์เซอร์: http: // localhost: 5111/test/tests.html
  5. การทดสอบด้วยตนเอง: http: // localhost: 5111/test/tests.html? grep = คู่มือ

ทดสอบชุดข้อมูลในพื้นที่

  1. รัน npm run build
  2. เรียกใช้ npm run dev-server
  3. เรียกใช้เซิร์ฟเวอร์ HTTP อย่างง่ายในรูทโครงการตัวอย่างเช่น python3 -m http.server 8080
  4. แก้ไข dev/index.html แท็กสคริปต์เพื่อชี้ไปที่ Bundle: <script type="module" src="/dist/rich-text-editor-bundle.js"></script> (อย่าทำสิ่งนี้)
  5. ไปที่ http: // localhost: 8080/dev/index.html

ตัวอย่างการใช้งานโดยตรง

ตัวอย่าง: http://digabi.github.io/rich-text-editor/

ที่มา: https://github.com/digabi/rich-text-editor/blob/master/index.html

ใบอนุญาต

https://opensource.org/licenses/mit

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