typescript 在代码标记内添加制表符(角型脚本)

pnwntuvh 于 2023-03-13 发布在 TypeScript

关注(0)|答案(1)|浏览(146)

我正在使用Angular 和打字本项目
我试图在HTML中的标记内添加制表符< code >，用于格式化页面中的SQL代码，但我没有成功。
HTML代码

<div class="documentationCode" id="documentationContainer-{{nodeToPass.xmlNode.nameId}}">
      <pre class="preCode">
        <code id="editor"
          tabindex="-1"
          contenteditable="true"
          (focusout)="emitDataSave(nodeToPass,$event)"
          [highlight]="codice"
          (keydown)="check($event)"
          class="code">
      </code>
      </pre>
    </div>

typescript 码

check(event:any)
  {
    if(event.keyCode === 9) /*catch tab character*/
    {
      event.preventDefault();
      /*REPLACE TAB WITH \t*/
    }
    else
    {
      return
    }
  }

我尝试使用可用于的相同方法< textarea >，但据我所知，它不适用于< code >，主要是因为我无法获得插入符号位置，从而无法知道在何处添加制表符
我不能用替换< code >标记< textarea >，因为我需要它来设置sql格式，而且它有内置的高度调整功能，这是我的项目所需要的。
我不能使用event.target.selectionStart/event.target.selectionStart，因为它们都返回undefined
我必须将制表符放在插入符号所在的位置
有没有什么变通办法可以用制表符来格式化标记内部的html文本< code >？

typescript

来源：https://stackoverflow.com/questions/75579089/adding-tab-character-inside-code-tag-angular-typescript

1条答案

按热度按时间

nc1teljy1#

找到解决方案：
我使用了“codejar”的Angular 版本，可以在此链接https://github.com/julianpoemp/ngx-codejar中找到
我导入了模块，现在我可以添加tab，没有任何问题。如果你也想要图形化的东西（语法高亮），你需要导入css到你自己的程序中，因为，由于某些原因，它不能正常工作（我使用highlightjs，css在nodemodule文件夹中，highlightjs文件夹下- ngx-codejar支持hljs和prismjs）
另一件要记住的事情是，模块会用它自己的样式覆盖你的样式，所以，就像我的例子一样，需要一些特殊的样式，你必须在你的css中添加'！important'属性
下面是代码：
app.module.ts:

declarations: [ ... ],
imports: [
...
NgxCodejarModule,
...
],
providers: [
      {
        provide: HIGHLIGHT_OPTIONS,
        useValue: <HighlightOptions>{
          coreLibraryLoader: () => import('highlight.js/lib/core'),
          themePath: '/node_modules/highlight.js/styles/github.css',
          languages: {
            sql: () => import('highlight.js/lib/languages/sql'),
          },
        },
      },
    ],

超文本：

<ngx-codejar
  id="editor"
  [highlightMethod]="highlightMethod"
  [(code)]="code"
  (focusout)="emitDataSave(nodeToPass,$event)">
</ngx-codejar>

typescript ：

highlightMethod(editor: CodeJarContainer) {
    if (editor.textContent !== null && editor.textContent !== undefined)
    {
      editor.innerHTML = hljs.highlight(editor.textContent, { language: 'sql' }).value;
    }
  }

CSS：

.hljs {
  font-size: 12px !important;
  font-family: 'Courier New', Courier, monospace !important;
    min-height: fit-content !important;
  color: #24292e;
  background: #fff
} /*plus the whole css found in highlightjs*/

赞(0）回复(0）举报 2023-03-13

我来回答

typescript 在代码标记内添加制表符(角型脚本)

1条答案

相关问题

热门标签

最新问答