How can I disable the Preview button while in Source Mode with CKEditor 4? - ckeditor

We are using the latest version 4.7.3 of CKEditor (Full) available from nuget. We've tried a number of suggested solutions to disable the Preview toolbar button while in Source Mode, but could not get it to work. There are cases when there are more than one editor on a page, and they are added as user controls (.ascx) due to some unrelated logic. For example we've tried the below:
CKEDITOR.on('instanceReady', function (instance) {
instance.editor.addCommand('preview', {
modes: { wysiwyg: 1, source: 0 }
});
});
We configure the toolbar buttons via config.js.
CKEDITOR.editorConfig = function (config) {
config.toolbar_CMToolbar =
[
{ name: 'sourcedialog', items: ['Source', '-', 'Preview'] }
];
};
The reason we need this is to avoid a security issue when malicious script has been added while in Source Mode and the Preview was immediately requested, causing javascript to execute. Ordinarily the wysiwyg mode would clean this up and the malicious scripts would have been validated.
Below is the sample script that triggers the issue, for reference. (include everything from double-quote to tag close)
"><img src=x onerror=alert(7)>
Granted this is just evading the main issue rather than fixing it, but this workaround would be handled quicker.
Hoping to hear suggestions on how to correct this. Thanks!

You can change properties of commands like this:
CKEDITOR.on('instanceReady', function(evt) {
evt.editor.commands.preview.modes.source = 0;
});

Related

NativeScript push notifications permission dialog shows behind app

Do you know what could be causing the permissions request dialog on iOS to show behind the app? It actually flashes quickly and then goes behind. I have to press the home button to bring it to the front. Until then the UI is blocked.
I am using Everlive and I am calling the register method in the app's launchEvent as such:
var pushSettings = {
//iOS - specific settings
iOS: {
badge: true,
sound: true,
alert: true,
clearBadge: true
},
notificationCallbackIOS: function (userInfo) {
...
},
//Android - specific settings
android: {
projectNumber: '944301213976'
},
notificationCallbackAndroid: function callback(data) {
...
}
}
el.push.register(pushSettings, function (data) {
...
}, function (error) {
});
Thank you.
EDIT: I should add that I am testing on iOS 9.3.4 and right before the dialog goes behind the app, I get the following warning in the console: enabledRemoteNotificationTypes is not supported in iOS 8.0 and later. Not sure if it matters, but I wanted to mention it, just in case.
So, it turns out that it was a timing issue. I was running the code when the app was initializing. The popup will get displayed, but shortly after, the first screen (login in my case) gets initialized, stealing the focus from the popup.
Once I moved the code in a button tap event (after the screen loading was completed) everything worked as expected.
I am not sure if this is the best way to handle this. I am open for suggestions.
Also, you can see https://github.com/NativeScript/push-plugin/issues/38 for more info. Thank you Anton Dobrev for pointing me to the right direction.

console.log() messages don't show up from Firefox Addon

I'm creating my first Firefox extension using the Addon SDK, but I can't get messages I pass with console.log() to appear in my debugger.
I created a new profile in Firefox 33 and installed the latest version of Firebug. When I launch my addon using cfx run -p <My_Profile_Directory> I can see both Firebug and my addon, and the addon does what it's supposed to do. However, I don't see anywhere messages I wrote to log using the console.log() command
Here's my main.js so far:
function loginToSite(user, password) {
var Request = require("sdk/request").Request;
var doLogin = Request(
{
url: "https://website.com/login/index.php",
contentType: "application/x-www-form-urlencoded",
content: "username=xxxx&password=xxxx&remember=1",
onComplete: function(response) {
console.log(response.text);
}
}
);
doLogin.post();
}
function checkLoginStatus(tab) {
//TODO Actually check if the tab is logged in, currently assume it's not
loginToSite(0,0);
}
// Listens for tabs and checks each loaded tab if it's the website
tabs.on("ready", function(tab) {
var tabUrl = tab.url.toLowerCase();
if(tabUrl.contains("website.com")) {
console.log("Not connected to website.com, running login procedure");
checkLoginStatus(tab);
}
});
Like I said, I'm actually being logged in automatically, but no log messages appear in either Firebug's or the Firefox Developer Tools' console.
What am I doing wrong here? Where are the log messages?
You have to change the default logging level (error) to something more verbose, like info.
The global level is controlled by the preference extensions.sdk.console.logLevel. But you can adjust the logging level of your extension only, with the preference extensions.myExtensionID.sdk.console.logLevel
When you run cfx without passing a profile directory, it takes care of setting up the temporary profile to be developer friendly.

