Is there a way to resize tables and make them drag and droppable?
We are starting to use this plug in more and more. Is there any chance of being able to create “forms” with this editor so that we could collect and extract data from them in a structured way? For example, Create a form that uses something like <> to identify the data to be extracted from the form and then be able to show the WYSIWYG in Form mode so that only those parts of the form are editable? We collect a lot of data for AI ingestion and something like this would create a very presentable interface yet collect data in a way that would make it more useful in the future. Just an idea.
Alternatively, simply creating a “Read Only” block within the WYSIWYG would also be incredibly useful. Something that the eventual editor can’t remove or write over.
Hi!
We’ll think about what we can do with this. But, frankly speaking, at the moment we don’t have any good ideas on how to correctly implement adding forms.
hey @MindForApps i just recently purchased the plugin but im having trouble making it work for my use case. really hope you can help!!
-
is it possible to have the tool bar like a floating group just above the keypad like this: (if not can this please be included as a feature)??
-
How can i achieve pagination this way i.e dashed line reflecting the pg number. (dont want to use next or previous btns) I believe using repeating groups here would not work since the memory content here is text while RG is a list of texts so it wont be saved? lmk your thoughts:
-
Is it possible to change the style of the image captions? If so, how? I need sthg like this:
-
I want the autosave feature to work like Gdocs for example when a user edits a memory and writes more content it is automatically saved at the backend too and when a user makes changes and comes back to the page theyre shown the updated content. Is this possible through autobinding only or do i need to do sthg else too?
Please help! really hope i can continue using this
To configure the toolbar, the “Editor Mode” parameter is used, but unfortunately in all options (classic, inline, balloon-always, balloon) the toolbar is located at the top. This is due to the library that we used when creating the plugin.
.
Sorry, but I don’t quite understand the question. This is a text editor and it does not have pagination. The data is one solid HTML.
Could you clarify what exactly you mean.
.
There are no built-in settings for this, but you can try using custom CSS.
The first thing that comes to mind is something like this:
<style>
.sun-editor-editable figure figcaption{
background-color: black;
color: wheat;
transform: scale(0.8);
border: solid 1px #ff0000;
border-radius: 5px;
bottom: 20px;
text-align: center;
}
</style>
here:
> background-color: black; - background
> color: wheat; - text color
> transform: scale(0.8); - decreases the size of the description block (by default it is equal to the width of the image)
> border: solid 1px #ff0000; - type, thickness and color of the border
> border-radius: 5px; - border radius
> bottom: 20px; - shifts the description block up by 20 pixels
> text-align: center; - center text alignment
set colors, sizes and other parameters depending on your preferences.
Write this custom CSS in the page settings. For example, in “Script/meta tags in header”
But you should take into account that this is external CSS and it is not written in the HTML itself.
<figcaption>
Example description using custom CSS.
</figcaption>
.
If I understand you correctly, you want any content changes to be automatically saved to the database. Yes, for this it is enough to simply set up autobinding.
.
I hope that I was able to help you in some way.
By pagination i mean page breaks - lets say after every 500 words the editor shows a dashed line marking the page number (as shown in the ss)
would autobinding also reflect the updated text in the canvas when the user opens to edit after closing it once? just confirming.
Unfortunately, the editor does not have such a function. You may have to do something manually.
When autobinding is enabled, all changes are immediately written to the database. Thus, the content in the editor is always equal to the content in the database.
I sent you a link to the editor of our test application in a private message, where you can see a working example using autobinding.
Full access is open for you and you can test everything yourself and see whether it suits your needs or not.
Thanks so much! ill check it out. Also can you please suggest a workaround changing the toolbar position to the bottom somehow? thats really important for me!
Also for achieving this style for the editor (as shown in the ss)
Thanks alot!
Unfortunately, this option is not provided in this configuration.
Of course, you can try using custom CSS, but I think that this can add bugs to the stability of the editor.
For example:
<style>
.se-container {
display: flex !important;
flex-direction: column-reverse !important;
}
</style>
will swap all the editor elements. Those that were at the bottom will be displayed at the top.
Also disable “stickyToolbar” - set the value equal to “-1”
Experiment. But as I wrote above, I do not know how the editor will behave and this will be your responsibility.
Thankyou so much for the phenomenal support! I am using the plugin for my app and your help has made it easier for me to make most of the tweaks. I am however stuck on this bit:
This white space in the footer of the editor doesnt seem to change.
Im using this in the header:
Can you please tell what am i doing wrong here? Do I need to add in sthg else?
Again, THANKYOU FOR YOUR EXCEPTIONAL HELP & FOR THIS POWERFUL PLUGIN!!
This is the bottom bar. It is a separate element.
If you do not use the bottom bar, you can simply disable it via the menu.
Otherwise, if you need the bottom bar, you can set the color you need for it or make it transparent.
For example:
.se-resizing-bar {
background: transparent !important;
}
And then, if necessary, you can also specify the desired color for the text in this bar (char-label and char-counter)
.se-resizing-bar .se-char-counter-wrapper {
color: #857878 !important;
}
