Flutter代码编辑器插件codemirror的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter代码编辑器插件codemirror的使用

codemirror.dart 是一个围绕 CodeMirror 文本编辑器的 Dart 包装器。从 codemirror.net 可知：

CodeMirror 是一个为浏览器实现的JavaScript文本编辑器。它专门用于代码编辑，并附带了许多语言模式和插件来实现更高级的编辑功能。

注意： 这不是一个 Flutter 包，而是一个用于编写 Web 应用程序的 Dart 包，例如 DartPad。

示例代码

final options = <String, String>{
  'mode': 'javascript', // 设置编辑器的语言模式为 JavaScript
  'theme': 'monokai'   // 设置主题为 Monokai
};

final editor = CodeMirror.fromElement(
    document.querySelector('#textContainer')!, options: options);
editor.doc.setValue('foo.bar(1, 2, 3);'); // 初始化编辑器内容

如何使用

在你的主 HTML 文件中，链接到样式表：

<link href="packages/codemirror/codemirror.css" rel="stylesheet">

引用 CodeMirror 的 JavaScript 代码：

<script src="packages/codemirror/codemirror.js"></script>

并在你的 Dart 代码中导入库：

import 'package:codemirror/codemirror.dart';

模式与插件

此 Dart 包包含了一些内置的语言模式。CodeMirror 本身支持超过 100 种模式；此 Dart 包中包含的常用模式包括 css、html、dart 和 javascript 以及其他一些模式。要添加额外的模式，你需要在 HTML 入口点引用模式文件。例如：

<script src="packages/codemirror/mode/lua.js"></script>

这将引入对 Lua 的支持。

对于插件，我们包含了一些常用的插件，其他插件则按需导入。例如，要使用 active-line 插件，可以导入：

<script src="packages/codemirror/addon/selection/active-line.js"></script>

请注意，许多插件需要额外的配置才能启用。通常通过传递值到 CodeMirror 构造函数的选项中来完成。

有些插件通过主要的 Dart 接口暴露出来。一些插件通过侧边的 Dart 库在主包中可用，还有一些尚未暴露。欢迎提交 PR。

主题

通过导入 codemirror.css 文件：

<link href="packages/codemirror/codemirror.css" rel="stylesheet">

你将获得所有 CodeMirror 主题的访问权限。如果你只需要几个主题，或者不想支付加载所有主题的网络往返费用，你可以只导入感兴趣的那些主题：

<link href="packages/codemirror/theme/monokai.css" rel="stylesheet">
<link href="packages/codemirror/theme/zenburn.css" rel="stylesheet">

更多关于Flutter代码编辑器插件codemirror的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter代码编辑器插件codemirror的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter项目中集成CodeMirror作为代码编辑器插件，虽然CodeMirror本身是一个基于JavaScript的编辑器，但我们可以通过使用webview_flutter插件在Flutter应用中嵌入一个Web视图来加载CodeMirror。以下是一个简单的示例，展示如何在Flutter中使用webview_flutter来嵌入CodeMirror。

首先，确保在你的pubspec.yaml文件中添加webview_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^3.0.4  # 请检查最新版本号

然后，运行flutter pub get来安装依赖。

接下来，创建一个Flutter页面来加载CodeMirror。下面是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter CodeMirror Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CodeMirrorPage(),
    );
  }
}

class CodeMirrorPage extends StatefulWidget {
  @override
  _CodeMirrorPageState createState() => _CodeMirrorPageState();
}

class _CodeMirrorPageState extends State<CodeMirrorPage> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CodeMirror in Flutter'),
      ),
      body: WebView(
        initialUrl: Uri.dataFromString(
          '''
          <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>CodeMirror</title>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">
          </head>
          <body>
            <textarea id="code" name="code"></textarea>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/javascript/javascript.min.js"></script>
            <script>
              var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true,
                mode: "javascript",
                theme: "default"
              });
            </script>
          </body>
          </html>
          ''',
          mimeType: 'text/html',
          encoding: Encoding.getByName('utf-8')
        ).toString(),
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 在pubspec.yaml中添加了webview_flutter依赖。
  2. 创建了一个Flutter应用，其中包含一个WebView组件。
  3. 使用Uri.dataFromString方法内联了一个包含CodeMirror初始化和配置的HTML字符串。这个HTML字符串加载了CodeMirror的CSS和JavaScript文件，并初始化了一个包含代码编辑器的<textarea>。
  4. 将WebView的javascriptMode设置为JavascriptMode.unrestricted以允许执行JavaScript代码。
  5. 在WebView创建完成后，将WebViewController保存到_controller变量中（虽然在这个示例中我们并没有使用它，但你可以用它来进一步与WebView交互）。

运行这个应用，你将看到一个嵌入的CodeMirror编辑器，它允许你在Flutter应用中编写和编辑JavaScript代码。你可以根据需要调整CodeMirror的配置和主题。

回到顶部