【问题标题】:Textarea that can do syntax highlighting on the fly?可以即时进行语法突出显示的文本区域?
【发布时间】:2010-12-09 19:16:00
【问题描述】:

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

有没有人知道某种 JavaScript Widget,它可以在 textarea 或类似文件中为 HTML 进行语法突出显示,同时仍保持纯文本编辑器(无所见即所得或高级功能)?

【问题讨论】:

  • W3C 是否有可能在 (X)HTML 规范和相关标准的未来版本中使 textarea 更加通用和可扩展?
  • @FabienMénager 您的重复链接已被删除。

标签: javascript html richtextbox widget highlighting


【解决方案1】:

在常规textarea 中无法实现对演示文稿的所需控制级别。

如果您同意,请尝试 CodeMirrorAceMonaco(用于 MS VSCode)。

来自重复的线程 - 一个强制性的维基百科链接:Comparison of JavaScript-based source code editors

【讨论】:

  • 实际上,Bespin 使用常规的 textarea 回退来添加对屏幕阅读器的支持(因此残疾人也可以轻松使用它)。
  • CodeMirror 看起来完全符合我的需要。只要它表现得像一个 textarea,我就可以接受它不是一个。
  • 感谢您的回答。在阅读了您的回复后发现了这一点,这让我大吃一惊! :) github.com/securingsincity/react-ace
【解决方案2】:

这里是the response I've done to a similar questionOnline Code Editorprogrammers

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

更多,这里有一些似乎符合您要求的工具:

  • EditAreaDemo as FileEditorYii Extension ― (Apache 软件许可证、BSD、LGPL

    这里是 EditArea,一个免费的源代码 javascript 编辑器。它允许编写格式良好的源代码,具有行编号、选项卡支持、搜索和替换(使用正则表达式)和实时语法突出显示(可自定义)。

  • CodePressDemo of Joomla! CodePress Plugin ― (LGPL) ― 它在 Chrome 中不起作用,看起来开发已经停止。

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

  • CodeMirrorOne of the many demo ― (MIT-style 许可证 + 可选 commercial support)

    CodeMirror 是一个 JavaScript 库,可用于为类似代码的内容(计算机程序、HTML 标记等)创建一个相对舒适的编辑器界面。如果已为您正在编辑的语言编写了模式,则代码将被着色,并且编辑器将选择性地帮助您缩进

  • Ace Ajax.org Cloud9 EditorDemo ― (Mozilla 三许可证 (MPL/GPL/LGPL))

    Ace 是一个用 JavaScript 编写的独立代码编辑器。我们的目标是创建一个基于 Web 的代码编辑器,以匹配并扩展现有本地编辑器(如 TextMate、Vim 或 Eclipse)的特性、可用性和性能。它可以很容易地嵌入到任何网页和 JavaScript 应用程序中。 Ace 是作为 Cloud9 IDE 的主要编辑器开发的,也是 Mozilla Skywriter (Bespin) 项目的继任者。

【讨论】:

【解决方案3】:

CodePress 会这样做,EditArea 也会这样做。两者都是开源的。

【讨论】:

    【解决方案4】:

    我建议EditArea 实时编辑语法高亮文本区域。

    【讨论】:

      【解决方案5】:

      您可以在<textarea>突出显示文本,并在其后面小心放置<div>

      查看Highlight Text Inside a Textarea

      【讨论】:

        【解决方案6】:

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

        必须使用 Mozilla 的 Bespin。它是使用 HTML5 功能构建的(因此它既快速又快速,但不支持旧版浏览器),但使用起来绝对令人惊叹,并且击败了我遇到的所有东西 - 可能是因为 Mozilla 支持它,而且他们开发了 Firefox,是的。 .. 还有一个jQuery Plugin which contains a extension for it 使它更容易与 jQuery 一起使用。

        【讨论】:

          【解决方案7】:

          我所知道的唯一具有语法高亮和回退到文本区域的编辑器是Mozilla Bespin。谷歌搜索嵌入 Bespin 以了解如何嵌入编辑器。我知道现在唯一使用这个的网站是非常 alpha Mozilla Jetpack Gallery(在提交 Jetpack 页面中),您可能想看看它们是如何包含它的。

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

          【讨论】:

          • Ace 是 Mozilla Bespin 项目的继承者。
          【解决方案8】:

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

          但是,您可以通过在 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

          【讨论】:

          • 至少在它应有的滑行时给予信任,我在现场其他地方看到了这个确切的代码。
          • 它是 codepen 中笔的稍微修改版本
          • 原来的那个高亮背景,这个高亮文字..
          【解决方案9】:

          总而言之,这些是我们可以选择的:

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

          【讨论】:

            【解决方案10】:

            您为什么将它们表示为文本区域?这是我最喜欢的:

            http://alexgorbatchev.com/wiki/SyntaxHighlighter

            但如果您使用的是 CMS,可能会有更好的插件。例如,wordpress 有一个进化版:

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

            【讨论】:

            • 这些插件不允许像在文本区域中那样动态突出显示语法
            • 链接已损坏。
            【解决方案11】:

            这可以通过在 textarea 前面添加一个覆盖 code 块来实现,并使用它来应用其他几个提到的语法突出显示。

            但是,有一些边缘情况需要处理。 本文详细介绍了它们: https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code

            谢天谢地,作者将其创建为自定义元素 https://github.com/WebCoder49/code-input

            使用示例 https://codepen.io/WebCoder49/pen/jOypJOx

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2020-04-16
              • 2010-09-13
              • 1970-01-01
              • 2022-01-06
              • 1970-01-01
              • 2019-05-26
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多