- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在普通 TypeScript JavaScript 应用程序中使用 CodeMirror(没有 React 或 Angular 但有Bootstrap 4 作为 CSS 框架)使用 WebPack 模块打包器。
import * as CodeMirror from 'codemirror';
import 'codemirror/mode/xml/xml.js';
import 'codemirror/theme/blackboard.css';
const definition: HTMLTextAreaElement = document.getElementById('Definition')
as HTMLTextAreaElement;
const config: CodeMirror.EditorConfiguration = {
tabSize: 3,
lineNumbers: true,
mode: 'xml',
theme: 'blackboard'
};
const editor = CodeMirror.fromTextArea(definition, config);
{
"dependencies": {
"@types/codemirror": "0.0.72",
"@types/jquery": "^3.3.22",
"bootstrap": "^4.1.3",
"codemirror": "^5.45.0",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"popper": "^1.0.1",
"popper.js": "^1.14.6"
},
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"autoprefixer": "^9.3.1",
"babel-loader": "^8.0.4",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^1.0.1",
"cssnano": "^4.1.7",
"extract-text-webpack-plugin": "^3.0.2",
"fetch": "^1.1.0",
"file-loader": "^2.0.0",
"font-awesome-loader": "^1.0.2",
"html-webpack-plugin": "^3.2.0",
"json-loader": "^0.5.7",
"mini-css-extract-plugin": "^0.4.5",
"node-sass": "^4.10.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
"precss": "^3.1.2",
"raw-loader": "^0.5.1",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"ts-loader": "^5.3.1",
"typescript": "^3.2.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"url-loader": "^1.1.2",
"webpack": "^4.27.0",
"webpack-cli": "^3.1.2",
"webpack-node-externals": "^1.7.2"
}
}
rules: [
// JavaScript
{
test: /\.jsx?$/, // JavaScript and Reactive JavaScript
exclude: /node_modules/,
use: {
loader: 'babel-loader', // Transpiles ES6 JavaScript files
options: {
presets: ['@babel/preset-env']
}
}
},
// TypeScript
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
},
// CSS
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
}
]
应用程序编译和构建没有错误,也没有控制台日志记录错误,但 CodeMirror 布局已损坏:
任何关于我哪里出错的建议/方向将不胜感激。
最佳答案
我最终使它起作用。问题与我的webpack.config
有关,特别是我需要配置postcss
插件。这是我的工作代码。
请注意,我不能保证方法或输出的效率,但至少我让它工作了。如果有人可以建议替代/更好的方法,请告诉我。谢谢。
package.json
"postcss": {
"plugins": {
"postcss-plugin": {}
}
}
webpack.config
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
},
代码镜像.ts
import * as CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/display/fullscreen.css';
import 'codemirror/theme/neat.css';
import 'codemirror/mode/xml/xml.js';
import 'codemirror/addon/display/fullscreen.js';
import '../../styles/components/_codemirror.css';
export class CodeMirrorManager {
public editor: CodeMirror.Editor;
config: CodeMirror.EditorConfiguration = {
tabSize: 3,
lineNumbers: true,
mode: 'xml',
theme: 'neat',
extraKeys: {
"F11": function (cm) {
if (cm.getOption("fullScreen")) {
cm.setOption("fullScreen", false);
} else {
cm.setOption("fullScreen", true);
}
},
"Esc": function (cm) {
if (cm.getOption("fullScreen")) {
cm.setOption("fullScreen", false);
}
}
}
};
// CTOR
constructor(private readonly tagElement: HTMLTextAreaElement) {
this.editor = CodeMirror.fromTextArea(this.tagElement, this.config);
}
}
关于typescript - 带有 Vanilla TypeScript 和 WebPack 的 CodeMirror,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55685029/
使用代码镜像,我们可以折叠代码。 我想用花括号折叠所有代码。我发现了这种方法 我如何折叠整个代码,这是我的HTML脚本: window.onload = function() { var te =
我想将“Alt-Space”键映射添加到 codemirror,然后在按下键时执行特定功能。我无法使用 . cm.addKeyMap 我应该在哪里编写此函数,以便可以将键映射绑定(bind)到特定函数
我想重置 Codemirror 编辑器的所有内容。理想情况下,这应该清除 textarea,删除所有标记并清除历史记录。 实现这一目标的最佳方法是什么? 最佳答案 cm.setValue(""); c
我知道你用 editor.setValue(""); 设置一个值,但如何在 CodeMirror 中附加? IE: editor.appendText();? 最佳答案 使用 replaceRang
CodeMirrors 全屏模式的文档似乎有点稀疏。例如,我如何告诉它监听键以激活全屏?或者如何使用按钮切换全屏? 为了他人的利益,下面是我找到的解决方案。 最佳答案 这将获得选项值: editor
我需要在 CodeMirror 中当前行号旁边插入一个新行。 我查看了文档,但没有找到任何关于在行尾附加任何内容的信息。 请帮忙。 :( 最佳答案 从光标位置获取当前行,并对其进行操作。这应该这样做(
是否可以在 中显示隐藏字符(如回车符)? Codemirror 文本编辑器 ,但我没有在它的文档中找到任何关于它的配置引用。有可能这样做吗? 最佳答案 回车符由 CodeMirror 专门解释(当它自
CodeMirror 是实现单行表达式编辑器的好选择吗?我无法从手册(或我查看的问题)中弄清楚 CodeMirror 是否可以配置为执行以下操作: 不显示滚动条(如果太长,文本应该向左滑动) 忽略插入
来自 http://codemirror.net/doc/manual.html ,我只找到getRange() , undo()、redo() 等,我找不到 cut()、copy() 和 paste
我正在构建一个简单的代码编辑器来帮助 children 学习 HTML。我试图添加的一个功能是,当用户将鼠标悬停在他们呈现的代码上时(在 iframe 中),编辑器中相应的 HTML 代码会突出显示。
我正在构建一个简单的代码编辑器来帮助 children 学习 HTML。我试图添加的一个功能是,当用户将鼠标悬停在他们呈现的代码上时(在 iframe 中),编辑器中相应的 HTML 代码会突出显示。
我正在构建一个供个人使用的小型 extjs 5.1 应用程序,旨在保存我的 extjs 应用程序中使用的函数/方法的示例。 在 Navaneeth-Kesavan 和 Tarabass 的帮助下,我在
我正在使用CodeMirror 5.1。 This article显示 C# 语法突出显示,但显然解决了 CodeMirror 过时版本的问题。 问题:如何使用 CodeMirror 实现真正的 C#
我正在使用CodeMirror 5.1。 This article显示 C# 语法突出显示,但显然解决了 CodeMirror 过时版本的问题。 问题:如何使用 CodeMirror 实现真正的 C#
我正在写一些 cypress测试 Codemirror 编辑器。我用过 cypress在输入字段中输入。 我正在尝试实现 cy.type()在 CodeMirror 编辑器中。我在 codemirro
所以我检查规范化以将规范化库添加到 Codemirror 中。 我检查 jQuery,并在规范化后添加 jQuery 源: 但是如果我取消选中标准化,我希望它删除标准化链接,如果我再次选中它,我
https://github.com/angular-ui/ui-codemirror 我需要用 Angular 制作一个语法高亮器并将结果保存在数据库中。 我正在使用 ui-codemirror,但
有人为codemirror做了'htmlmixed' + 'Velocity'模式吗?或者任何人都可以建议如何实现这一目标? 最佳答案 我能够使用 overlay.js 插件轻松实现这一点: Code
我正在将 CodeMirror 实现到我的 Nuxtjs/Vuejs 应用程序中的文本区域之一。我想根据 XML 美化 textarea。 有时 CodeMirror 工作正常,但有时当我重新加载页面
我正在尝试在 React/Redux/TS 应用程序中启用 react-codemirror 组件的 linting 插件。正常的 codemirror 东西工作正常,语法突出显示,行号等。但是,启用
我是一名优秀的程序员,十分优秀!