Textarea可以动态进行语法高亮显示吗？

Question

我在CMS中存储了许多HTML块,以便于维护.它们由<textarea>s 代表.

有没有人知道某种类型的JavaScript Widget可以在一个textarea或类似的内容中为HTML进行语法高亮,同时仍然保持纯文本编辑器(没有WYSIWYG或高级功能)？

Answer 1

在常规文本区域中无法实现对演示文稿的所需控制级别.

如果您对此感到满意,请尝试使用CodeMirror或Ace(以前的skywriter和bespin).

从重复的线程 - 强制性维基百科链接:http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

Answer 2

以下是我对程序员的类似问题(在线代码编辑器)所做的回应:

首先,您可以查看这篇文章:
Wikipedia - 基于JavaScript的源代码编辑器的比较.

更多信息,以下是一些似乎符合您要求的工具:

• EditArea - 演示为FileEditor谁是Yii的扩展 - (Apache软件许可证,BSD,LGPL)

  这是EditArea,一个源代码的免费javascript编辑器.它允许编写格式良好的源代码,包括行编辑,选项卡支持,搜索和替换(使用regexp)和实时语法突出显示(可自定义).

• CodePress - Joomla的演示!CodePress插件 - (LGPL) - 它在Chrome中不起作用,看起来开发已经停止.

  CodePress是基于Web的源代码编辑器,具有用JavaScript编写的语法突出显示,可以在浏览器中输入文本时实时为文本着色.

• CodeMirror - 许多演示之一 - (MIT风格的许可+可选的商业支持)

  CodeMirror是一个JavaScript库,可用于为类似代码的内容创建一个相对令人愉快的编辑器界面 - 计算机程序,HTML标记等.如果已为您正在编辑的语言编写了一种模式,则代码将被着色,编辑器将选择帮助您缩进

• Ace Ajax.org Cloud9编辑器 - 演示 - (Mozilla tri-license(MPL/GPL/LGPL))

  Ace是一个用JavaScript编写的独立代码编辑器.我们的目标是创建一个基于Web的代码编辑器,该编辑器匹配并扩展现有本机编辑器(如TextMate,Vim或Eclipse)的功能,可用性和性能.它可以轻松嵌入任何网页和JavaScript应用程序中.Ace是Cloud9 IDE的主要编辑者,也是Mozilla Skywriter(Bespin)项目的继承者.

Answer 3

CodePress就像EditArea一样.两者都是开源的.

Answer 4

您可以突出显示文本<textarea>，使用<div>小心地放在后面。

查看在 Textarea 中突出显示文本。

Answer 5

我建议使用EditArea来实时编辑语法hightlighted textarea.

Answer 6

您实际上无法在文本区域内呈现标记。

但是，您可以通过小心地将 div 放置在文本区域后面并在其中添加突出显示标记来伪造它。

JavaScript 负责同步内容和滚动位置。

var $container = $('.container');
var $backdrop = $('.backdrop');
var $highlights = $('.highlights');
var $textarea = $('textarea');
var $toggle = $('button');


var ua = window.navigator.userAgent.toLowerCase();
var isIE = !!ua.match(/msie|trident\/7|edge/);
var isWinPhone = ua.indexOf('windows phone') !== -1;
var isIOS = !isWinPhone && !!ua.match(/ipad|iphone|ipod/);

function applyHighlights(text) {
  text = text
    .replace(/\n$/g, '\n\n')
    .replace(/[A-Z].*?\b/g, '<mark>$&</mark>');

  if (isIE) {
    // IE wraps whitespace differently in a div vs textarea, this fixes it
    text = text.replace(/ /g, ' <wbr>');
  }

  return text;
}

function handleInput() {
  var text = $textarea.val();
  var highlightedText = applyHighlights(text);
  $highlights.html(highlightedText);
}

function handleScroll() {
  var scrollTop = $textarea.scrollTop();
  $backdrop.scrollTop(scrollTop);

  var scrollLeft = $textarea.scrollLeft();
  $backdrop.scrollLeft(scrollLeft);
}

function fixIOS() {
  $highlights.css({
    'padding-left': '+=3px',
    'padding-right': '+=3px'
  });
}

function bindEvents() {
  $textarea.on({
    'input': handleInput,
    'scroll': handleScroll
  });
}

if (isIOS) {
  fixIOS();
}

bindEvents();
handleInput();

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 30px;
  background-color: #fff;
  caret-color: #000;
}

.container,
.backdrop,
textarea {
  width: 460px;
  height: 180px;
}

.highlights,
textarea {
  padding: 10px;
  font: 20px/28px 'Open Sans', sans-serif;
  letter-spacing: 1px;
}

.container {
  display: block;
  margin: 0 auto;
  transform: translateZ(0);
  -webkit-text-size-adjust: none;
}

.backdrop {
  position: absolute;
  z-index: 1;
  border: 2px solid #685972;
  background-color: #fff;
  overflow: auto;
  pointer-events: none;
  transition: transform 1s;
}

.highlights {
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #000;
}

textarea {
  display: block;
  position: absolute;
  z-index: 2;
  margin: 0;
  border: 2px solid #74637f;
  border-radius: 0;
  color: transparent;
  background-color: transparent;
  overflow: auto;
  resize: none;
  transition: transform 1s;
}

mark {
  border-radius: 3px;
  color: red;
  background-color: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="backdrop">
    <div class="highlights"></div>
  </div>
  <textarea>All capitalized Words will be highlighted. Try Typing to see how it Works</textarea>
</div>

原笔： https: //codepen.io/lonekorean/pen/gaLEMR

Answer 7

更新: Bespin现在是ACE,这里提到了最高级别的答案.请改用ACE.

得与Mozilla的Bespin一起去.它是使用HTML5功能构建的(所以它快速而快速,但不支持传统浏览器),但绝对令人惊讶地使用并击败我遇到的一切 - 可能因为它是Mozilla支持它,并且他们开发Firefox所以是的. ..还有一个jQuery插件,它包含一个扩展,使它更容易使用jQuery.

Answer 8

总而言之，我们可以选择以下这些：

• 高亮.js
• 棱镜.js &
• 微光.js
• 谷歌漂亮打印
• Pygments.org
• 海力达网
• 微光.js
• 否则，您可以尝试一种轻量级的自定义 - https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/

为了节省您的时间和精力，最好在这些范围内进一步调查。