How correctly integrate angular-froala-wysiwyg and codemirror v5 to edit code?(如何正确地集成角度-Froala-wysiwyg和codemirror v5来编辑代码？)

转载 作者：bug小助手 更新时间：2023-10-25 17:43:55 27 4

app.module.ts

import 'froala-editor/js/plugins.pkgd.min.js';
import 'froala-editor/js/plugins/align.min.js';
import 'froala-editor/js/plugins/code_view.min.js';
import 'froala-editor/js/languages/ru.js';
import 'froala-editor/js/third_party/embedly.min';

styles.scss

@use 'froala-editor/css/plugins/code_view.min.css';
@use 'codemirror/lib/codemirror.css';
@use 'codemirror/theme/dracula.css';

component.html
<div class="froala-editor"
     [froalaEditor]="froalaEditorConfig"
     [formControl]="editorControl"
></div>

component.ts

import * as CodeMirror from 'codemirror';
import 'codemirror/mode/xml/xml';
import 'codemirror/mode/javascript/javascript.js';

this.froalaEditorConfig = {
  key: 'my-key',
  imagePaste: false,
  imageUpload: false,
  events: {},
  language: 'ru',
  attribution: false,
  toolbarButtons: {
    moreText: {
      buttons: [
        'bold',
        'italic',
        'underline',
        'strikeThrough',
        'subscript',
        'superscript',
        'fontFamily',
        'fontSize',
        'textColor',
        'backgroundColor',
        'inlineClass',
        'inlineStyle',
        'clearFormatting',
      ],
    },
    moreParagraph: {
      buttons: [
        'alignLeft',
        'alignCenter',
        'alignRight',
        'formatOLSimple',
        'alignJustify',
        'formatOL',
        'formatUL',
        'paragraphFormat',
        'paragraphStyle',
        'lineHeight',
        'outdent',
        'indent',
        'quote',
      ],
      buttonsVisible: 3,
    },
    moreRich: {
      buttons: ['insertLink', 'insertTable', 'specialCharacters', 'insertHR'],
      buttonsVisible: 6,
    },
    moreMisc: {
      buttons: ['undo', 'redo', 'html', 'help', 'fullscreen'],
      align: 'right',
      buttonsVisible: 5,
    },
  },
  quickInsertButtons: ['embedly', 'table', 'ul', 'ol', 'hr'],
  placeholderText: '',
  enter: 0,
  codeMirror: CodeMirror,
  codeMirrorOptions: {
    tabSize: 2,
    lineNumbers: true,
    mode: {
      name: 'javascript',
      json: true,
    },
    theme: 'dracula',
    lineWrapping: true,
  },
};

this.editorControl.patchValue(
  JSON.stringify({
    name: 'John',
    age: 30,
    car: null,
  }),
);

27 4 0

