Fullscreen by defauld
enghitalo opened this issue · 8 comments
Hey, man. awesome work. This is excellent. Now I can use it in web. Thank you!!!
How can I set fullscreen by default?
That bottom part takes up a lot of space and doesn't help me at all
There is no parameter to do this, but you can use the method: <controller name>.setFullscreen(). Be careful to do this only once the editor is initialized, so you may have to wait a few seconds after widget build to call this, otherwise it will do nothing.
I'm working on adding support for an Edit: done and on master.onInit callback to make things like this easier.
I am also trying to figure out how I can optimize how the height displays... because depending on the size of the device and the toolbar settings, the toolbar may have 1 row, 2 rows, or 3 rows. As a result I can never know exactly how tall to make the HtmlEditor container, so for now there is that blank space near the bottom.
Hi @enghitalo , in the latest 1.6.0 update the editor will now automatically resize itself to take up only the height it needs (you can use the parameter autoAdjustHeight to disable it). Hopefully this helps your use case. Thanks!
Thank you. Awesome!!!!!
@tneotia I have autoAjustHeight enabled but when I create HtmlEditor I have this bottom margin, how can I remove it?
@kekko7072 can you send your full widget code please?
The code to create the new Widget as full screen page
Navigator.of(context).push(
CupertinoPageRoute(
title: 'Crea newsletter',
builder: (BuildContext context) {
return NewsCreate(
isCreate: true,
userData: userData!,
);
}),
),
The Widget page
CupertinoPageScaffold(
backgroundColor: Style.backgroundColor(context),
navigationBar: CupertinoNavigationBar(
padding: EdgeInsetsDirectional.only(bottom: 1),
leading: IconButton(
icon: Icon(
CupertinoIcons.back,
color: Style.primaryColor,
size: 30,
),
onPressed: () async {
if (await _onWillPop()) {
Navigator.of(context).pop();
}
},
),),)
child: SafeArea(
child: GestureDetector(
onTap: () {
controller.removeNotification();
if (!kIsWeb) {
controller.clearFocus();
}
},
child: Container(
child: HtmlEditor(
controller: controller,
otherOptions: OtherOptions(
decoration: BoxDecoration(),
),
htmlEditorOptions: HtmlEditorOptions(
hint: 'Your text here...',
inputType: HtmlInputType.text,
shouldEnsureVisible: true,
autoAdjustHeight: true,
darkMode: MediaQuery.of(context).platformBrightness ==
Brightness.dark,
initialText:
widget.isCreate ? ' ' : widget.news!.aboutNews.html,
),
htmlToolbarOptions: HtmlToolbarOptions(
initiallyExpanded: true,
toolbarPosition: ToolbarPosition.aboveEditor,
defaultToolbarButtons: [
StyleButtons(),
FontSettingButtons(fontSizeUnit: false),
FontButtons(clearAll: false),
ColorButtons(),
ListButtons(listStyles: false),
ParagraphButtons(
textDirection: false,
lineHeight: false,
),
InsertButtons(
video: true,
audio: true,
table: true,
hr: false,
otherFile: false)
],
buttonColor: Style.textColor(context),
buttonSelectedColor: Style.textMenuColor(context),
buttonFillColor: Style.primaryColor,
textStyle: TextStyle(
color: Style.textColor(context),
),
dropdownBackgroundColor: Style.menuColor(context),
toolbarType: ToolbarType.nativeGrid, //by default
onButtonPressed: (ButtonType type, bool? status,
Function()? updateStatus) {
print(
"button '${describeEnum(type)}' pressed, the current selected status is $status");
return true;
},
onDropdownChanged: (DropdownType type, dynamic changed,
Function(dynamic)? updateSelectedItem) {
print(
"dropdown '${describeEnum(type)}' changed to $changed");
return true;
},
mediaLinkInsertInterceptor:
(String url, InsertFileType type) {
//print(url);
return false;
},
mediaUploadInterceptor:
(PlatformFile file, InsertFileType type) async {
if (kIsWeb) {
await uploadFile(
file.bytes!,
type,
file.extension!,
);
} else {
await uploadFile(
await File(file.path!).readAsBytes(),
type,
file.extension!,
);
}
return false;
},
),
callbacks: Callbacks(onBeforeCommand: (String? currentHtml) {
print('html before change is $currentHtml');
}, onChangeContent: (String? changed) {
print('content changed to $changed');
}, onChangeCodeview: (String? changed) {
print('code changed to $changed');
}, onChangeSelection: (EditorSettings settings) {
print('parent element is ${settings.parentElement}');
print('font name is ${settings.fontName}');
}, onDialogShown: () {
print('dialog shown');
}, onEnter: () {
print('enter/return pressed');
}, onFocus: () {
print('editor focused');
}, onBlur: () {
print('editor unfocused');
}, onBlurCodeview: () {
print('codeview either focused or unfocused');
}, onInit: () {
print('init');
}, onImageUploadError:
(FileUpload? file, String? base64Str, UploadError error) {
print(describeEnum(error));
print(base64Str ?? '');
if (file != null) {
print(file.name);
print(file.size);
print(file.type);
}
}, onKeyDown: (int? keyCode) {
print('$keyCode key downed');
print(
'current character count: ${controller.characterCount}');
}, onKeyUp: (int? keyCode) {
print('$keyCode key released');
}, onMouseDown: () {
print('mouse downed');
}, onMouseUp: () {
print('mouse released');
}, onNavigationRequestMobile: (String url) {
print(url);
return NavigationActionPolicy.ALLOW;
}, onPaste: () {
print('pasted into editor');
}, onScroll: () {
print('editor scrolled');
}),
plugins: [
SummernoteAtMention(
getSuggestionsMobile: (String value) {
var mentions = <String>['test1', 'test2', 'test3'];
return mentions
.where((element) => element.contains(value))
.toList();
},
mentionsWeb: ['test1', 'test2', 'test3'],
onSelect: (String value) {
print(value);
}),
],
),
),
),
),
)
@kekko7072 you have to manually set the height of the editor area by doing some calculations, then internally the package does some calculations to remove the scrollbar on the editor. In your case you would likely do MediaQuery.of(context).size.height - appBarHeight. You can set the height in the OtherOptions class.
ok thanks