I created a way to save Quill text to a database. Every time a user clicks on a saved document, it pulls the saved Quill text from the database and has the text appear within the Quill text editor. At this point, if I trigger the undo function, it will delete ALL the text pulled from the database, so the page is blank.
I think what is happening is that the Quill editor sees the pulled up text from the database as a paste into the text editor, so when you trigger the undo function, it clears the "paste/pull from the database".
Is there a way to stop this from happening? Is there a way to make quill NOT clear everything when you trigger the undo function right after pulling the initial text from the database?
When you "load" the content from the database into the editor, whether you like it or not, you are changing whats inside Quill Delta (the data). Any kind of change made to Quill's content is viewed by itself as... well... a change made, therefore, something that can be undone.
[...] Every time a user clicks on a saved document, it pulls the saved
Quill text from the database and has the text appear within the Quill
text editor. At this point, if I trigger the undo function, it will
delete ALL the text pulled from the database, so the page is blank.
[...] Is there a way to stop this from happening? Is there a way to
make quill NOT clear everything when you trigger the undo function
right after pulling the initial text from the database?
Since you just added content to Quill and there is no interest in worrying about any changes you made previously, I suggest you take a look at this. Basically, the idea is:
Get the content.
Add the same to the editor.
After the addition has been made, call the following code:
quill.history.clear();
After that, when trying to perform an undo operation, nothing will happen as no history has been stored.
When creating Quill object, set history config in your modules. For example:
var quill = new Quill('#editor', {
modules: {
history: {
delay: 2000,
maxStack: 500,
userOnly: true
}
},
theme: 'snow'
});
The "userOnly" config will filter out programatically value changes.
https://quilljs.com/docs/modules/history/#useronly
Related
I have an editor made with draftjs. If I have previous content, it is filled with that content.
I need to track the clicks. When I click, for example, in the middle of the content and start writing, I will write at the beginning of the editor ... :/
How can I do that?
Your component must have been re-rendering some how when you start typing in it. You should stop that re-render or may be assign the newly got state to the Editor if it re-renders
in my app, when editing a record, I've added an ActionListener to save a temporary copy of the edited values for each field automatically, so that if the app is put in the background and then stopped, the edited values can be recovered when the app is started up again.
However, with the TextAreas it doesn't work since actionListeners don't get called unless the user takes some action (like leaving the field). I need to use the TextArea since there can be multiple lines of text, so using a DataChangedListener for a TextField as suggested in this thread does not seem a viable solution. And being able to save the TextAreas is important to achieve good UX since the user likely loses more work when text is dropped than if for example a value set in a Picker is lost.
Is there another way to achieve this result?
Thanks in advance
TextField allows multiple lines using setSingleLineTextArea(false). When invoked it will function similarly to TextArea.
I'm using ExtJS 5.1.3, I have a grid which is loaded from a store which has a model. The grid is set to use plugin roweditor, so I edit a cell and give it a new value, at this point the red tick is shown that the cell has been changed.
I have a Save button which when clicked gets the store.getModifiedRecords() and passes these off to a ajax request, upon success of this request a few things happen and the last action I do is to load the grid store again which then populates the grid again with the latest version of the data, this is fine and seems to be working as expected.
As this is a multi page application I also have a check when a user navigates away from this page, this is to catch any unsaved grid changes, so basically I get any form from the page and verify the isDirty() value, this is where I am finding my issue, the roweditor is being returned as dirty, this is because some columns have an editor and ExtJS uses form validation on these fields,
I can't understand why the store loading again has not cleared any dirty fields associated with the grid columns? I've tried a number of things such as clearing the store prior to ajax request along with refreshing the grid view, I've tried committing the store changes prior to doing the ajax request but each time I try navigate away from the page after a grid save I pick up the roweditor as having dirty fields :( any help is greatly appreciated.
EDIT: managed to replicate on a simple fiddle
https://fiddle.sencha.com/#view/editor&fiddle/1rmf
The fiddle is basic, to replicate follow these steps;
edit first row age, change age to 13
click Save (i'm forcing the store to load data which has the change we've made)
click 'Check roweditor is Dirty() value' button to see the value of the roweditor isDirty() function, this will return true
if you look at the button handler, you can drill into forms[0].items.items[2] and see that this field has dirty: true which is why isDirty() is returning true.
SOLUTION
As explained in accepted answer, the roweditor is not affected by the store edit/cancel or load in my case. What I did when clicking on 'Save' was to get the grid, then the editor and it's form and called reset() on this so effectively sync everything again.
grid.editingPlugin.getEditor().form.reset();
you can also get access to plugins via grid.getPlugins() which returns an arrary
updated fiddle to show it working
https://fiddle.sencha.com/#view/editor&fiddle/1rmr
During the editing process grid will eventually call loadRecord on the editor's form. However the editor's form is not cleared upon editing success or canceling. That is why your check for dirtyness returns false.
Grid reloading the data is not destroying the editors. It is an optimisation. Editors are created only once and they are destroyed along with the grid.
I'll try to answer regarding to an experience of mine with an all ExtJS desktop application.
By the way looking quickly over your description, you may have to call the Store.sync() method that refreshes your store.
Looking more deeply, there are many way to make CRUD using ExtJs.
I've been made using the "instance" of store but at certain point I had to change it to static calls like MyApp.store.Model.save() etc. That makes you have only one instance of the store avoiding dirty data.
Here's my project folder if you need
https://github.com/guilhermeribeirodev/grizzlyboilerplate/tree/master/src/main/webapp/js/MyApp
We have a rowediting plugin on grid where a button of one trigger field changes some other values of the record (we are loading some remote data which get applied to the record). The values that get changed in background are most commonly not editable, so they are just rendered. Basically the remote loading of the data works fine, meaning the record get changed and all data get save but we have the following problems:
1.The rowediting plugin does not show the changes that where applied to the record fields
2.Setting the changes via record.set() cause the store to sync immediately and not on clicking the "save" button of the editor.
So how can we make the editor to show the changes applied in the background and how can we apply these changes in a way so that they get saved along with the other edited fields.
Thanks in advance for any help!
This should not be that complicated, you just need a reference to your active editor instance. You can then either
reload the record into the form by calling loadRecord() again. But note that this may overwrite any changes that where made by now within the editor
or (for the second way I expecting the values to be exactly the same as in the record in manner of key:value definition - short: no special mapping is required)
apply the new data to the record by calling either set (note that this will trigger sync if you have autoSync turned on) or by using Ext.apply(recinstance.data,newvalues) and editorinstance.getForm().setValues(newValues)
I wish to write an Angular application which integrates the Ace editor with a toolbar for saving + undo/redo. I've created a basic plunk for working out this app.
As you should be able to tell from the plunk there is a 'toolbar' directive responsible for rendering the toolbar (with three buttons: Save, Undo and Redo) and an 'ace' directive responsible for rendering the Ace editor. Both directives reside in 'directives.coffee'.
The toolbar should behave the way you would expect from a text editor toolbar, i.e.:
The save button should be enabled iff the document has changed since it was last saved
When clicking the save button, the document state should change to pristine (i.e., not dirty) and the save button should go back to the disabled state
The undo button should be enabled iff there is at least one operation that can be undone
When clicking the undo button, the editor should be told to undo the last operation and the undo button should be updated as per the above point
The redo button should be enabled iff there is at least one operation that can be redone
When clicking the redo button, the editor should be told to redo the last operation and the redo button should be updated as per the above point
So my question is, how can I devise an Angular binding between the Ace editor and the application toolbar so that the above specification is met?
I am not sure what do you need to do on angular side, but ace provides methods for all of this
var undoManager = editor.session.getUndoManager()
undoManager.isClean()
undoManager.markClean()
undoManager.hasUndo()
undoManager.hasRedo()
Note that isClean is based on undo stack not on document value, so writing and deleting a letter will enable save button even though value isn't changed.
Also it is better to use editor.on("input", function(){}) instead of 'change' since input event is fired asynchronously.