I have and internal admin site that is used only by our people. For the most part they use Firefox ( that's the standard for the site anyway). We use Coldfusion 9 for development and have quite a few <cftextarea> tags. I seem to have lost touch with whatever controls the clipboard events. But, they have been disabled. I'm just guessing, but it seems like FF 42 seems to be the culprit when using the CF9 fckeditor. I could convert to another editor but that's a pretty big task.
I've been researching but can't find any clear instructions on setting security policies in FF. I need suggestions. I'm just about to try changing the tag from <cftextarea> to textarea but I know I'm going to run into problems getting getting richtext functions.
If you want to enable paste functionality icons you can alter following function:
var FCKToolbarButton = function(A, B, C, D, E, F, G) {
console.log(A, B, C, D, E, F, G);
this.CommandName = A;
this.Label = B;
this.Tooltip = C;
this.Style = D;
this.SourceView = true; //E ? true : false;
this.ContextSensitive = false; //F ? true : false;
if (G == null) this.IconPath = FCKConfig.SkinPath + 'toolbar/' + A.toLowerCase() + '.gif';
else if (typeof(G) == 'number') this.IconPath = [FCKConfig.SkinPath + 'fck_strip.gif', 16, G];
else this.IconPath = G;
};
and change
this.ContextSensitive = F ? true : false;
to
this.ContextSensitive = false;
You can find this function in FCKeditor/editor/js/fckeditorcode_gecko.js and FCKeditor/editor/js/fckeditorcode_ie.js
It's not best solution but it works.
The problem is caused by a changed security behavior in Firefox 41 and later.
You have to modify the following lines in fckeditorcode_gecko.js. Add "|| FCKBrowserInfo.IsGecko" in the following lines (marked bold). After that the paste buttons are always active and pasting something will always open up a paste window (it's the same behavior ckeditor uses).
GetNamedCommandState:function(A){try{if ((FCKBrowserInfo.IsSafari **|| FCKBrowserInfo.IsGecko**)&&FCK.EditorWindow&&A.IEquals('Paste')) return 0;
...
FCK.RedirectNamedCommands={Print:true,Paste:true};FCK.ExecuteRedirectedNamedCommand=function(A,B){switch (A){case 'Print':FCK.EditorWindow.print();break;case 'Paste':try{if (FCKBrowserInfo.IsSafari **|| FCKBrowserInfo.IsGecko**) throw '';
The changes are active instantaniously but Firefox sometimes does not reload changed Javascript files. In that case you should delete your browser history completely and then reload the editor.
The only option available is to convert to CKeditor and stop using tags. However, CKeditor has problems running under CFlayout tags. What a complete cludge of crap! The real solution is to get completely away from Coldfusion/Adobe. I don't have a suggestion, but I will be researching.
Related
Kendo UI 2015.2.805 Kendo UI Editor for Jacascript
I want to extend the kendo ui editor by adding a custom tool that will convert a user selected block that spans two or more paragraphs into block of single spaced text. This can be done by locating all interior p tags and converting them into br tags, taking care not to change the first or last tag.
My problem is working with the range object.
Getting the range is easy:
var range = editor.getRange();
The range object has a start and end container, and a start and end offset (within that container). I can access the text (without markup)
console.log(range.toString());
Oddly, other examples I have seen, including working examples, show that
console.log(range);
will dump the text, however that does not work in my project, I just get the word 'Range', which is the type of the object. This concerns me.
However, all I really need however is a start and end offset in the editor's markup (editor.value()) then I can locate and change the p's to br's.
I've read the telerik documentation and the referenced quirksmode site's explanation of html ranges, and while informative nothing shows how to locate the range withing the text (which seems pretty basic to me).
I suspect I'm overlooking something simple.
Given a range object how can I locate the start and end offset within the editor's content?
EDIT: After additional research it appears much more complex than I anticipated. It seems I must deal with the range and/or selection objects rather than directly with the editor content. Smarter minds than I came up with the range object for reasons I cannot fathom.
Here is what I have so far:
var range = letterEditor.editor.getRange();
var divSelection;
divSelection = range.cloneRange();
//cloning may be needless extra work...
//here manipulate the divSelection to how I want it.
//divSeletion is a range, not sure how to manipulate it
var sel = letterEditor.editor.getSelection()
sel.removeAllRanges();
sel.addRange(divSelection);
EDIT 2:
Based on Tim Down's Solution I came up with this simple test:
var html;
var sel = letterEditor.editor.getSelection();
if (sel.rangeCount) {
var container = document.createElement("div");
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
container.appendChild(sel.getRangeAt(i).cloneContents());
}
html = container.innerHTML;
}
html = html.replace("</p><p>", "<br/>")
var range = letterEditor.editor.getRange();
range.deleteContents();
var div = document.createElement("div");
div.innerHTML = html;
var frag = document.createDocumentFragment(), child;
while ((child = div.firstChild)) {
frag.appendChild(child);
}
range.insertNode(frag);
The first part, getting the html selection works fine, the second part also works however the editor inserts tags around all lines so the result is incorrect; extra lines including fragments of the selection.
The editor supports a view html popup which shows the editor content as html and it allows for editing the html. If I change the targeted p tags to br's I get the desired result. (The editor does support br as a default line feed vs p, but I want p's most of the time). That I can edit the html with the html viewer tool lets me know this is possible, I just need identify the selection start and end in the editor content, then a simple textual replacement via regex on the editor value would do the trick.
Edit 3:
Poking around kendo.all.max.js I discovered that pressing shift+enter creates a br instead of a p tag for the line feed. I was going to extend it to do just that as a workaround for the single-space tool. I would still like a solution to this if anyone knows, but for now I will instruct users to shift-enter for single spaced blocks of text.
This will accomplish it. Uses Tim Down's code to get html. RegEx could probably be made more efficient. 'Trick' is using split = false in insertHtml.
var sel = letterEditor.editor.getSelection();
if (sel.rangeCount) {
var container = document.createElement("div");
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
container.appendChild(sel.getRangeAt(i).cloneContents());
}
var block = container.innerHTML;
var rgx = new RegExp(/<br class="k-br">/gi);
block = block.replace(rgx, "");
rgx = new RegExp(/<\/p><p>/gi);
block = block.replace(rgx, "<br/>");
rgx = new RegExp(/<\/p>|<p>/gi);
block = block.replace(rgx, "");
letterEditor.editor.exec("insertHtml", { html: block, split: false });
}
I'm using CKEditor and I want to indent just the first line of the paragraph. What I've done before is click "Source" and edit the <p> style to include text-indent:12.7mm;, but when I click "Source" again to go back to the normal editor, my changes are gone and I have no idea why.
My preference would be to create a custom toolbar button, but I'm not sure how to do so or where to edit so that clicking a custom button would edit the <p> with the style attribute I want it to have.
Depending on which version of CKE you use, your changes most likely disappear because ether the style attribute or the text-indent style is not allowed in the content. This is due to the Allowed Content Filter feature of CKEditor, read more here: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
Like Ervald said in the comments, you can also use CSS to do this without adding the code manually - however, your targeting options are limited. Either you have to target all paragraphs or add an id or class property to your paragraph(s) and target that. Or if you use a selector like :first-child you are restricted to always having the first element indented only (which might be what you want, I don't know :D).
To use CSS like that, you have to add the relevant code to contents.css, which is the CSS file used in the Editor contents and also you have to include it wherever you output the Editor contents.
In my opinion the best solution would indeed be making a plugin that places an icon on the toolbar and that button, when clicked, would add or remove a class like "indentMePlease" to the currently active paragraph. Developing said plugin is quite simple and well documented, see the excellent example at http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1 - if you need more info or have questions about that, ask in the comments :)
If you do do that, you again need to add the "indentMePlease" style implementation in contents.css and the output page.
I've got a way to indent the first line without using style, because I'm using iReport to generate automatic reports. Jasper does not understand styles. So I assign by jQuery an onkeydown method to the main iframe of CKEditor 4.6 and I check the TAB and Shift key to do and undo the first line indentation.
// TAB
$(document).ready(function(){
startTab();
});
function startTab() {
setTimeout(function(){
var $iframe_document;
var $iframe;
$iframe_document = $('.cke_wysiwyg_frame').contents();
$iframe = $iframe_document.find('body');
$iframe.keydown(function(e){
event_onkeydown(e);
});
},300);
}
function event_onkeydown(event){
if(event.keyCode===9) { // key tab
event.preventDefault();
setTimeout(function(){
var editor = CKEDITOR.instances['editor1'], //get your CKEDITOR instance here
range = editor.getSelection().getRanges()[0],
startNode = range.startContainer,
element = startNode.$,
parent;
if(element.parentNode.tagName != 'BODY') // If you take an inner element of the paragraph, get the parentNode (P)
parent = element.parentNode;
else // If it takes BODY as parentNode, it updates the inner element
parent = element;
if(event.shiftKey) { // reverse tab
var res = parent.innerHTML.toString().split(' ');
var aux = [];
var count_space = 0;
for(var i=0;i<res.length;i++) {
// console.log(res[i]);
if(res[i] == "")
count_space++;
if(count_space > 8 || res[i] != "") {
if(!count_space > 8)
count_space = 9;
aux.push(res[i]);
}
}
parent.innerHTML = aux.join(' ');
}
else { // tab
var spaces = " ";
parent.innerHTML = spaces + parent.innerHTML;
}
},200);
}
}
I already managed to create wxListCtrls with either icons or multicolumn text like this
Picture of two wxListCtrls
Now I'd like to add an icon to each line of the text list on the left. I thought this should be possible as typical wxWidgets applications like code::blocks and wxSmith often diplay icons in list/tree views (resource browser window) and even in tabs of notebooks (compiler log window).
So how can I create something like this? (Everybody knows Windows Explorer)
Picture of Explorer Window with icons
I tried this...
SetImageList (ToolImages, wxIMAGE_LIST_NORMAL);
InsertColumn (0, "Icon");
SetColumnWidth (0, 40);
...
for (int i=0; i<5; i++)
{
InsertItem (i, i);
SetItemColumnImage (i, 0, i);
SetItem (i, 1, IntToStr (i+1));
...
But as you can see, only the text gets displayd, the image column is blank. Is it possible at all to mix text and images in report mode? If not, what other wxControl class can I use to get the desired result?
Many Thanks in advance.
Yes, it is possible, and the listctrl sample shows how to do it, in particular see MyFrame::InitWithReportItems() function. The only difference with your code seems to be that you use a different InsertItem() overload, so perhaps you should use InsertItem(i, "") instead.
Also check that your image list does have the 5 icons in it.
More generally, trying to reduce the differences between your code and the (working) sample will almost always quickly find the problem.
Thanks, VZ, but I found out that it's not the InsertItem() but the SetImageList(). My image list was correct, but the "which" parameter wasn't. Replacing wxIMAGE_LIST_NORMAL by wxIMAGE_LIST_SMALL fixes the problem! I thought "SMALL" was only meant for the SMALL_ICON mode and that "NORMAL" should be the default. But yes, that makes sense, normal icons are big and don't fit in the text display. Would be nice if the documentation had told us that before long trial and error...
This is a simple example for SMALL ICONIC VIEW USING WXLISTCTRL .Please place this code inside the class declaration.I did it in Frame based Windows Application using CODE BLOCKS.It will be useful to you.
wxImageList *il=new wxImageList(32,32,false,0);
wxImageList *i2=new wxImageList(32,32,false,0);
wxDir dir(wxGetCwd());
wxDir dir1(wxGetCwd());
if ( !dir.IsOpened() )
{
// deal with the error here - wxDir would already log an error message
// explaining the exact reason of the failure
return;
}
if ( !dir1.IsOpened() )
{
// deal with the error here - wxDir would already log an error message
// explaining the exact reason of the failure
return;
}
puts("Enumerating object files in current directory:");
wxString path, filename, dirstring,filename1, dirstring1, img,imgPath,path1,img1,imgPath1;
int i=0;
path=wxT("C:\\testing\\splitterwindow\\set\\devices");
path1=wxT("C:\\testing\\splitterwindow\\set\\actions");
img=wxT("C:\\testing\\splitterwindow\\set\\devices\\");
img1=wxT("C:\\testing\\splitterwindow\\set\\actions\\");
bool cont=dir.Open(path);
bool cont1=dir1.Open(path1);
cont = dir.GetFirst(&filename, wxEmptyString, wxDIR_DEFAULT);
dirstring.Append(filename.c_str());
cont1 = dir1.GetFirst(&filename1, wxEmptyString, wxDIR_DEFAULT);
dirstring1.Append(filename1.c_str());
while ( cont )
{
imgPath.clear();
cont = dir.GetNext(&filename);
dirstring.Append(filename.c_str());
// Consturct the imagepath
imgPath.Append(img.c_str());
imgPath.Append(filename.c_str());
//Now, add the images to the imagelist
il->Add(wxBitmap(wxImage(imgPath.c_str())));
i++;
}
while ( cont1 )
{
imgPath1.clear();
cont1 = dir1.GetNext(&filename1);
dirstring1.Append(filename1.c_str());
// Consturct the imagepath
imgPath1.Append(img1.c_str());
imgPath1.Append(filename1.c_str());
//Now, add the images to the imagelist
i2->Add(wxBitmap(wxImage(imgPath1.c_str())));
i++;
}
//assigning the imagelist to listctrl
ListCtrl1->AssignImageList(il, wxIMAGE_LIST_SMALL);
ListCtrl3->AssignImageList(i2, wxIMAGE_LIST_SMALL);
for(int j=0;j < il->GetImageCount()-1;j++)
{
wxListItem itemCol;
itemCol.SetId(j);
itemCol.SetImage(j);
itemCol.SetAlign(wxLIST_FORMAT_LEFT);
ListCtrl1->InsertItem(itemCol);
}
for(int k=0;k < i2->GetImageCount()-1;k++)
{
wxListItem itemCol1;
itemCol1.SetId(k);
itemCol1.SetImage(k);
itemCol1.SetAlign(wxLIST_FORMAT_LEFT);
ListCtrl3->InsertItem(itemCol1);
}
`
i'm developing a firefox extension and i want to be able to close a specific tab. For example if there are many open tabs in the browser o want to close only the tab with a specific url.
I know that i can use gBrowser.removeTab(tab) but i don't know how to get tab object.
On the other hand i can get the browser that corresponds to the url but the param of the removeTab() function must be a "tab object". How cat i get the tab object.
Any ideas?
tabbrowser.getBrowserForTab() method is actually the easiest way of associating browsers with tabs. So you would do something like this:
var tabs = gBrowser.tabs;
for (var i = tabs.length - 1; i >= 0; i--)
{
var tab = tabs[i];
var browser = gBrowser.getBrowserForTab(tab);
if (browser.currentURI && browser.currentURI.spec == "...")
gBrowser.removeTab(tab);
}
I think you can use this method: gBrowser.removeCurrentTab(); this example closes the currently selected tab.
For more code, please refers this link: https://developer.mozilla.org/en/Code_snippets/Tabbed_browser
I have both stylish and grease monkey installed in Firefox 5. I want to know if either of them or another add on has the capability of finding text and replacing it with something else, or better yet locating a div by its id and replacing the span within with another string of text.
From OP comment:
I have a website with a div (id=siteLinkList), with a ul and multiple lis inside the div.
Each li has an a with text that needs to be replaced. I want the script to search for the div and then find and replace text inside that div.
Here is what I have so far:
var els = document.getElementsByTagName("*");
for(var i = 0, l = els.length; i < l; i++)
{
var el = els[i];
el.innerHTML = el.innerHTML.replace(/EGN1935: 5091, Summer B 2011/gi, 'Success');
el.innerHTML = el.innerHTML.replace(/EGN1935: 5088, Summer B 2011/gi, 'Chemistry');
}
The script works but I fear that it delays the loading time.
Yes, Greasemonkey can do this. (Even Stylish can do this in a limited way with CSS content.)
There must be zillions of scripts that do this at userscripts.org.
See also, related SO questions like:
Greasemonkey script in Firefox 4, want to change one line of code on webpage
Use Greasemonkey to remove table
Find and replace in a webpage using javascript.
You need to post details of what the page is/should-be, before and after.
More specific answer based on update(s) from OP:
Speed up your code by focusing on the kinds of elements you want, AMAP, instead of a fetching every element.
Code like so, should work. :
var TargLinks = document.querySelectorAll ('div#siteLinkList ul li a');
for (var J = TargLinks.length - 1; J >= 0; --J)
{
/*--- Does "EGN1935: 5088, Summer B 2011" only appear in the text of
the link or in the href?
The first block will be more efficient if it works, otherwise use
the 2nd block.
*/
var el = TargLinks[J];
el.textContent = el.textContent.replace (/EGN1935: 5091, Summer B 2011/gi, 'Success');
el.textContent = el.textContent.replace (/EGN1935: 5088, Summer B 2011/gi, 'Chemistry');
/* Only use this block if the first block did not work.
el.innerHTML = el.innerHTML.replace(/EGN1935: 5091, Summer B 2011/gi, 'Success');
el.innerHTML = el.innerHTML.replace(/EGN1935: 5088, Summer B 2011/gi, 'Chemistry');
*/
}
You can do this with Firebug - http://getfirebug.com/. Once you install it, activate it by clicking the bug looking icon on the page you want to edit. A view of the HTML document tree will appear, and you can click arrows to drill further down. Alternatively, you can use the pointer icon inside Firebug to select any HTML element on the page (such as a div with a specific ID).
Once you have the element selected, you can select the text that it contains and edit it as you like.
You can edit a ton of other things with this plugin, but it's important to know that once you reload the page your edits will go away.