yokoboko
commented
4 years ago I have the same problem. Any solution?
Open AshutoshPatole opened 4 years ago
yokoboko
commented
4 years ago I have the same problem. Any solution?
AshutoshPatole
commented
4 years ago @yokoboko not yet. I haven't found any way to remove the color feature.
rishav00a
commented
4 years ago Same problem there also
yokoboko
commented
4 years ago When you tap on the Select, it tries to open the OS color picker and it's crashing on mobile. I gave up.
I did similar class around Quill JS and it's working just fine. Hope it helps you:
Create key in your stateless widget:
final GlobalKey
Put that somewhere in your app(height is optional):
QuillFlutter(
key: _keyEditor,
height: 200,
placeholder: '',
value: '',
),You can defocus if the user taps outside with this code:
GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
if (_keyEditor.currentState != null) {
_keyEditor.currentState.unfocus().then((value) =>
SystemChannels.textInput.invokeMethod('TextInput.hide'));
}
}
......Set text:
_keyEditor.currentState.setText('<html.....');Get text:
String text = await _keyEditor.currentState.getText();Put that in quill_flutter.dart:
import 'dart:convert';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:webview_flutter/webview_flutter.dart';
class QuillFlutter extends StatefulWidget {
final String value;
final String placeholder;
final String toolbarOptions;
final double height;
QuillFlutter({
Key key,
this.value,
this.placeholder,
this.toolbarOptions,
this.height,
}) : super(key: key);
@override
QuillFlutterState createState() => QuillFlutterState();
}
class QuillFlutterState extends State<QuillFlutter>
with AutomaticKeepAliveClientMixin<QuillFlutter> {
WebViewController _controller;
String _text = "";
String _page;
final Key _webViewKey = UniqueKey();
bool _pageFinished = false;
@override
void initState() {
super.initState();
_page = _initPage();
}
@override
void dispose() {
_controller = null;
super.dispose();
}
@override
bool get wantKeepAlive => true;
@override
Widget build(BuildContext context) {
super.build(context);
return Container(
height: widget.height ?? MediaQuery.of(context).size.height,
child: WebView(
key: _webViewKey,
onWebResourceError: (e) {
print("error ${e.description}");
},
onWebViewCreated: (webViewController) {
_controller = webViewController;
final String contentBase64 =
base64Encode(const Utf8Encoder().convert(_page));
_controller.loadUrl('data:text/html;base64,$contentBase64');
},
javascriptMode: JavascriptMode.unrestricted,
gestureNavigationEnabled: false,
navigationDelegate: (navigation) async {
if (_pageFinished &&
navigation.url.toLowerCase().startsWith('http')) {
final launched = await _launchURL(navigation.url);
return launched
? NavigationDecision.prevent
: NavigationDecision.navigate;
}
return NavigationDecision.navigate;
},
gestureRecognizers: [
Factory(() => VerticalDragGestureRecognizer()..onUpdate = (_) {}),
].toSet(),
javascriptChannels:
<JavascriptChannel>[_getTextJavascriptChannel(context)].toSet(),
onPageFinished: (String url) {
_pageFinished = true;
if (widget.value != null && widget.value.isNotEmpty) {
setText(widget.value);
}
},
),
);
}
JavascriptChannel _getTextJavascriptChannel(BuildContext context) {
return JavascriptChannel(
name: 'GetTextQuill',
onMessageReceived: (JavascriptMessage message) {
String isi = message.message;
if (isi.isEmpty ||
isi == "<p></p>" ||
isi == "<p><br></p>" ||
isi == "<p><br/></p>") {
isi = "";
}
setState(() {
_text = isi;
});
});
}
Future<String> getText() async {
await _controller
.evaluateJavascript("GetTextQuill.postMessage(quill.root.innerHTML);");
return _text;
}
setText(String v) async {
_controller.evaluateJavascript("quill.setText('');");
_controller
.evaluateJavascript("quill.clipboard.dangerouslyPasteHTML(0, '$v');");
}
Future<String> unfocus() {
return _controller.evaluateJavascript('document.activeElement.blur();');
}
Future<bool> _launchURL(String url) async {
if (await canLaunch(url)) {
await launch(url);
return true;
}
return false;
}
String _defaultToolbarOptions = """
[
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
['bold', 'italic', 'underline'], // toggled buttons
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'align': [] }],
['link'],
['clean'] // remove formatting button
]
""";
String _initPage() {
return '''
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="user-scalable=no, width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
html { height:100%; position: fixed; overflow: hidden; }
body { position:fixed; overflow: hidden; top:0; bottom:0; right:0; left:0; margin: 0px; overscroll-behavior: none; }
#editor {
padding: 0px;
margin: 0px;
height: 100%;
flex: 1;
overflow-y: auto;
width: 100%;
}
#editor-container {
padding: 0px;
margin: 0px;
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
}
</style>
<!-- Include stylesheet the Quill library -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
</head>
<body style="background-color:white;">
<div id="debug"></div>
<div id="editor-container">
<div id="editor"></div>
</div>
<!-- Initialize Quill editor -->
<script>
var quill = new Quill('#editor', {
placeholder: '${widget.placeholder ?? ''}',
theme: 'snow',
modules: {
toolbar: ${widget.toolbarOptions ?? _defaultToolbarOptions},
// sticky_toolbar: true
}
});
// quill.on('editor-change', function(eventName, ...args) {
// //window.scrollTo(0, 0);
// if (eventName === 'selection-change') {
// //document.getElementById("debug").innerHTML = args;
// }
// //quill.blur();
// });
</script>
</body>
</html>
''';
}
}
aniketsongara
commented
4 years ago @yokoboko Thanks for your response but i am not getting your answer. where did you changed your code, i am getting same problems as @AshutoshPatole getting.
yokoboko
commented
4 years ago @aniketsongara You can't fix it. The problem is coming from the JS library. I provided copy/paste code that works with Quill JS editor and does the same as this one. It even looks better for mobile.
aniketsongara
commented
4 years ago @yokoboko Can you give brief details how can i implement Quill JS editor for application. any reference or any snapshot of code or something which help me to implement this.
yokoboko
commented
4 years ago @aniketsongara Updated my post with instruction and code. Hope this helps.
Everything works well until i try to change the color of the text. it crashes and gives me this error.