Question

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

是否有人知道某种类型的JavaScript Widget可以在textarea或类似内容中对HTML进行语法突出显示，同时仍然保持纯文本编辑器（没有WYSIWYG或高级函数）？

Answer 1

在常规文本区域中无法达到所需的控制级别。

如果您对此感到满意，请尝试CodeMirror或Ace （以前为skywriter和bespin）或{{3} （用于MS VSCode）。

从重复的帖子 - 必须的维基百科链接：Monaco

Answer 2

the response I've done to a similar question上的Online Code Editor programmers}：

首先，你可以看看这篇文章：
Wikipedia ― Comparison of JavaScript-based source code editors

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

EditArea - Demo as FileEditor谁是Yii Extension - （ Apache软件许可证，BSD，LGPL ）

这是EditArea，一个源代码的免费javascript编辑器。它允许编写格式良好的源代码，包括行编号，选项卡支持，搜索＆amp;替换（使用regexp）和实时语法高亮（可自定义）。
CodePress - Demo of Joomla! CodePress Plugin - （ LGPL ） - 它在Chrome中不起作用，看起来开发已经停止。

CodePress是基于网络的源代码编辑器，其语法高亮显示用JavaScript编写，可以在浏览器中输入文本时实时为文本着色。
CodeMirror - One of the many demo - （ MIT-style许可+可选commercial support ）

CodeMirror是一个JavaScript库，可用于为类似代码的内容创建一个相对令人愉快的编辑器界面 - 计算机程序，HTML标记等。如果已为您正在编辑的语言编写了一种模式，则代码将被着色，编辑器将选择帮助您缩进
Ace Ajax.org Cloud9 Editor - Demo - （ 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

我建议EditArea实时编辑语法高亮显示单元。

Answer 5

更新： Bespin现在是ACE，这里提到了最高评级的答案。改为使用ACE。

要和Mozilla一起去Bespin。它是使用HTML5功能构建的（所以它快速而快速，但不支持传统浏览器），但使用和击败我遇到的所有东西绝对令人惊讶 - 可能是因为它是Mozilla支持它，他们开发Firefox所以是的。 ..还有jQuery Plugin which contains a extension for it使jQuery更容易使用。

Answer 6

我所知道的唯一编辑器具有语法高亮功能，而对textarea的回退是Mozilla Bespin。谷歌围绕嵌入Bespin看看如何嵌入编辑器。我所知道的唯一现在使用此网站的是alpha Mozilla Jetpack Gallery（在提交Jetpack页面中），您可能想看看它们是如何包含它的。

还有一个blog post on embedding and reusing the Bespin editor可以帮到你。

Answer 7

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

但是，您可以通过在 textarea 后面小心放置一个 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 8

你为什么把它们表示为textareas？这是我的最爱：

http://alexgorbatchev.com/wiki/SyntaxHighlighter

但是如果您使用的是CMS，则可能是一个更好的插件。例如，wordpress有一个进化版本：

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

Answer 9

您可以var listenUri = new Uri("net.tcp://<Environment.MachineName>:<port>/IServer"; var binding = new NetTcpBinding(SecurityMode.None); foreach (ip address) { var addr = new Uri("net.tcp://<ip>:<port>/IServer"); Host.AddServiceEndpoint(typeof(IService), binding, addr, listenUri) }中的突出显示文字，使用后面小心翼翼的<textarea>。

结帐Highlight Text Inside a Textarea。

Answer 10

总而言之，这些是我们可以使用的：

highlight.js
prism.js &
microlight.js
谷歌美图

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

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

10 个答案: