The spellchecker and scayt icons are missing on the pe:ckeditor toolbar:
<p:growl id="growl" showDetail="true" />
<pe:ckEditor id="editor" value="#{editorController.content}" toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]">
<p:ajax event="save" listener="#{editorController.saveListener}" update="growl" />
</pe:ckEditor>
Both are also missing in the Primefaces Extensions Showcase for Ckeditor Custom Toolbar:
http://www.primefaces.org/showcase-ext/sections/ckEditor/customToolbar.jsf
Have searched extensively and even updated pe:ckeditor.
Using Primefaces 5.1, Primefaces Extensions 3.0, JSF 2.0.
I checked the website, and it's using a custom, developer build of CKEditor
console.log( CKEDITOR.version );
"4.4.4 DEV"
which contains neither SCAYT nor SpellChecker plugins
console.log( CKEDITOR.plugins.registered.scayt );
undefined
so it's no surprise your toolbar buttons don't appear. You can generate a custom build of CKEditor or install plugins manually. It's all up to you though it may be limited by the framework, which I'm not familiar with. But I believe it requires no special skills to modify it.
Related
I know variations of this question have been asked dozens of times, but I haven't yet found one that addresses this combination: I want to be able to see a non-overlapping statusbar on iOS 7, using Adobe's Phonegap Build.
I have added the PhoneGap Statusbar plugin to my config.xml:
<gap:plugin name="com.phonegap.plugin.statusbar" version="1.1.0" />
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true" />
</feature>
This causes a black statusbar to appear correctly non-overlapping my site, but the text is (presumably) black, because I can't see it.
I have removed the ios-statusbarstyle preference from config.xml for good measure, it doesn't seem to make any difference.
The plugin page mentions that the config.xml options are not supported by PhoeGap build, so I tried to use the StatusBar javascript object. This is my complete index.html file:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
StatusBar.show();
StatusBar.overlaysWebView(false);
StatusBar.backgroundColorByHexString("#C8DB2F");
}
</script>
</head>
<body onload="onLoad()">
Test.
</body>
</html>
but the backgroundColorByHexString() function does nothing and, in fact, there appears to be no StatusBar object at all -- this is confirmed by using PhoneGap Build's debug window, and because any JS that I try to put after those lines will not be executed, so presumably it is throwing an error.
Any thoughts on how to set either the statusbar background color or the text color? Do I have to use CLI instead of PhoneGapBuild?
May be too late for this... but I used your exact code and it worked for my app on phonegap build. I used this plugin instead.
<gap:plugin name="org.apache.cordova.statusbar" version="0.1.4" />
and this to call the onDeviceReady function:
// wait for phonegap to be ready
document.addEventListener('deviceready', onDeviceReady, false);
I noticed the JS works when testing with PhoneGap Developer App but not with iOS emulator (i.e. when running cordova emulate ios from command line). Testing further, it seems the deviceready event doesn't fire at all when in iOS emulator.
Googling for "phonegap deviceready not fired" gives me similar error reports, albeit they all got mystically resolved, usually by reinstalling or fixing a typo.
One tangentially useful answer pointed out the problem may lie in plugins; File plugin in particular. I didn't use the File plugin, but I checked the emulator's system.log, which gave me some errors relating to plugins:
Sep 12 10:26:58 username.local MyApp[8218] <Warning>: ERROR: Plugin 'StatusBar' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
[…]
Sep 12 10:26:58 username.local MyApp[8218] <Warning>: ERROR: Plugin 'Device' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
So I removed all the projects' plugins and then re-added them. I checked the versions before and after re-install and while the versions were identical:
org.apache.cordova.console 0.2.10 "Console"
org.apache.cordova.device 0.2.11 "Device"
org.apache.cordova.geolocation 0.3.9 "Geolocation"
org.apache.cordova.statusbar 0.1.7 "StatusBar"
Running the emulator again, the deviceready event got fired and status bar color changed!
So, to sum up: what plugins do you use and have you tried re-installing them?
I have a question about Kendo UI. I have an existing MVC4 project in which I wanted to use some of the Kendo extensions, namely the Editor. Currently the project uses jqWidgets as a UI framework.
I opened VS 2012, loaded the project and used the Telerik menu to add references to Kendo in the project. The wizard added all the necessary references and made changes to the web.config files. So far so good. However, I have two problems:
When I try to use the Kendo Html Helper I do not have intellisense and the Kendo is underlined saying that the HtmlHelper does not have a definition for 'Kendo'. I have <add namespace="Kendo.Mvc.UI" /> in both, my main web.config as well as in the web.config in the Views folder. Strangely enough, when I run the site, I do not get an error, but the editor does not load its initial content and if I try to interract with it, I get the following error: (my second question)
TypeError: invalid 'in' operand e - I am guessing that somewhere in the site, There is a conflict that couses this error, but I cannot find it. Here is how I load all the JS files in my _Layout.cshtml:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/Scripts/kendo/2013.2.918/kendo.all.min.js")
#Scripts.Render("~/Scripts/kendo/2013.2.918/kendo.aspnetmvc.min.js")
#Scripts.Render("~/Scripts/kendo.modernizr.custom.js")
I am not sure if the problems are related. My jQuery version is 1.9.1 and I am using the latest Kendo version (2013.2.918.340)
Any help would be greatly appreciated.
Here is how I use the editor in the View:
#(Html.Kendo().Editor()
.Name("editor")
.HtmlAttributes(new { style = "width: 700px; height: 400px" })
.Value(#<text>
<p>
Some text
</p>
</text>)
.ImageBrowser(imageBrowser => imageBrowser
.Image("~/Content/UserFiles/Images/{0}")
.Read("Read", "ImageBrowser")
.Create("Create", "ImageBrowser")
.Destroy("Destroy", "ImageBrowser")
.Upload("Upload", "ImageBrowser")
.Thumbnail("Thumbnail", "ImageBrowser"))
)
The solution to the first problem is to add namespace reference only to the web.config file in the Views folder. There is no need to add it to the root web.config. After that restart Visual Studio and reload your project. Everything should be fine and intellisense should work.
As for the second problem, this is hard to guess. Could you show your code where you are loading the contents into HTML editor?
I tried to open the AngularUI website (http://angular-ui.github.io/) in IE8. UI was not rendered properly in IE8(working fine in latest version of chrome/firefox). This led me to search browser compatability of AngularUI modules.
A discussion in the groups pointed me that AngularUI-bootstrap module does not support IE8( https://groups.google.com/forum/#!topic/angular-ui/8L0739rxdes)
But could find the info for other modules listed below.
UI-Utils
UI-Modules
NG-Grid
UI-Router
So the question is, Are these modules compatible with ie8. If yes, is there a desire to continue support in the future.
Many of the AngularUI directives do work correctly in IE8 provided you don't configure them using the custom element option. The problem is that IE8 ignores any elements that aren't standard HTML, which obviously blows that approach out of the water.
Use attribute approach instead. For example, instead of:
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.name}}"></tab>
</tabset>
Use:
<ul tabset>
<li tab ng-repeat="tab in tabs" heading="{{tab.name}}"></li>
</ul>
Alternatively you can tell IE8 to use elements which are not known per default by using a script like this:
<script>
document.createElement("tabset");
document.createElement("tab");
document.createElement("tab-heading");
</script>
This lets IE8 know that <tabset>, <tab> and <tab-heading> are valid elements.
In addition to #Paul's correct answer, which by the way should be marked as the answer, here is the Angular teams explanations and how to correct them to work in IE8 Angular IE8 development guide. Also, it should be noted that the Angular team is officially dropping support for IE8 in Angular 1.3 and later, blog. So, if you need to support IE8, don't use Angular 1.3+, nor use any angular UI that uses 1.3+.
advimage is missing from the jQuery package for TinyMCE 4. I tried to use the one from an older version but that didn't work. Where can I get the plugin that will work with TinyMCE 4?
You cannot. These plugins were for 3.x series of TinyMCE, in 4x series the below mentioned plugins have been removed.
advhr, advimage, advlink, iespell, inlinepopups, style, emotions and xhtmlxtras
See this for complete details: http://www.tinymce.com/wiki.php/Tutorial:Migration_guide_from_3.x
I am using the latest SyntaxHighlighter within my app and for some reason the toolbars do not show in IE, Firefox or Chrome. The code highlights without issue, but I want to have toolbars. What makes things worse is that the toolbar demo on the official website is not working either.
Am I missing something obvious? Below are the code nuggets.
<script src="Scripts/syntaxhighlighter/scripts/shBrushCSharp.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="Scripts/syntaxhighlighter/styles/shCoreDefault.css" />
<script type="text/javascript">
// Highlight code
SyntaxHighlighter.all();
</script>
<pre class="brush: csharp; ruler: true; title: 'Test'; toolbar: true;">
public static bool HelloWorld()
{
// Return
return false;
}
</pre>
I've been trying to figure this one out myself. I won't claim to be 100% correct here, but from what I can tell, this is the answer:
Toolbar was changed in update from version 2 to version 3.
Toolbar no longer includes the icons and whatnot.
The default toolbar is now the simple '?'.
This pretty much sucks, if it's true. The pop-up toolbar w/ icons is one of the things that made me choose SH over the other options.
This is what I'm guessing comparing the included CSS files in the latest package to the CSS available on sites that have a version with the "proper" toolbar enabled.
Here's a link to one I was snooping in: ramymostafa.com
While I would like the toolbar myself, it seems that one of the toolbars features - copy & paste - have been included without the need for a toolbar item:
If you double click anywhere on the code, the entire code view is replaces with a pre-selected view from which users can copy with a simple Ctrl/Cmd-C. Clicking anywhere else returns the view to the original state.
http://alexgorbatchev.com/SyntaxHighlighter/whatsnew.html#copytoclipboard
I would still like the pop out feature, but less buttons is a good thing, I guess?
the same problem here. looks like there is no toolbar in v3.
i use v2 again: http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_2.1.382
if you copy the css and js around, don't forget to include the images in folder styles
The toolbar can be easily be showing simply go to the plugin configuration, on the Highlighter Version set to VERSION 2X. This way the toolbar will be shown again!
I confirm that in Version 3 the toolbar does not show.