Flutter :在Flutter web中使用Froala-editor
基础概念
Froala Editor 是一个轻量级、可定制的富文本编辑器，支持多种编程语言和框架。在 Flutter Web 中使用 Froala Editor，可以让开发者轻松地在 Flutter 应用中集成富文本编辑功能。
相关优势
- 轻量级：Froala Editor 的代码量较小，加载速度快。
- 高度可定制：提供了丰富的配置选项，可以根据需求进行定制。
- 跨平台支持：支持多种编程语言和框架，包括 Flutter Web。
- 丰富的插件：提供了大量的插件，可以扩展编辑器的功能。
类型
Froala Editor 主要有以下几种类型：
- 基础编辑器：提供基本的文本编辑功能。
- 高级编辑器：提供更多的高级功能，如图片上传、视频插入等。
- 移动端编辑器：针对移动端进行了优化，支持触摸操作。
应用场景
Froala Editor 可以应用于以下场景：
- 博客平台：用户可以在博客平台上使用富文本编辑器撰写文章。
- 内容管理系统（CMS）：在 CMS 中集成富文本编辑器，方便管理员编辑内容。
- 在线表单：在在线表单中使用富文本编辑器，允许用户输入多段文本。
遇到的问题及解决方法
问题：在 Flutter Web 中使用 Froala Editor 时，编辑器无法正常显示。
原因：可能是由于 Flutter Web 对某些 HTML 元素的支持不完善，或者是 Froala Editor 的初始化代码有误。
解决方法：
- 确保 Flutter Web 的版本是最新的，以便获得最佳的 HTML 元素支持。
- 检查 Froala Editor 的初始化代码，确保正确引入了相关的 JavaScript 和 CSS 文件。
import 'package:flutter/material.dart';
import 'package:flutter_froala_editor/flutter_froala_editor.dart';
class FroalaEditorExample extends StatefulWidget {
@override
_FroalaEditorExampleState createState() => _FroalaEditorExampleState();
}
class _FroalaEditorExampleState extends State<FroalaEditorExample> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Froala Editor Example'),
),
body: FroalaEditor(
options: {
'height': 300,
},
),
);
}
}- 确保在
index.html文件中正确引入了 Froala Editor 的 JavaScript 和 CSS 文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flutter Froala Editor</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.2.6/css/froala_editor.pkgd.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.2.6/js/froala_editor.pkgd.min.js"></script>
</head>
<body>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>参考链接
通过以上步骤，你应该能够在 Flutter Web 中成功集成和使用 Froala Editor。如果仍然遇到问题，建议查看相关文档或寻求社区的帮助。
相关·内容
我想在flutter web中使用富文本编辑器，但在flutter web中找不到类似的编辑器。所以我想如果我能在flutter web中实现froala编辑器。那么有没有可能将froala-editor的javascript库插入到flutter web中呢？ https://froala.com/wysiwyg-editor/ 是否可以在flutter web中使用froala-editor，或者是否有其他方法可以在flutter web中获得富文本编辑器？ 提前谢谢。
浏览 74提问于2020-05-20得票数 3
回答已采纳
我目前正在进行一个使用角1.1.5的项目。升级角度目前还不是一个选项。
我们希望实现一个丰富的HTML5 WYSIWYG编辑器，并尝试给Froala一个尝试，因为它符合我们的要求和的角-弗罗拉状态，它应该与所有版本的角>=1.0。
我在上做了一个POC，它使用的是角1.1.5。
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="myApp">
<head>
<script src="https://code.jquery.com/jque
浏览 0提问于2016-02-08得票数 1
回答已采纳
4回答
我成功地在我的网站上安装了Froala，但是定位图像似乎不起作用。它们总是在左边，即使我把它们中间/右边对齐。
因此，在文本编辑模式下，它工作得很好。
但是在观察了结果之后，所有的3种形式看起来都一样。
这些图像有以下几个类：
class="fr-dib fr-draggable fr-fil" // this should be left align
class="fr-dib fr-draggable" // this should be center align (doesn't work)
class="fr-di
浏览 1提问于2016-09-01得票数 2
我在用做实验
另见。
我创建了一个简单的编辑器组件，如下所示
import { string } from 'prop-types'
// note the docs say do this
// import 'froala-editor/js/froala_editor.pkgd.min.js'
// but the advice from froala support is to do this instead
import 'froala-editor/js/plugins.pkgd.min.js'
import
浏览 3提问于2021-06-25得票数 4
工具栏按钮不会显示在由facebook/create- React -app创建的react应用程序中。 我尝试过在src/index.tsx或组件使用位置之前导入JS和CSS文件。我还尝试了导入单独的插件。它们都不起作用。 // Froala Editor JS files.
import 'froala-editor/js/froala_editor.pkgd.min.js';
import 'froala-editor/js/plugins.pkgd.min.js';
// Froala Editor CSS files.
import 'fro
浏览 38提问于2020-04-24得票数 2
我将dirtyForms添加到表单中，以检测输入字段上的任何更改。
<form>
<input type="text" id="post" name="post">
<input type="hidden" id="body" name="body">
<froala-editor input="body">
</froala-editor>
</form>
Javascript
$
浏览 9提问于2020-11-29得票数 0
我与是新的，并试图将它集成在我的角5项目，但在集成风格和Froala Editor没有应用后。遵循指南
我试过如下。
angular.json
"styles": [
"src/styles.css",
"node_modules/froala-editor/css/froala_editor.pkgd.min.css",
"node_modules/froala-editor/css/froala_style.min.css",
浏览 3提问于2018-07-13得票数 2
回答已采纳
我想添加表情和at.js (自动完成)与一个froala编辑器文本区。表情符号运行良好，但at.js不起作用。 版本: froala_editor v3.1.0 EmojioneArea v3.1.5 at.js - 1.5.3 下面是我的代码片段： // Define data source for At.JS.
var datasource = ["Jacob", "Isabella", "Ethan", "Emma", "Michael", "Olivia" ];
// Build d
浏览 9提问于2020-07-15得票数 0
回答已采纳
当我尝试在Flutter中合并移动代码库和web代码库时，我看到以下错误：
webdev could not run for this project.
This version of webdev does not support the `build_daemon` protocol used by your version of `build_runner`.
Please add a dev dependency on `build_daemon` with constraint: >=1.0.0 <2.0.0
pub finished with exit code 78
浏览 0提问于2019-06-03得票数 0
在最新的flutter version(1.9)中，他们提供了将flutter_web包迁移到flutter主包的选项。那么如何创建一个既适用于移动设备又适用于web的flutter项目呢？如何将现有的flutter web项目从flutter_web转换为flutter？
浏览 9提问于2019-09-17得票数 0
我希望用户使用upload image按钮将图像上传到服务器中，然后在需要时使用image Manager访问该图像。目前，我使用的是
events: {
//This prevent the default image insert in the editor
'froalaEditor.image.uploaded': function (e, editor, response) {
$('#froala-editor').froalaEditor('commands.undo
浏览 0提问于2018-03-17得票数 1
我的最终目标是将Flutter移动应用转换为Flutter web应用。我在Flutter移动应用程序中使用了flutter_svg，但在Flutter web应用程序中不工作。 Flutter web的替代插件是什么？ 下面是我使用flutter run -d chrome在chrome中运行项目时出现的错误。 The following UnimplementedError was thrown during paint():
UnimplementedError
The relevant error-causing widget was:
RawPicture
file://
浏览 47提问于2020-07-17得票数 5
回答已采纳
2回答
当我尝试在flutter web中的pubspec.yaml文件中添加从属关系时，在尝试使用pub get命令时出现错误： [retgoo_internal] pub get
Resolving dependencies...
Because every version of aiframework depends on flutter any from sdk which is forbidden, aiframework is forbidden.
So, because retgoo_internal depends on aiframework ^1.0.7+12, version
浏览 26提问于2019-07-04得票数 3
回答已采纳
因为sqflite <=0.11.0+1需要sdk版本<2.0.0或>=2.0.0-dev <2.0.0，并且sqflite >=0.11.0+2 <=0.11.0+3依赖于sdk中的flutter any，所以sqflite <=0.11.0+3需要SDK中的flutter any。因为sqflite >=0.11.0+4 <=0.11.0+4需要Flutter SDK，而sqflite >=1.1.2需要Flutter sdk，所以每个版本的sqflite都需要SDK提供的flutter。因此，因为来自sdk的flutter不存
浏览 54提问于2019-09-24得票数 1
1回答
几个月前，我使用flutter开发了一个android应用程序。应用程序需要各种依赖项，如intl、缓存的网络映像、停止程序、carousel_slider等。
然后，现在我想将项目转换为flutter_web。以下是我所做的步骤：
克隆github网页颤振
我运行的命令是"flutter pub全局激活webdev“
然后我编辑了pubspec.yaml，并在上一个项目(android项目)中将其调整为pubspec.yaml。
以下是网页颤振项目中pubspec.yaml的内容：
name: flutter_web.examples.hello_world
e
浏览 4提问于2019-10-30得票数 2
回答已采纳
运行flutter build web将在/build/web/中创建index.html文件以及 assets icons manifest.json
favicon.png index.html version.json
flutter_service_worker.js main.dart.js 当前的颤动通道是测试版。 $ flutter channel Flutter channels:
master
dev
* beta
浏览 123提问于2021-01-02得票数 2
回答已采纳
1回答
我目前正在使用Php后端的Flutter web，该后端由api密钥保护。在Flutter Web中应该将Api密钥存储在哪里？"flutter_secure_storage“包不适用于web，因此它不是一个选项。
浏览 1提问于2020-08-03得票数 1
1回答
我在我的项目中使用 WYSIWYG编辑器。我想创建我自己的字体族选择组件，它将显示当前的字体系列。因此，我需要听取编辑选择的变化，每次获得当前字体系列和更新我的自定义组件。
import "froala-editor/js/plugins/font_family.min.js";
import Froala from "froala-editor";
const editor = new Froala("#container", {
events: {
onSelectionChange: function() { //
浏览 5提问于2022-02-23得票数 0
1回答
我正在尝试更改网页应用程序中标题的字体，我该如何做呢？我发现pubsec.yaml与移动版本完全不同，这里的文件是：
name: projectbaseclient
description: An app built using Flutter for web
environment:
# You must be using Flutter >=1.5.0 or Dart >=2.3.0
sdk: '>=2.3.0 <3.0.0'
dependencies:
flutter_web: any
flutter_web_ui: any
浏览 1提问于2019-07-13得票数 5
回答已采纳
我正在创建一个针对Android/iOS和Web的Flutter项目，是否有任何方法可以分别为Flutter Mobile和Web添加支持的软件包。例如，我在Flutter移动应用程序中使用dart:io包来保存文件，但Flutter web不支持它，因此对于web，我使用dart:js包来下载web应用程序中的文件。
对于C#，我们只是简单地使用条件符号，但是Flutter我找不到任何解决方案。
问题是我无法在我的main.dart文件中导入这两个包。有谁能帮我做到这一点吗？
浏览 1提问于2020-02-10得票数 7
3回答
我想将任何插件添加到我的flutter web项目中，但在添加插件后出现错误。我运行了flutter pub get，它给我的代码是0。但当我尝试时：
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
上面写着找不到包裹。
pubspec.yaml
environment:
# You must be using Flutter >=1.5.0 or Dart >=2.3.0
sdk: '>=2.3.0 <3.0.0'
dependencies:
浏览 2提问于2019-08-19得票数 0
昨天我在我的应用程序中遇到了一个奇怪的错误，当我试图运行它时，我不太明白如何修复它。它显示了很多错误线，这以前没有发生过，我不知道哪里出了问题。这是错误
Invalid depfile: D:\Kuliah\Mata Kuliah\Pemrograman Mobile\medreminder.dart_tool\flutter_build\0e1b116fd39faa66306b0a2d36ef7692\kernel_snapshot.d
Invalid depfile: D:\Kuliah\Mata Kuliah\Pemrograman Mobile\medreminder.dart_too
浏览 56提问于2022-11-12得票数 -1
我想知道如何使用react (react-froala-wysiwyg)在编辑器中显示动态脚本/html内容。它会显示，但动态数据无法正常显示为${orderdate!''}
import React from "react";
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import FroalaEditor from 'react-froala-wysiwy
浏览 2提问于2019-12-16得票数 0
目前，我正在使用flutter开发移动和web应用程序。如下图所示，web文件夹的index.html不是在移动端使用，而是在web上运行时使用。
在代码中，我想使用‘’KIsWeb‘，如下所示，使用addSearch.dart作为移动视图，使用addSearchWeb.dart作为web视图。
但是，在移动端运行时，无法读取index.html文件，并出现如下错误(使用js包)。
当前导入‘’package: flutter_app2/addSearch.dart'；导入‘’package: flutter_app2/addSearchWeb.dart'；
浏览 32提问于2021-03-11得票数 0
我正在尝试通过html内容在webview中显示网页。在android和ios中，flutter_html运行良好，但在flutter web中，这个库不起作用。
我也尝试了这段代码，但没有得到答案：
<code>A0</code>
有没有其他方法可以在flutter web应用程序中显示html内容？
浏览 11提问于2021-03-14得票数 4
1回答
我已经跟随下面的url并为我的颤振应用程序启用了web。
flutter channel master
flutter config --enable-web
flutter create .
flutter run -d chrome
flutter build web
一切都进行得很顺利，我可以在网上启动我的应用程序。然而，在启用web模拟器后，设备列表中没有出现。
flutter devices
2 connected devices:
Chrome • chrome • web-javascript • Google Chrome 80.0.3955.4 dev
W
浏览 3提问于2019-11-06得票数 0
回答已采纳
所以我开发flutter移动应用程序已经有一段时间了，我想探索flutter web，现在我试图添加自定义字体，但它不显示自定义字体。
我添加了所有的依赖项，为字体创建了一个单独的文件夹，并添加到pubspec.yaml中，就像我在flutter mobile中所做的那样。
我的main.dart
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@over
浏览 19提问于2019-08-04得票数 4
回答已采纳
我正在尝试一个flutter web项目(可能没有什么不同，但值得一提的是)，我想添加一个图像，但每次尝试都会出现错误。 我已将正确的资源添加到pubspec.yaml文件中，并且这些文件位于文件夹中。 我已经尝试重新启动了我的ide，并且运行得很干净。根本没有任何变化。 class _homePageState extends State<homePage> {
@override
Widget build(BuildContext context) {
var textStyle = TextStyle(
color:
浏览 22提问于2019-06-08得票数 1
如何使用jquery验证没有在textarea的描述字段中输入手机号码
$('#jobpost').click(function () {
var phoneno = /^\d{10}$/;
var discription=$('.nicEdit-main').html();
if(discription.value.match(phoneno))
{
alert('gdfgdfg')
浏览 0提问于2018-10-30得票数 2
我在应用程序上开发应用程序时使用flutter_screenutil后台，我想在颤振web上使用flutter_screenutil，我使用监视器的分辨率，但它没有得到正确的大小，如何在web中使用flutter_screenutil，以及如何在designSize中获得flutter_screenutil软件包的大小。
浏览 9提问于2022-01-27得票数 0
回答已采纳
[flutter-web-preview] pub global run stagehand flutter-web-preview
stagehand 3.3.2 doesn't support Dart 2.3.0-dev.0.5.flutter-a1668566e5.
exit code 65
[flutter-web-preview] pub global run stagehand flutter-web-preview
stagehand 3.3.2 doesn't support Dart 2.3.0-dev.0.5.flutter-a1668566e5.
e
浏览 22提问于2019-07-03得票数 0
我正在尝试在Intellij中启动一个新的Flutter项目，以及Vs代码。Intellij未提供用于在Dart模板中添加新的flutter web项目的选项。Vs代码每当我选择New flutter Web Project后，它都会询问Dart模板，这就是我卡住的原因。？？请尽快帮助我？？
浏览 5提问于2019-09-20得票数 1
我使用安装了颤振测试版。启用的网页：
flutter channel beta
flutter upgrade
flutter config --enable-web
结果是：
Setting "enable-web" value to "true".
You may need to restart any open editors for them to read new settings.
flutter devices命令的结果：
>flutter devices
1 connected device:
Web Server • web-s
浏览 7提问于2020-03-20得票数 16
回答已采纳
我一直在使用visual studio代码中的flutter web。今天我试着升级到flutter 1.9。在那之后，visual studio中的选项new flutter web项目就消失了。 我试着再安装一次，但它没有回来。 还有其他选择吗？
浏览 12提问于2019-10-04得票数 1
回答已采纳
我正在尝试在flutter中创建一个Web项目，但是flutter web没有显示任何连接的设备。 ?
浏览 30提问于2020-09-09得票数 0
回答已采纳
1回答
我试图运行一个不稳定的web应用程序，但我看不到它在localhost中运行。我有一条正在运行的消息，但我在浏览器中看不到它。
dashboard_1 = lib/main.dart正在上服务
Dockerfile
FROM cirrusci/flutter AS build
RUN apt update && apt install -y nginx
RUN flutter channel beta
RUN flutter upgrade
RUN flutter config --enable-web
RUN mkdir /app/
COPY . /app/
WOR
浏览 1提问于2020-11-06得票数 0
回答已采纳
1回答
我想显示的位置在谷歌地图上的颤栗网站。我对android也做了同样的操作，使用插件: google_maps_flutter为网络找到了插件：
google_maps_flutter_web
但是插件描述中的示例并不有用。我为android编写的代码甚至没有为google_maps_flutter_web编译，当我包括
import 'package:google_maps_flutter_web/google_maps_flutter_web.dart';
如果没有正常的包含，则会给出运行时错误。
import 'package:google_maps_flutter
浏览 10提问于2022-08-08得票数 0
我有个flutter项目。在升级flutter sdk之前，我在我的project.Everything中添加了web支持。我使用的是master sdk。 现在，当我尝试运行我的应用程序时，我得到了这个错误： $ flutter run -d chrome
Warning: You are using these overridden dependencies:
! analyzer 0.39.16
Running "flutter pu
浏览 47提问于2020-11-03得票数 0
当我在IDE(vscode)中启动debug时，我可以刷新(重新加载)和深度链接，但是当我发布到自己的webserver (我用这个命令'flutter web build‘制作了web资源)时，我的webserver截获了我的url并返回404。:(只能从主页进入 web服务器使用navigator 2.0在golang和Flutter web上运行 我该如何解决这个问题呢？ 我在web上找不到flutter navigator 2.0的参考资料。请救我一命
浏览 21提问于2020-11-26得票数 2
回答已采纳
我正在尝试在颤振Web集成测试环境中运行黄金测试。
但是使用颤振驱动器直接返回true，而不做任何事情。
$ flutter drive --driver=test_driver/integration_test.dart --target=integration_test/app_test.dart -d chrome
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Running "flutter pub get&#
浏览 39提问于2022-09-28得票数 0
flutter doctor结果
[√] Flutter (Channel dev, 1.21.0-1.0.pre, on Microsoft Windows [Version 10.0.19041.388], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[√] Chrome - develop for the web
[√] Android Studio (version 4.0)
[√] VS Code (version 1.47.2)
[√]
浏览 20提问于2020-07-23得票数 5
回答已采纳
颤振网页TextField不显示文字写在键盘上时，我使用的包。
进口‘包装:颤振/材料。飞镖’。
textfield可以工作，但当我使用：
进口‘包装:颤振_web/材料。
当我在键盘上写字时，textfield不显示任何内容。
class _MyHomePageState extends State<MyHomePage> {
TextEditingController controller = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold
浏览 0提问于2020-01-12得票数 0
使用PictureRecorder生成dart:ui Image，然后在Canvas上呈现。
当web应用程序在Chrome和Firefox上运行时，代码会像预期的那样运行，运行应用程序如下所示：
flutter channel stable
flutter upgrade
flutter config --enable-web
flutter run --web-renderer canvaskit --release
然而，最终发布的web应用程序后来构建在Raspberry pi 4上，在Raspberry pi 4 k8s集群上的一个k8s荚中运行，该web应用程序构建如下：
flut
浏览 13提问于2022-11-10得票数 0
我有一个使用联邦方法创建的插件。问题是generated_plugin_registrant.dart包含一个不完整的导入，它指向面向应用程序的包，但遗漏了dart文件名，这会导致错误。 import 'package:my_plugin/'; // PROBLEMATIC LINE
import 'package:my_plugin_web/my_plugin_web.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';
// ignore: publi
浏览 104提问于2021-04-25得票数 0
在移动浏览器中打开web应用程序时，是否可以从react-Js web应用程序重定向到flutter安装的移动应用程序？
我已经阅读了flutter的所有插件，这些插件允许从浏览器重定向到web，但实际上我想要从浏览器重定向到flutter移动应用。
浏览 1提问于2019-09-04得票数 3
我将在vs代码中编写颤振网页。在创建颤振应用程序之前，我已经输入了以下命令。
flutter channel beta
flutter upgrade
flutter config --enable-web
之后，我创建了一个颤振的web应用程序
vsCode > Shift+Command+P > Flutter:New Application Project
在创建了一个新的颤振web应用程序之后，我在生成的示例代码中添加了一些日语和阿拉伯文本。使用Shift+F5或F5运行时，不显示日语文本。
如果我使用以下命令从终端运行，则会显示日语和阿拉伯文本。
flutt
浏览 7提问于2021-01-19得票数 1
回答已采纳
我让这个在‘WebGL2RenderingContext’上执行'texSubImage2D‘失败了: ArrayBuffer/ArrayBufferView大小超过了受支持的范围。我在应用程序中使用了Streambuilder。
以下是控制台中的错误详细信息
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/canvaskit/layer.dart 368:5 paint
C:/b/s/w/ir/cache/builder/src/out/host_de
浏览 26提问于2022-10-13得票数 0
1回答
我们为web启用了flutter应用程序，但我们收到了一些导入错误。所有的导入都是有效的，并且可以在Android中工作，所以我看不出有什么问题。
我研究了这个特殊的导入，了解到它是由应用程序中有多个main()引起的，但其他的是有效的。
5:1来自lbconnect_web|lib/screens/member/test_web_entrypoint.dart的import 'generated_plugin_registrant.dart';
对于看起来没有任何问题的包，还有其他10个导入错误。
这些是其他的，并且每个都有多个错误：
来自lbconnect_web|lib/
浏览 0提问于2020-01-29得票数 0
我正在开发一个Flutter web应用程序，但在运行测试时遇到了问题。
Flutter 1.7.8+hotfix.4 • channel stable • git@github.com:flutter/flutter.git
Framework • revision 20e59316b8 (9 weeks ago) • 2019-07-18 20:04:33 -0700
Engine • revision fee001c93f
Tools • Dart 2.4.0
这是pubspec.yaml：
name: web_flutter
description: An app built usin
浏览 2提问于2019-09-18得票数 25
我使用的是Docker和Flutter Web。我刚刚完成了Docker的设置和编写。我的Dockerfile FROM ubuntu:18.04
ARG PROJECT_DIR=/srv/api
ENV PATH=/opt/flutter/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
RUN apt-get update && \
apt-get install -y \
xz-utils \
git \
openssh-clien
浏览 9提问于2019-09-02得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