Debugging Content Scripts for Chrome Extension

General Questions
Hello! I'm delving into the world of Chrome Extensions and am having some problems getting the overall workflow down. It seems that Google has recently switched to heavily advocating Event Pages instead of keeping everything in background.js and background.html. I take part of this to mean that we should pass off most of your extension logic to a content script.
In Google's Event Page primer, they have the content script listed in the manifest.json file. But in their event page example extension, it is brought in via this code block in background.js: chrome.tabs.executeScript(tab.id, {file: "content.js"}, function() { });
What are the advantages of doing it one way over the other?
My Code
I'm going forward with the programatic way of injecting the content script, like Google's example.
manifest.json
{
"manifest_version": 2,
"name": "Test",
"description": "Let's get this sucker working",
"version": "0.0.0.1",
"permissions": [
"tabs",
"*://*/*"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_icon": "icon.png"
}
}
background.js
chrome.browserAction.onClicked.addListener(function() {
console.log("alert from background.js");
chrome.tabs.executeScript({file: "jquery-2.0.2.min.js"}, function() {
console.log("jquery Loaded");
});
chrome.tabs.executeScript({file: "content.js"}, function() {
console.log("content loaded");
});
});
content.js
console.log('you\'r in the world of content.js');
var ans = {};
ans.createSidebar = function() {
return {
init: function(){
alert("why hello there");
}
}
}();
ans.createSidebar.init();
I am able to get the first 3 console.log statements to show up in the background page's debugger. I'm also able to get the alert from content.js to show up in any website. But I'm not able to see the console.log from content.js, nor am I able to view any of the JS from content.js. I've tried looking in the "content scripts" section of the background page debugger's Sources tab. A few other posts on SO have suggested adding debugger; statements to get it to show, but I'm not having any luck with anything. The closest solution I've seen is this post, but is done by listing the content script in the manifest.
Any help would be appreciated. Thanks!
Content scripts' console.log messages are shown in the web page's console instead of the background page's inspector.
Adding debugger; works if the Developer Tool (for the web page where your content script is injected) is opened.
Therefore, in this case, you should first activate the Developer Tool (of the web page) before clicking the browser action icon and everything should work just fine.
I tried to use the debuggermethod, but it doesn't not work well because the project is using require.js to bundle javascript files.
If you are also using require.js for chrome extension development, you can try adding something like this to the code base, AND change eval(xhr.responseText) to eval(xhr.responseText + "\n//# sourceURL=" + url);. (like this question)
Then you can see the source file in your dev tool (but not the background html window)
manifest v3
You can add console.log statements to your content scripts.
This is one of the best ways to debug an application.
Let's say you want to access a DOM node from the content script.
const node = document.querySelector("selector")
node will be Element instance if it exists else it will be null
If you can see the node in the Elements tab but not able to access it via content script then the node might have not been loaded at the time you accessed it.
Follow this answer to fix this issue.

History issue combining WP7.5, phonegap and jqm

I have a phonegap app that uses jqm that works fine in android and ios.
Porting to WP7 i have an issue with the history, specifically history.back() (but also .go(-1) etc). This refers to going back in history where the previous 'page' was in the same physical html file, just a different data-role=page div.
using a jwm site in a regular browser is fine (with separate 'pages' in the same html file). Also, using history.back() when we go from one html file to another in the app is fine. It's the specific combination of WP7.5, jqm and PG.
Has anyone come across a solution for this? it's driving me crazy, and has been as issue since PG 1.4.1 and jwm 1.0.
EDIT 1: It's possible that the phonegap process of initialising the webview on WP7.5 somehow overrides the jqm history overrides, after they've loaded.
EDIT 2: definitely something to do with jqm not being able to modify the history. each time there is a 'page' change, history.length is still 0.
EDIT 3: When i inspect the 'history' object, i found there is no function for replaceState or pushState - i know jqm uses this for history nav, maybe that's the problem.
ok - this isn't perfect, but here's a solution (read: hack) that works for me. It only works for page hash changes, not actual url changes (but you could add a regex check for that). Put this somewhere in the code that runs on ondeviceready:
if (device.platform == 'WinCE') {
window.history.back = function () {
var p = $.mobile.urlHistory.getPrev();
if (p) {
$.mobile.changePage("#" + p.pageUrl, { reverse: true });
$.mobile.urlHistory.stack.splice(-2, 2);
$.mobile.urlHistory.activeIndex -= 2;
}
}
}

lotusSpellChecker and ckeditor Xpages?

I'd like to activate the spellcheck plugin in CKEditor but it seems that IBM has disabled the native plugin.
Looking at the config.js in the data\domino\html\ckeditor directory on the Domino server I see this code describing a plugin called lotusSpellChecker but enabling this plugin doesn't seem to do anything.
config.lotusSpellChecker = {
restUrl:'',
lang:'en',
suggestions:'5',
format:'json',
highlight: { element : 'span', styles : { 'background-color' : 'yellow', 'color' : 'black' } },
preventCache: true
};
Does anybody know how to activate this plugin and why the native one has been disabled?
I've only successfully activated the built-in spell checker by downloading the latest CKEditor release, copying it to the server and using that on an Xpage. See my post on the XPage forum for details:
http://www-10.lotus.com/ldd/xpagesforum.nsf/topicThread.xsp?action=openDocument&documentId=A198C7153DBD84348525798B0056DC6B
I've tried activating it in the default CKEditor installation but couldn't get it to work.
I can't make an official statement as to why it is disabled, but it is most likely for licensing reasons.
CKEditor uses Web Spell Checker. Details are here.
http://www.webspellchecker.net/
The plugin can be activated by making some changes to the config.js file located in the ckeditor folder. Uncomment the folowing block:
//Example Lotus Spell Checker config.
/*
config.extraPlugins += ',lotusspellchecker';
config.lotusSpellChecker = {
restUrl:'',
lang:'en',
suggestions:'5',
format:'json',
highlight: { element : 'span', styles : { 'background-color' : 'yellow', 'color' : 'black' } },
preventCache: true
};
*/
Note: you need to provide the restUrl of whatever spell checking service you are going to use. Instructions here only solve the "how to activate plugin" question.
You also need to provide some Dojo properties in your rich text control:
This one adds the spell check button (LotusSpellChecker) to the toolbar.
Property name: toolbar
Property value: var myToolbar = "[['Format', 'Font','FontSize'], \n"
+"['Bold','Italic','Underline','Strike','-','TextColor','BGColor','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','NumberedList','BulletedList'], \n"
+"['Indent','Outdent'], \n"
+"['Subscript','Superscript'], \n"
+"['RemoveFormat', '-','MenuPaste','-','Undo','Redo','Find','LotusSpellChecker','-','Image','Table','Link','Flash','-','PageBreak','HorizontalRule','SpecialChar','Blockquote','Smiley','ShowBlocks'], \n"
+"['BidiLtr','BidiRtl'], \n"
+"['Maximize']]";
return myToolbar;
This one activates the plugin.
Property name: extraPlugins
Property value: lotusspellchecker
This is what you get:
Domino 9.0.1 FP2 adds spell checker functionality through the default CKEditor toolbar and through the 'IbmSpellChecker" toolbar button.
I have an update on this. SPR PHAN8R2GRE is created to look at including this functionality in a later release. In case you need to add a customer report to it.
All modern browsers come with spell checking capabilities which should activate for you on the field.

Resources