• codemirror - CodeMirror，如何折叠所有代码

  使用代码镜像，我们可以折叠代码。 我想用花括号折叠所有代码。我发现了这种方法 我如何折叠整个代码，这是我的HTML脚本: window.onload = function() { var te =

• codemirror - 如何在 CodeMirror 中添加自定义键映射？

  我想将“Alt-Space”键映射添加到 codemirror，然后在按下键时执行特定功能。我无法使用 . cm.addKeyMap 我应该在哪里编写此函数，以便可以将键映射绑定(bind)到特定函数

• codemirror - 如何重置 Codemirror 编辑器？

  我想重置 Codemirror 编辑器的所有内容。理想情况下，这应该清除 textarea，删除所有标记并清除历史记录。 实现这一目标的最佳方法是什么？ 最佳答案 cm.setValue(""); c

• codemirror - 你如何在 CodeMirror 中附加文本

  我知道你用 editor.setValue(""); 设置一个值，但如何在 CodeMirror 中附加？ IE: editor.appendText();? 最佳答案 使用 replaceRang

• codemirror - 如何在 codemirror 中激活全屏插件？

  CodeMirrors 全屏模式的文档似乎有点稀疏。例如，我如何告诉它监听键以激活全屏？或者如何使用按钮切换全屏？ 为了他人的利益，下面是我找到的解决方案。 最佳答案 这将获得选项值: editor

• codemirror - 如何在 CodeMirror 中以编程方式添加新行？

  我需要在 CodeMirror 中当前行号旁边插入一个新行。 我查看了文档，但没有找到任何关于在行尾附加任何内容的信息。 请帮忙。 :( 最佳答案 从光标位置获取当前行，并对其进行操作。这应该这样做(

• codemirror - 是否可以在 CodeMirror 中显示隐藏字符？

  是否可以在 中显示隐藏字符(如回车符)？ Codemirror 文本编辑器 ，但我没有在它的文档中找到任何关于它的配置引用。有可能这样做吗？ 最佳答案 回车符由 CodeMirror 专门解释(当它自

• codemirror - 使用 CodeMirror 进行单行表达式编辑

  CodeMirror 是实现单行表达式编辑器的好选择吗？我无法从手册(或我查看的问题)中弄清楚 CodeMirror 是否可以配置为执行以下操作: 不显示滚动条(如果太长，文本应该向左滑动) 忽略插入

• codemirror - codemirror 是否提供剪切、复制和粘贴 API？

  来自 http://codemirror.net/doc/manual.html ，我只找到getRange() , undo()、redo() 等，我找不到 cut()、copy() 和 paste

• codemirror - 如何在 Codemirror 6 中搜索并突出显示子字符串？

  我正在构建一个简单的代码编辑器来帮助 children 学习 HTML。我试图添加的一个功能是，当用户将鼠标悬停在他们呈现的代码上时(在 iframe 中)，编辑器中相应的 HTML 代码会突出显示。

• codemirror - 如何在 Codemirror 6 中搜索并突出显示子字符串？

  我正在构建一个简单的代码编辑器来帮助 children 学习 HTML。我试图添加的一个功能是，当用户将鼠标悬停在他们呈现的代码上时(在 iframe 中)，编辑器中相应的 HTML 代码会突出显示。

• javascript - 将网格行数据加载到 CodeMirror - 获取 CodeMirror 引用

  我正在构建一个供个人使用的小型 extjs 5.1 应用程序，旨在保存我的 extjs 应用程序中使用的函数/方法的示例。 在 Navaneeth-Kesavan 和 Tarabass 的帮助下，我在

• codemirror - 在 CodeMirror 中突出显示 C# 代码？

  我正在使用CodeMirror 5.1。 This article显示 C# 语法突出显示，但显然解决了 CodeMirror 过时版本的问题。 问题:如何使用 CodeMirror 实现真正的 C#

• codemirror - 在 CodeMirror 中突出显示 C# 代码？

  我正在使用CodeMirror 5.1。 This article显示 C# 语法突出显示，但显然解决了 CodeMirror 过时版本的问题。 问题:如何使用 CodeMirror 实现真正的 C#

• codemirror - 如何在 codemirror 编辑器中使用 cypress .type() 键入？

  我正在写一些 cypress测试 Codemirror 编辑器。我用过 cypress在输入字段中输入。 我正在尝试实现 cy.type()在 CodeMirror 编辑器中。我在 codemirro

• javascript - 从复选框向 Codemirror 添加值/从 Codemirror 中删除值

  所以我检查规范化以将规范化库添加到 Codemirror 中。 我检查 jQuery，并在规范化后添加 jQuery 源: 但是如果我取消选中标准化，我希望它删除标准化链接，如果我再次选中它，我

• angularjs - 如何使用 ui-codemirror 和 AngularJS 刷新 CodeMirror？

  https://github.com/angular-ui/ui-codemirror 我需要用 Angular 制作一个语法高亮器并将结果保存在数据库中。 我正在使用 ui-codemirror，但

• javascript - 是否可以混合使用 CodeMirror : Velocity mode and the CodeMirror: HTML mixed mode?

  有人为codemirror做了'htmlmixed' + 'Velocity'模式吗？或者任何人都可以建议如何实现这一目标？ 最佳答案 我能够使用 overlay.js 插件轻松实现这一点: Code

• javascript - 在服务器重新加载时，将 CodeMirror 与 Vuejs/Nuxtjs 一起使用会导致错误 'CodeMirror' is not defined

  我正在将 CodeMirror 实现到我的 Nuxtjs/Vuejs 应用程序中的文本区域之一。我想根据 XML 美化 textarea。 有时 CodeMirror 工作正常，但有时当我重新加载页面

• javascript - Codemirror lint 功能在 React/Redux/Typescript 应用程序中不起作用 react-codemirror

  我正在尝试在 React/Redux/TS 应用程序中启用 react-codemirror 组件的 linting 插件。正常的 codemirror 东西工作正常，语法突出显示，行号等。但是，启用