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().
Related
I am a beginner with Umbraco. I am able to upload images to the Media Library and then put them onto the page, but for my sidebars I want the images to be clickable links to other parts of my site and other sites.
At the moment I am using the Rich Text Editor to write an anchor tag etc. but this seems ridiculous and I don't want content authors [attempting to be] writing HTML.
It seems like there should be a built-in data type for this, or a property on the image but I see nothing. Do I need to write my own Razor code as a DataType? This seems like such a common thing that I'm surprised there is not a built-in solution.
I'm using 7.2.8
If you're already using the RTE, you can just select the image and click the Link button, then whatever you have selected (in this case the image) should become a link. No need to make your own HTML :-)
I have created two CKEditor plugins. Each of them uses an "Iframe Dialog Field", meaning that a dialog box is launched and the contents of that dialog box is a webpage (you can think of the entire dialog box as being like one big iframe).
Each plugin works perfectly on its own. However if I use both plugins in the same CKEditor app, they both end up displaying the same page, rather than two different pages, despite the fact that they point to two different pages. I see no reason why this should be happening. Does anyone know how to prevent this?
To make sure there is no confusion, an "IFrame Dialog Field" is a dialog box whose contents are another webpage.
Documenentation - http://ckeditor.com/addon/iframedialog
[ This is different from using an "IFrame dialog", which I believe is a plugin that lets the user add an iframe to the page.
Documentation - IFrame Dialog: http://ckeditor.com/addon/iframe ]
In terms of usage, when using an IFrame Dialog Field, you specify the url of the page to load in the addIframe() command. Here is an example of using a CKEditor Iframe dialog
https://gist.github.com/garryyao/1170303
Back to my issue - if I use just one of the plugins in my CKEditor, it works perfectly. Each plugin points at a different url, and opens that url as the contents of the dialog box. But, if I use both plugins in my CKEditor, although I see a different icon for each, both end up launching a dialog box which points to the same url. Depending which one I launch first, that is the url both end up opening. It is as if you are only allowed to use one IFrame Dialog Field in CKEditor, and the first one used overwrites all others.
This same question was asked a couple of years ago, with no response on the CKEditor forum. The person who asked the question posted his solution, or rather his workaround, which was to NOT use the IFrame Dialog Field altogether, but to instead use a regular dialog and then put an iframe element within it.
http://ckeditor.com/forums/CKEditor-3.x/multiple-iframedialog-plugins-display-same-dialog
That seems like an OK workaround, but it is a workaround and not a solution. I haven't tried it yet, and don't know what potential issues I will run into if I go down that route. I'd prefer to fix my existing code rather than rewrite the plugins, unless I have no choice.
Any help would be appreciated.
Since I have not found any further information, or received any answers here, I ended up going with the workaround mentioned at the end of my question - I used a regular dialogue box and put a big Iframe within it. This problem doesn't exist with that approach, and It looks pretty much the same as an Iframe dialog box. (Considering the almost total lack of community support with CKEditor customization, I've realized it is better to just adjust your design/concept to do what is more easily accomplished with CKEditor, rather than get CKeditor to do exactly what you want).
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.
First of all, I had all my buttons which opened the Colorbox using the "ajax" class. That class however caused me many problems:
1-When I open one window, it will appear, when I close it and re-click the same button, it will be loaded twice (so I need to click twice to close)
Is there a fix for this?
What I have done for the moment:
Use iframes; my only problem now is I cant load the other colorboxes that are linked in that iframe. I am using the inline class.
Let me re-phrase that: I click on button "generate" it opens first colorbox with the iframe class. Inside that iframe I have a "generate_2" button which has inline content. Once I click that second button nothing happens. This used to work when I had the first button set to ajax.
What can I do?
thanks!
I had the same problem before. Since JavaScript cannot affect iframes, you must add the JavaScript code inside a script tag in the iframe page itself.
when I close it and re-click the same button, it will be loaded twice (so I need to click twice to close) Is there a fix for this?
I'd wager you are using ajax to open a complete HTML document, aren't you? You shouldn't be doing that. It's not valid HTML to nest one HTML document inside another, and you are causing the scripts from both to be applied to the original document. Each time you load that content, those scripts are being loaded and executed all over again.
I have a project with a very standard layout so I suspect this is a common problem:
<body>
HEADER-CONTAINER DIV - includes superfish jQuery menu plugin but am open to other menu options if necessary.
CONTENT-CONTAINER DIV - depending on the page, contains several other jQuery plugins, HTML, javaScript, etc.
FOOTER-CONTAINER DIV
</body>
I'm looking for a elegant and well performing way to have a superfish menu click load the CONTENT-CONTAINER DIV with new content. The content contains both HTML and javaScript. I also want the solution to change the URL so if someone returns later to /my/page it will reload to the correct location (similar my understanding of Backbone.Router).
Any suggestions? If possible, please provide a link to a page loading into a div example and running any javaScript included in the load.
Superfish or not this is not really a problem. Whenever you add html to the page the browser will execute any javascript or load any javascript file this new html snippet will contain.
So when you click on your menu, you load (or generate) new html and replace your content div with this new content, the browser will execute the scripts.
You will have to rebind all events on that newly inserted content because jQuery will loose track of that.
I searched around and found the a decent example that shows how to take any #url and reload a div. Example found at http://thomasdavis.github.com/examples/restful-app/