I am working with a CMS which is using ckeditor. I need to work mainly in source mode.
The problem is, the ENTER key is deactivated (only in source mode). I need the enter key to realign code, create new spaces between elements, etc. So basically I would need the ENTER key to do exactly what the ENTER key in a TXT file does. Just creating a new line without having any content (or tag) in it.
Any idea how I can activate the enter key? I have seen it works in ckeditor demos. However, the CMS I am working in had it already implemented and I guess the button was deactivated for source mode editing. I just can't figure out how I can reactivate it in the config file.
When using a source mode, the content area is plain textarea where Enter key works by default. There are also no iframes in source mode (contrary to editing mode) thus all is in the same document.
Most likely there is some key listener added which blocks enter keys for editor textarea or all textarea on page and in order to allow enters you would need to remove it.
Related
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.
When deleting a text block with a basic style applied, the editor remains in the active state (bold, for example) while the button for that style is deactivated. Typing a character will reactivate the button.
I have verified that this is occurs on the CKEditor demo as well, so it shouldn't be related to any changes in our installation.
Steps to reproduce:
Use standard CKEditor: http://ckeditor.com/demo#standard
Select all and delete existing contents
Type 'Hello, World'
Select 'World'
Click 'Bold' button (or Ctrl+B)
Move cursor to end of content
Remove via backspace until bold content is removed
This results in the button displaying as inactive (default state), but typing any content will enter the text in bold and reactivate the button.
I've reproduced this (with slightly different rules regarding blank content and trailing spaces) on Chrome, Firefox, and IE10.
Is there a way to pull the state at which new content would be entered into the editor and use that to update the button state so that a user can see what their entered content will input as?
I know this TC very well:
delete entire bold, bold button is inactive,
start typing again,
bold is applied :|
It occurs on Webkit (Chrome and Safari) because of a very ugly behaviour of Webkit's contenteditable behaviour.
This is reported here:
http://dev.ckeditor.com/ticket/9998 - CKEditor (ticket grouping all Webkit's backspace handling bugs)
https://code.google.com/p/chromium/issues/detail?id=226941 - Chromium
https://bugs.webkit.org/show_bug.cgi?id=114791 - Webkit
Unfortunately neither Chromium's nor Webkit's developers replied and perhaps as most of the contenteditable bugs, this one won't be fixed soon (there are critical issues that haven't been fixed for years). So perhaps, in the near future we'll fix this on the CKEditor's side by overriding entire backspace logic with our own. Then such issues should not exist.
PS. Regarding the rest of the browsers I know that there are small inconsistencies, but you won't be able to fix them. Like for the Webkit's bug, to fix these cases we need to create custom backspace handling.
The Situation
I need to automate the copying of a HTML link to the current page that
is viewed in the current Firefox Tab into other WYSIWYG editors. This
is not the same as copying just the plain-text of the URL, nor is it
the same as pasting just the plain-text of the web pages title. This
is also not the same thing as navigating to some other web page that
has the HTML link to the page of interest, selecting the text with the
mouse cursor, and typing CTRL-C to copy it into the current operating
systems clipboard (both Linux and Windows, should not make any
difference). Only the update to the clipboard is to be automated; the
pasting from the clipboard into the target application will be done
manually.
The desired use case is as follows:
The user browses to any web page from within Firefox.
The user types some user-specified key sequence that is not
in conflict with standard Firefox built-in key bindings.
Firefox will then do only part of what Copy Link Bookmarklet
does: Instead of opening up a new separate window/tab and
constructing and rendering the HTML for the link, and then
requiring the user to waste motion in selecting and copying the
link into the clipboard, the extension will then format the HTML
itself and copy that into the clipboard directly.
The user then selects any of the targets described below and
types CTRL-V to paste the formatted text.
The user then sees the link as a link in that target area, and does
not see anything literal like http://...
For example, if the webpage browsed to was http://www.google.com, and
the user clicked the user-defined key sequence, and if the user pasted
it into some Google Document, what they would see in that document is
not http://www.google.com nor would they see Google, but instead
would see what you would see when you read this in StackOverflow in a
web browser: Google
Now, there are Firefox extensions and bookmarklets that come close,
but they all involve no net reduction in mouse motion and/or key press
overhead, which is the most time-wasting aspect of this frequently
occuring use case. My searches for an existing extension turned
up nothing that exactly meets my needs (see Research section
below). Therefore, I think I may need to roll my own extension (or
modify an existing one), unless someone can point me to an existing
extension that provides this functionality.
The extension I have in mind should work in Firefox version 11 or
greater running on either Linux or any version of Windows. Only
Firefox and a suitable Firefox extension should be needed, and not any
other special software.
Targets of the paste should be:
GMail compose text areas
Google Documents
Microsoft Word documents
Microsoft Outlook compose text areas.
Any other WYSIWYG editor such as the Blogger post editor.
Notepad (in which case it is the web page title that is pasted only
and not the URL, or both the web page title and URL as separate
plaintext; either way).
About user-specified key bindings: If there was an extension already
that did the above but without providing the ability to bind a
keybinding to it, then I would expect to be able to use the keyconfig
extension extension to handle that aspect. Actually, that might
even be preferable; I don't know yet.
Research
Below are approaches I investigated that came close to what I want,
but did not exactly meet the need:
Hacking on Copy Link Bookmarklet won't work because, from what I can tell, there is no way to update the OS's clipboard from a bookmarklet, hence why I think that a Firefox extension is required.
In a Firefox extension, how can I copy rich text / links to the clipboard?
3 FireFox Addons to Easier Copy Links and Anchor Texts -- None of the extensions listed do what I want because they force you to use the right mouse button and navigate down one or two levels of context menu, which is wasted motion.
Copy Link Text (CoLT) -- CoLT also supports copying a hyperlink and it’s associated text as a rich-text formatted link, however it does not include a default keybinding. It looks like someone else is attempting to tie keyconfig to CoLT, which might be an option as a solution.
Copy URL Plus -- Looks like it has the copy-to-clipboard logic, but doesn't look like it has been maintained since Firefox 1.x timeframe.
I am answering my own question:
The CTRL-SHIFT-F11 binding will silently stop working if both keysnail and keyconfig are installed into the same Firefox browser. The fix for me was to simply uninstall keysnail as I don't use it.
I did not actually need to write my own Firefox extension, but I did
need to scrape out a bit of code that copies the richtext link from
the Copy Link Text (CoLT) extension and apply it directly as a
binding into the keyconfig extension as follows:
Install the keyconfig extension.
Restart Firefox.
After Firefox loads up, type CTRL-SHIFT-F12 to bring up the keyconfig configuration menu.
On the bottom of the page, click on the Add a new key button.
In the Name field, type in some suitable name such as Copy Rich Text Link to Current Page.
Type in the following chunk of Javascript code (This code I carved
out of the objCoLT.CopyBoth function inside the content/colt.js
file inside the Copy Link Text (CoLT) extension):
var url = content.document.location.href;
var text = content.document.title;
// Use the users selection instead of the title if text is selected:
var selection = document.commandDispatcher.focusedWindow.getSelection().toString();
if (selection != "")
{
text = selection;
}
var richText = "" + text + "";
var xfer = Components.classes["#mozilla.org/widget/transferable;1"].createInstance(Components.interfaces.nsITransferable);
xfer.addDataFlavor("text/html");
var htmlString = Components.classes["#mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
htmlString.data = richText;
xfer.setTransferData("text/html", htmlString, richText.length * 2);
var clipboard = Components.classes["#mozilla.org/widget/clipboard;1"].getService(Components.interfaces.nsIClipboard);
clipboard.setData(xfer, null, Components.interfaces.nsIClipboard.kGlobalClipboard);
Click Ok.
Back in the main Keyconfig dialog, <disabled> should be shown in the text field to the left of the Apply button.
Click in that text field, and type the keybinding you want to associate with it, such as CTRL-SHIFT-F11.
Click the Apply button.
Click the Close button to close the Keyconfig configuration dialog box.
To test this out, proceed as follows:
In Firefox, navigate to some arbitrary page.
Type in CTRL-SHIFT-F11 (or whatever keybinding you chose above).
Notice that no dialog boxes popup; that is intentional.
Open up Google Documents, and Create a new document.
Click in the new document, and type CTRL-V.
You should see the HTML/rich-text form of the link pasted in.
Click on the link and then click on the URL to the left of Change.
The browser should open up the original page corresponding to that URL.
I have been able to copy URL as HTML with the following bookmark:
javascript: navigator.clipboard.write([new ClipboardItem({ ["text/html"]: new Blob([`${document.title}`], { type: "text/html" }) })]);
Unfortunately in firefox the Clipboard write API still requires to set thedom.events.asyncClipboard.clipboardItem to true in about:config.
Several extensions exist that offer copying of title and URL but few seem to support Rich Text creation. The key is that the copied text needs to be formatted in html with a href and it needs to be copied as a text/html type.
The extension I went with in the end is CopyTabTitleUrl. (GitHub) It supports both requirements and also has a keybind feature along with a toolbar button that can also function as a single-click copy.
Set the Format option to:
${title}
Then Activate Extended Mode and make sure to check the "Copy in text/html format" option in Other. After that, using the format copy, the result can be correctly pasted into Office applications. And Stack Exchange evidently as the links above were created by the add-on.
Note that the Edge implementation of URL copying seems to be somewhat different still. With a default plaintext paste, Edge will just paste in the URL while this approach will of course paste unformatted HTML. But it's close enough.
I'm writing an editor that is updating a WYSIWYG view in the browser. As this update can happen often i don't want to open the page in a new tab. Is there any way other then using the ugly way of emitting keystrokes to enter the Open URL command and entering the URL (I'm doing this right now, but it's buggy if the user interacts with the system in the meantime).
I tag this as firefox but comments on other browsers are welcome.
Script given below changes location without opening new tab. I think it would be helpful.
TYPE IN ADDRESS BAR:
javascript:window.location.href = "http://www.yahoo.com";