当前位置：文江博客话题详情

可以即时进行语法突出显示的文本区域？

发布于 2024-08-08 08:37:57 字数 203 浏览 10 评论 0原文

出于更容易维护的原因，我在 CMS 中存储了许多 HTML 块。它们由 </code> 表示。

有谁知道某种 JavaScript Widget 可以在 textarea 或类似内容中对 HTML 进行语法突出显示，同时仍然保留纯文本编辑器（没有所见即所得或高级功能）？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

左岸枫 2024-08-15 08:37:57

无法在常规中实现对演示文稿的所需控制级别</code></a>。

如果您同意，请尝试 CodeMirror 或 Ace 或 Monaco （在 VS Code 中使用）。

请参阅 Wikipedia 上的基于 JavaScript 的源代码编辑器的比较。

回复收藏 0 原文

蓝咒 2024-08-15 08:37:57

这是我对类似问题的回答 (在线代码编辑器）对于程序员：

首先，你可以看一下到这篇文章：
维基百科 ― 基于 JavaScript 的源代码编辑器的比较。

如需了解更多信息，这里有一些似乎符合您要求的工具：

EditArea ― 作为 FileEditor 演示 谁是一个 Yii 扩展 ― （Apache 软件许可证、BSD、LGPL ）
<块引用>
这是 EditArea，一个免费的 JavaScript 源代码编辑器。它允许编写格式良好的源代码，包括行编号、选项卡支持、搜索和搜索。替换（使用正则表达式）和实时语法突出显示（可自定义）。
CodePress ― Joomla 演示！ CodePress 插件 ― (LGPL) ― 它在 Chrome 中不起作用，看起来开发已经停止。
<块引用>
CodePress 是基于 Web 的源代码编辑器，具有用 JavaScript 编写的语法突出显示功能，可在浏览器中键入文本时实时为其着色。
CodeMirror ― 众多演示之一 ― (MIT 风格< /a> 许可证 + 可选商业支持）
<块引用>
CodeMirror 是一个 JavaScript 库，可用于为类似代码的内容（计算机程序、HTML 标记等）创建相对令人愉悦的编辑器界面。如果已为您正在编辑的语言编写了模式，则代码将被着色，并且编辑器将选择性地帮助您缩进
Ace Ajax.org Cloud9 编辑器 ― 演示 ― (Mozilla 三重许可证 (MPL/GPL/LGPL))
<块引用>
Ace 是一个用 JavaScript 编写的独立代码编辑器。我们的目标是创建一个基于 Web 的代码编辑器，匹配并扩展现有本机编辑器（例如 TextMate、Vim 或 Eclipse）的功能、可用性和性能。它可以轻松嵌入到任何网页和 JavaScript 应用程序中。 Ace 是作为 Cloud9 IDE 的主要编辑器开发的，也是 Mozilla Skywriter (Bespin) 项目的后继者。

回复收藏 0 原文

小傻瓜 2024-08-15 08:37:57

CodePress 执行此操作，编辑区域。两者都是开源的。

回复收藏 0 原文

勿挽旧人 2024-08-15 08:37:57

您可以使用小心放置在</code> 后面的<code><div></code> 来<strong>突出显示</strong>文本。

查看突出显示文本区域内的文本。

回复收藏 0 原文

ま昔日黯然 2024-08-15 08:37:57

我建议使用 EditArea 来实时编辑语法突出显示的文本区域。

回复收藏 0 原文

香草可樂 2024-08-15 08:37:57

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

但是，您可以通过小心地将 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>amp;</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

You can't actually render markup inside a textarea.

But, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there.

JavaScript takes care of syncing the content and scroll position.

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>amp;</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>

Original Pen: https://codepen.io/lonekorean/pen/gaLEMR

回复收藏 0 原文

桃扇骨 2024-08-15 08:37:57

更新： Bespin 现在是 ACE，此处评分最高的答案提到了这一点。请改用 ACE。

必须使用 Mozilla 的 Bespin。它是使用 HTML5 功能构建的（因此速度很快，但不支持旧版浏览器），但使用起来绝对令人惊叹，并且击败了我遇到的所有内容 - 可能是因为它有 Mozilla 支持，而且他们开发了 Firefox，所以是的。 .. 还有一个 jQuery 插件，其中包含一个扩展使其更容易与 jQuery 一起使用。

回复收藏 0 原文

泪眸﹌ 2024-08-15 08:37:57

总之，我们可以使用这些：

Highlight.js、
Prism.js 和 Prism.js。
Microlight.js
Google Prettyprint
Pygments.org
Hilite.me
Microlight.js
另外你可以尝试一种轻量级的自定义 - https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/

为了保存您的时间和精力，在这个范围内进一步研究是有好处的。

回复收藏 0 原文

伴梦长久 2024-08-15 08:37:57

据我所知，唯一具有语法突出显示和文本区域回退功能的编辑器是 Mozilla Bespin。谷歌搜索嵌入 Bespin 以了解如何嵌入编辑器。据我所知，目前唯一使用此功能的网站是 alpha Mozilla Jetpack Gallery（位于提交 Jetpack 页面），您可能想看看他们如何包含它。

还有一篇关于嵌入和重用 Bespin 编辑器的博客文章这可能对你有帮助。

回复收藏 0 原文