ข้อความที่สามารถเน้นไวยากรณ์ได้ทันทีหรือไม่

ฉันกำลังเก็บบล็อก HTML จำนวนหนึ่งไว้ใน CMS เพื่อเหตุผลในการบำรุงรักษาที่ง่ายขึ้น มันถูกแทนด้วย<textarea>s

มีใครรู้บ้างว่าวิดเจ็ต JavaScript ของบางประเภทที่สามารถเน้นไวยากรณ์สำหรับ HTML ภายในtextareaหรือคล้ายกันในขณะที่ยังคงใช้โปรแกรมแก้ไขข้อความธรรมดา (ไม่มี WYSIWYG หรือฟังก์ชั่นขั้นสูง)

เป็นไปไม่ได้ที่จะบรรลุระดับที่ต้องการในการควบคุมการนำเสนอใน textarea ปกติ

หากคุณกำลังตกลงกับที่พยายามCodeMirrorหรือAce (เดิมSkywriterและBespin )หรือโมนาโก (ใช้ใน MS VSCode)

จากเธรดซ้ำ - ลิงก์วิกิพีเดียที่บังคับ: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

นี่คือคำตอบที่ฉันได้ทำกับคำถามที่คล้ายกัน ( Online Code Editor ) บนโปรแกรมเมอร์ :

ครั้งแรกที่คุณสามารถดูจากบทความนี้:
วิกิพีเดีย - การเปรียบเทียบที่ใช้ JavaScript บรรณาธิการรหัสแหล่งที่มา

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

• EditArea - สาธิตเป็น FileEditorซึ่งเป็นYii Extension - ( Apache Software License, BSD, LGPL )

  นี่คือ EditArea ตัวแก้ไขจาวาสคริปต์ฟรีสำหรับซอร์สโค้ด อนุญาตให้เขียนซอร์สโค้ดที่มีการจัดรูปแบบที่ดีพร้อมการนับบรรทัดการสนับสนุนแท็บการค้นหาและแทนที่ (ด้วย regexp) และการเน้นไวยากรณ์สด (ปรับแต่งได้)

• CodePress - ตัวอย่างJoomla! ปลั๊กอิน CodePress - ( LGPL ) - มันไม่ทำงานใน Chrome และดูเหมือนว่าการพัฒนาหยุดลง

  CodePress เป็นโปรแกรมแก้ไขซอร์สโค้ดบนเว็บพร้อมการเน้นไวยากรณ์ที่เขียนใน JavaScript ที่ให้สีข้อความแบบเรียลไทม์ขณะที่พิมพ์ในเบราว์เซอร์

• CodeMirror - หนึ่งในตัวอย่างมากมาย - ( สิทธิ์การใช้งานสไตล์ MIT + การสนับสนุนเชิงพาณิชย์เพิ่มเติม )

  CodeMirror เป็นไลบรารี JavaScript ที่สามารถใช้สร้างอินเทอร์เฟซตัวแก้ไขที่น่าพอใจสำหรับเนื้อหาที่คล้ายโค้ด - โปรแกรมคอมพิวเตอร์มาร์กอัป HTML และที่คล้ายกัน หากมีการเขียนโหมดสำหรับภาษาที่คุณกำลังแก้ไขรหัสจะเป็นสีและตัวแก้ไขจะช่วยคุณในการเยื้อง

• Ace Ajax.org ตัวแก้ไข Cloud9 - การสาธิต - ( Mozilla tri-license (MPL / GPL / LGPL) )

  Ace เป็นโปรแกรมแก้ไขโค้ดแบบสแตนด์อโลนที่เขียนด้วย JavaScript เป้าหมายของเราคือการสร้างโปรแกรมแก้ไขโค้ดบนเว็บที่จับคู่และขยายคุณสมบัติความสามารถในการใช้งานและประสิทธิภาพของเครื่องมือแก้ไขที่มีอยู่ในปัจจุบันเช่น TextMate, Vim หรือ Eclipse สามารถฝังลงในเว็บเพจและแอปพลิเคชัน JavaScript ได้อย่างง่ายดาย Ace ได้รับการพัฒนาเป็นตัวแก้ไขหลักสำหรับCloud9 IDEและตัวต่อของโครงการ Mozilla Skywriter (Bespin)

CodePressไม่นี้เช่นเดียวกับEditArea ทั้งคู่เป็นโอเพ่นซอร์ส

ฉันจะแนะนำEditAreaสำหรับการแก้ไข textarea ไฮไลต์ที่มีไวยากรณ์แบบสด

อัปเดต: Bespin ตอนนี้เป็น ACE ซึ่งถูกกล่าวถึงโดยคำตอบที่ได้รับคะแนนสูงสุดที่นี่ ใช้ ACE แทน

ต้องไปกับBespinโดย Mozilla มันสร้างขึ้นโดยใช้คุณสมบัติ HTML5 (ดังนั้นจึงรวดเร็วและรวดเร็ว แต่ไม่รองรับเบราว์เซอร์รุ่นเก่า) แต่น่าทึ่งมากที่จะใช้และเอาชนะทุกสิ่งที่ฉันเจอ - อาจเป็นเพราะ Mozilla ให้การสนับสนุนและพวกเขาก็พัฒนา Firefox .. นอกจากนี้ยังมีปลั๊กอิน jQuery ซึ่งมีส่วนขยายเพื่อให้ใช้งานง่ายขึ้นด้วย jQuery

คุณสามารถไฮไลต์ข้อความใน a <textarea>โดยใช้ที่<div>วางไว้ด้านหลังอย่างระมัดระวัง

ตรวจสอบเน้นข้อความภายใน textarea

บรรณาธิการเดียวที่ฉันรู้ที่มีการเน้นไวยากรณ์และทางเลือกที่จะเป็น textarea Mozilla Bespin Google เพื่อฝัง Bespin เพื่อดูวิธีฝังโปรแกรมแก้ไข เว็บไซต์เดียวที่ฉันรู้จักที่ใช้สิ่งนี้ในตอนนี้คือแกลลอรี่ Mozilla Jetpackอัลฟามาก ๆ(ในหน้าส่ง Jetpack) และคุณอาจต้องการดูว่าพวกเขารวมมันอย่างไร

นอกจากนี้ยังมีโพสต์บล็อกเกี่ยวกับการฝังและใช้ตัวแก้ไข Bespinที่อาจช่วยคุณได้

ทำไมคุณถึงเป็นตัวแทนของ textareas? นี่คือสิ่งที่ฉันชอบ:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

แต่ถ้าคุณใช้ CMS อาจมีปลั๊กอินที่ดีกว่า ตัวอย่างเช่น wordpress มีเวอร์ชันที่พัฒนาแล้ว:

http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/