How to perform Preview in CKEditor - ckeditor

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.

Related

How to use url image inserting dialog instead of upload in CKEditor 5 Classic

I want to use CKEditor 5, insert image with URL dialog, instead of its default file upload dialog. how to do this in CKEditor 5 Classic?
There is, as far as I know, no such feature officially provided.
There is, however, a tutorial provided in the documentation on how to write such a feature: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/creating-simple-plugin.html
There is also a separate project on github for the same purpose, which appears to be a bit more stylish: https://github.com/khanhna/ckeditor5-image-via-url
Both approaches require to configure a modified build, and both appear to lack an important component: a button in the image's toolbar to edit that URL later on.
So, a more simple approach that does achieve practically the same is to just drag the images into the editor from some browser window.

Umbraco - how to insert clickable images into page?

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 :-)

CKEditor multiple iframe dialog fields show the same dialog

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).

WebBrowser content manipulation

I am using a WebBrowser control and loading a website. However, there is a button whose placement i need to change via JavaScript.I dont have any control over that website. Once that website is loaded in WebBrowser control, I need to run my custom JS so that i can change the position of button.
How do i do this ?
If you have no control over the website/contents, there is no elegant way to do this. Methods like InvokeScript work only with scripts available in the loaded document. See this
A crude and expensive way would be to get the website's content(html), and adding your script, loading it from the storage or data structure you've used and displaying the content, with access to the function via InvokeScript. I will not recommend it.

Sharepoint 2010 - create page with cropping image field

I'm using Sharepoint 2010 (as a beginner). I need to find the best way to allow a user to create a new page inside a sharepoint site. The page must have an image field which the user can crop when he creates the page.
I have 3 problems concerning this:
How can I allow my user to create the page in a single step. The default behaviour is: create page with Title, Url and Content type and the edit the page layout or the page properties. Is there a way to do this in a single step?
What view should my user use when editing the page? The "Edit page" view, or the "Edit properties"? I don't like the "Edit page" view because... it doesn't look like the right way to do it... BUT, I like the fact that I can use my custom BaseFieldControls in this view. The "Edit properties" look great, BUT, customizing it looks like a nightmare. And, of course, I cannot ask the user to use both views...
One of my requests is to allow the user to upload a sharepoint image for the page, and then to crop tree different sizes using the base image. The big question is: where should I allow my user to do this?
In a webpart inside the "Edit properties" window? - Not very easy to integrate it. It seems almost impossible.
In a custom BaseFieldControl in the "Edit page"? Would be great, but, I don't want the user to use this view.
Create my own Asses Picker aspx page for the "Upload image" field, and replace the default one - _layouts/AssetImagePicker.aspx? Is this even possible?
I dont have an answer for everything but for number 1, maybe:
Check out SPServices. It is a Jquery project which is designed to help people use Jquery on Sharepoint sites. It is really useful for accessing, editing, and writing data is less lines of code than ever before... Unless you are a genius and have SP figured out which most do not.
To be honest, the only way to do things in "1 step" is with javascript anyway...
Hopefully you have heard of Jquery:

Resources