rich_edit 0.1.1

  • Readme
  • Changelog
  • Example
  • Installing
  • new64

Pub

rich_edit #

flutter 富文本编辑器 支持图文、视频混排。

Getting Started #

首先需要继承实现RichEditController。 简单使用可直接用下面的例子。

  chewie: 0.9.10
  video_player: 0.10.11
  image_picker: 0.6.7
import 'package:chewie/chewie.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:rich_edit/rich_edit.dart';
import 'package:video_player/video_player.dart';

class SimpleRichEditController extends RichEditController {

  Map<String, ChewieController> controllers = Map();


  //添加视频方法
  @override
  Future<String> addVideo() async {
    var pickedFile = await ImagePicker().getVideo(source: ImageSource.gallery);
    if (pickedFile != null) {
      //模拟上传后返回的路径
      return "http://static.fanghnet.com/uploads/szx/uploads/2020/06/353f2c48ce164e368cc040c4fb425331.mp4";
    }
    return null;
  }

  //添加图片方法
  @override
  Future<String> addImage() async {
    var pickedFile = await ImagePicker().getImage(source: ImageSource.gallery);
    if (pickedFile != null) {
      //模拟上传后返回的路径
      return "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592205365009&di=fcc201c596fc6681fe7812aa7fea4b23&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg";
    }
    return null;
  }

  //生成视频view方法
  @override
  Widget generateVideoView(RichEditData data) {
    if (!controllers.containsKey(data.data)) {
      var controller = ChewieController(
        videoPlayerController: VideoPlayerController.network(data.data),
        autoPlay: false,
        autoInitialize: true,
        aspectRatio: 16 / 9,
        looping: false,
        showControls: true,
        // 占位图
        placeholder: new Container(
          color: Colors.grey,
        ),
      );
      controllers[data.data] = controller;
    }
    var video = Chewie(
      controller: controllers[data.data],
    );
    return video;
  }

 //生成图片view方法
  @override
  Widget generateImageView(RichEditData data) =>
      Image.network(data.data, height: 200, width: 300);
}

使用

RichEdit(SimpleRichEditController());

SimpleRichEditController 方法

方法名作用
generateHtml()将内容转换为html
generateTextHtml()生成的文本html,可使用 override 自定义生成模版
generateImageHtml()生成的图片html
generateVideoHtml()生成的视频html
getDataList()获取内容数据集

0.0.1 #

  • Initial Open Source release.

0.1.0 #

  • update README.md

0.1.1 #

  • fix bug

example/lib/main.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:rich_edit/rich_edit.dart';
import 'package:rich_edit_example/SimpleRichEditController.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MaterialApp(home: Home()));
}

class Home extends StatelessWidget  {

  SimpleRichEditController controller = SimpleRichEditController();


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.send),
            onPressed: () {
              Navigator.push(context, MaterialPageRoute(builder: (c) {
                return Pre(
                  data: controller.generateHtml(),
                );
              }));
            },
          )
        ],
      ),
      body: RichEdit(controller),
    );
  }

  @override
  void dispose() {
    controller.controllers.forEach((key, value) {
      value.videoPlayerController.dispose();
      value.dispose();
    });
  }




}

class Pre extends StatelessWidget {
  final data;

  Pre({Key key, this.data}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final String contentBase64 =
        base64Encode(const Utf8Encoder().convert(data));
    return Scaffold(
      appBar: AppBar(),
      body: WebView(
        initialUrl: 'data:text/html;base64,$contentBase64',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }

}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  rich_edit: ^0.1.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:rich_edit/rich_edit.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
28
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
99
Overall:
Weighted score of the above. [more]
64
Learn more about scoring.

We analyzed this package on Jul 8, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform linux

Because:

  • package:rich_edit/rich_edit.dart that declares support for platforms: android, ios

Package does not support Flutter platform macos

Because:

  • package:rich_edit/rich_edit.dart that declares support for platforms: android, ios

Package does not support Flutter platform web

Because:

  • package:rich_edit/rich_edit.dart that declares support for platforms: android, ios

Package does not support Flutter platform windows

Because:

  • package:rich_edit/rich_edit.dart that declares support for platforms: android, ios

Package not compatible with SDK dart

Because:

  • rich_edit that is a package requiring null.

Maintenance suggestions

The package description is too short. (-1 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test