I use summernote WYSIWYG editor with code editor enabled. I have noticed that if I make a change in code view and not change back to "normal" view the changes I make is not registered and saved (when I save the page). Meaning nothing is changed, to be able to register the changes one have to change back to "normal" view after making changes in code view. Is there any way to configure summernote to register the changes so I dont have to change back to "normal" view to have my changes registered?
Related
I'm trying to integrate CKEditor in a page of a SPA (Single Page Application).
CKEditor behaves correctly within the SPA page on the first visit, but not on next visits. For example, when pressing the backward browser arrow (to display the previous SPA page) and then the forward arrow (to display again the SPA page with CKEditor), CKEditor appears but the content has been erased and it's not reacting anymore. There is no carret when cliking on the text area. Also all API calls (such as setData() or resize()) have no effect anymore (whereas they were working on fist visit).
I presume CKEditor doesn't like its element to be removed from the DOM (that's what happens when switching to another page) and then be re-added to the DOM (that's what happens when visiting the page again).
EDIT ON July 5 2017
Thanks for your proposition to destroy CKEditor when leaving the page and to recreate it when navigating back, but this causes the lost of the editor state such as the the scrollbar position, the caret position, text selection, etc...
Ideally I would like to make it possible for a user to visit another page while he is in the middle of writing something in the editor (for example to check an information or copy a content from another page) and then to continue exactly where he was (no change on scrollbar, caret, selection,...) when he navigates back to the editor.
Is is possible?
Removing CKEditor just by removing its parent container like in your fiddle is not a good solution as CKEditor attaches some listeners to the DOM and by removing the container you are detaching those listeners which are not reattached then.
You should destroy the editor before removing from DOM and then recreate it. Remember that destroying happens in an async manner so to know when it is finished you may listen to destroy event.
Here is modified fiddle using destroy method (without handling destroy event which should be added).
EDIT ON July 10 2017
To preserve the state of the editor (scrollbar position, text selection, etc) between destroy - recreate, state of all this elements should be retained before destroying editor and then set after recreating it. It is doable, but requires some work and quite a lot of custom code.
Ideally I would like to make it possible for a user to visit another page while he is in the middle of writing something in the editor
Since you are creating a SPA application, for the above the better solution will be to use some floating/fixed container in which CKEditor is placed and which does not reload with rest of the page upon navigation (e.g. the same as Facebook chat works).
Also remember that recreating CKEditor takes some time (very short, but it may be still visible) so on every page navigation it will be visible for the user that something is happening with the editor even though its state does not changed.
I am using CKEditor to get HTML from the user. The user will use HTML tags and it will be saved in the database. I need a functionality for the user to see how the page will be displayed when open as .html before saving in the database.
Is it possible to do that using CKEditor and if yes.....then how?
Thanks-in-Advance
It's certainly possible, but depends a lot on your specific requirements.
Get the contents of the editor using editor.getData(), then open a pop up window displaying that content - this should be relatively simple with JavaScript so I won't give any examples - you'll have to try it yourself first :). If a pop up is not something you want to use, maybe use an inline dialog, such as the ones that jQuery uses.
I would create the workflow so that the preview box has a save button inside it, forcing the user to preview before saving. If that's not acceptable, then create a separate button on your page to do the preview.
I have a Checkbox in my application, and it is meant to be checked, but also disabled. When disabled, I've noticed that the foreground of the checkbox as well as the content textbox are a darker color than when enabled. I would like to leave the checkbox disabled, but change the foreground of the content textbox to the same color as when the checkbox is disabled. How might I accomplish this?
Methed you have to learn how to edit your existing/default style of your control. I can't give you the exact which will work for your but you can use Blend or Visual Studio to edit a copy of a control's current template by right clicking on the control and then selecting Edit Style, Edit Template or Edit Additional Templates as appropriate. In the submenu, you can select Edit a Copy... which will present a window that allows you to create a copy of the default (or current template/stlye if you have already modified it) and customize it.
Here is a basic tutorial for this http://www.jeff.wilcox.name/2010/08/using-blend-to-find-default-style-xaml/
First, I create an instance of CKEditor named 'richEditor' in a webPage.
Second, upon a button click I am making ajax call, which returns html data, and showing it in a jquery UI dialog.Then I am copying the HTML of 'richEditor' instance already present in the webpage and pasting it in a div in the dialog.
But the reused 'richEditor' instance does not work.Any button click in the editor is throwing javascript error and neither the textarea nor the source text area is editable.
Any help or thought is really appreciated.
You cannot basically copy the HTML of the editor and reuse it. First of all, DOM structure of the instance is strictly connected to the JS code driving the editor (and vice versa). It's much deeper than plain HTML. The second reason is that the editor you use is based on the iframe, which cannot be copied preserving its content.
In other words: You have to create another instance of the editor to run it somewhere else. Please refer to the official guide and API docs to know more about CKEDITOR.replace(), CKEDITOR.appendTo() and CKEDITOR.destroy().
I have a web form page that contains two modes: View and Edit. When in view mode, I do not load the CascadingDropDown control. When in edit mode, I do load the CascadingDropDown control.
When in edit mode, the user also has the ability to click another edit button to enable a set of checkboxes and then click update. Clicking these buttons while in edit mode causes the web form to be posted back to the server for process. When the form is redisplayed (still in edit mode) some dropdowns have values to choose and others have nothing. I programatically create the cascading drop down controls in the pre-render phase ever time the page is loaded. I noticed the AjaxControlToolkit script code is not in the output HTML when the user posts back but it is the first time they come into this page.
Seems like I need a way to get the Toolkit to load its scripts after postback? I cannot use update panels either because new dropdowns are added after postback.