I'm using the react-ckeditor in project this is load ok.
but I need to use ckeditor full version as editor in the page
how could I use react-ckeditor full version not the standard version?
From the documentation:
By default, the CKEditor 4 React component loads the standard preset of the latest CKEditor 4 release from the CDN when creating the first editor. This behavior can be altered by changing the value of the CKEditor.editorUrl variable to point to the desired CKEditor script location:
CKEditor.editorUrl = 'https://your-website.example/ckeditor/ckeditor.js';
A zip file can be downloaded from https://ckeditor.com/ckeditor-4/download/ and upzipped inside your source code (e.g. inside public/ckeditor-4 folder if using create-react app).
I was also facing the same issue as I wanted to include all the available options in my toolbar. Turns out all you need to do is mention the type of distribution in your CDN link as full-all, to include full preset together with all other plugins created by CKSource.
I changed it from standard to full-all in my CDN link as given below-
<script src="https://cdn.ckeditor.com/4.16.0/full-all/ckeditor.js"></script>
Also, check the version. This is my source of info: https://cdn.ckeditor.com/
Hope this helps :)
Related
Example:
<h1 translate="no" className="clientName">Jay</h1>
Hi Guys, the code above is in my react project and its apparent that the attribute translate is not working in React
Does anyone know an alternative solution, even through Javascript, as I do not want google to translate the names of people on my site?
Thanks!
As per the doc, Not all browsers support this attribute. Verify the doc whether the browser in which you work supports that attribute.
Please check browser support of translate="no" here, not supported by most of then
You can also test the same thing in the browser you want to test : https://j74bu.csb.app/
For specific google translate as alternate solution, you can use className="notranslate"
<h1 className="notranslate">agradável</h1>
WORKING DEMO : (Link to test)
While translate attribute is not supported in a few browsers, I think that issue in your case is that React isn't passing the translate attribute to the DOM element.
This could happen if you are using a version of react older than 16.0.0. Prior to 16.0.0, react would omit custom attributes from being passed to the DOM. In doing so it also did not honour some valid HTML attributes as the valid attribute list is quite huge.
From v16.0.0, react doesn't omit these attributes from being passed to the DOM and hence you would be able to properly use it.
Please check the migration guide for more details
All you need to do is to upgrade your version of react to the latest version using
yarn upgrade --latest react react-dom
or you can simply try to upgrade to v16.0.0 with
yarn upgrade react#16.0.0 react-dom#16.0.0
<html translate="no">
you can basically do this at the top of your html file
I have done the following:
Installed both the AngularJS and NodeJS Plugins in Phpstorm
Downloaded the latest stable release of Angular (1.4.8)
Added angular.js to the project
Added angular.js to the list of libraries in Phpstorm
Directives in my HTML will autocomplete fine (e.g. ng-modal), but trying to do something like Module.fact does not autocomplete to factory. Here is my code:
var appModule = angular.module("appModule", ['ngRoute']);
appModule.fac //This is me typing factory, but auto complete doesn't help
I am running PhpStorm 10.0.2. I have tried using different versions of PhpStorm and I have also tried using Angular 1.5 (the beta version) with the same result. Also, I am new to angular, but my code is working. Thank you!
*I have already reviewed these links and SO posts:
https://www.jetbrains.com/webstorm/help/using-angularjs.html
https://www.jetbrains.com/webstorm/help/configuring-javascript-libraries.html
Why do AngularJS directives (attributes, etc.) show up as "invalid" in WebStorm 8?
Getting angularJS autcomplete in Webstorm/PHPStorm
The angular variable is a global one and when you have to many declarations of the same global variable PhpStorm/WebStorm can not handle auto-completion.
It's important to verify that only 1 declaration for angular is being discovered by PhpStorm. This doesn't have anything to do with your actually JavaScript project, but where PhpStorm looks for declarations.
If you hold down ctrl and mouse over the world angular. It should show it highlighted to be clickable, and a tooltip showing where it is declared.
If the tooltip says there are multiple definitions of the identifier, then it can not do autocomplete correctly. This is true for most JS variables in Php/WebStorm not just this angular variable.
You have a couple of ways to fix this:
1) Force type declaration with JsDoc to TypeScript
/**
* #var {angular.IAngularStatic} myAngular
*/
var myAngular = angular;
This will declare the variable myAngular using the TypeScript definition. There is less likely to be conflict with any already scanned JS source files that also declare angular. It's an easy fix, but adds unnecessary source code to your project.
2) Disable JavaScript source files by excluding them
If you are using node_modules or bower_components then you need to include some of the JS files from those folders, but not unnecessary duplicates. You won't need any Angular JS files since you've already installed the TypeScript definitions (which work better for auto-completion). In the Project Files panel in PhpStorm find the Angular packages, right click on those folders and "Exclude" those folders. You can also do this via project settings in "Files / Settings / Directories"
3) Ignore bundled output files for JavaScript
This is the most common issue I find with PhpStorm/WebStorm. PhpStorm will also scan minified JavaScript files you've packaged into your webroot/js folder. For example; If you use grunt to uglify your JavaScript code into app.min.js and inside that file is Angular and your project code. PhpStorm will scan this and create duplicate declarations of everything it finds.
Find all those duplicate *.js files in your project, right mouse click on the files and select "Mark as Plain Text" from the menu. This will tell the editor to completely ignore the file from all intellisense scanning.
So to summarize. If you control click on a declaration to go to source, and PhpStorm does not go immediately, but instead prompts you select from multiple declarations, then you have duplicates in your project and you need to narrow the scope. Once that is done everything else should work as expected.
f you prefer to use a CDN, place the cursor over the highlight library name, hit Alt+Enter, and Download Library. This will set up a local library in WebStorm’s cache (not in your project) so WebStorm can access AngularJS methods, directives, etc for autocompletion and documentation lookup.
I have been given a Silverstripe site to maintain. How do I know which version of Silverstripe it's using, by looking in the source code?
If your SS installation was made through composer you can have a look to composer.json in the root directory.
If it's a 3.x.x version you can also leave the mouse on the SS logo in backend (upper left corner) and the anchor title wil show you the version. Maybe it works also for 2.x.x versions, but I'm not sure.
The Depreciation class provides the version.
$version = Deprecation::dump_settings()['version'];
There is a function in the LeftAndMain class called CMSVersion. This is the function which is used to fill in the version information in the title attribute on the ss logo in the cms as mentioned in the accepted answer. This function attempts to get the version information from the composer.lock file. It will fallback to the /framework/silverstripe_version and /cms/silverstripe_version files if the composer.lock file doesn't exist. So to find the version in the source code, look in composer.lock, then /framework/silverstripe_version and /cms/silverstripe_version
In the folder "framework" is a file "silverstripe_version" with the Silverstripe version.
Inside the Folder Framework there is a README.md file. Inside that you'll finde the Version Number.
Also inside framework Folder there is _config.php, there you have a variable like Deprecation::notification_version('3.1.0'); In this example, Version 3.1.0
I'm reading https://github.com/ExactTarget/fuelux in order to get familiar with the Fuelux wizard, and how I can integrate it with my AngularJS project.
In the non-AMD section it says :
Non-AMD
If you'd prefer not to use AMD, simply add the loader script to the head tag of your page:
<script src="http://www.fuelcdn.com/fuelux/2.6.1/loader.min.js" type="text/javascript"> </script>
but something in jquery is conflicting with my angular routes.
I'm also using this as a guide, and adding the necessary css links and requirejs links; however the wizard does not render properly (as if it were missing the css styling).
wizard
UPDATE:
In my latest attempt, after downloading from https://github.com/ExactTarget/fuelux/tree/3.0.0-wip , I'm still getting the non-formatted wizard. Please see screen shot :
FuelUX 2.x is AMD only. The loader.js is a polyfill of sorts (almond.js- a minimal AMD API implementation) that allows AMD, just so you don't have to load require.js yourself, but it's still there.
The latest version FuelUX 3 is a WIP branch and is UMD (Universal Module Definition) which means it can be used with/without AMD via tags with only Bootstrap and JQuery as dependencies. You might try it.
I am new to EXT JS environment. I am working on a dynamic java project in eclipse indigo where i want to use ext-js calendar in one of my jsp.I saw the EXT_JS calendar demo from downloaded 'ext-4.1.1' sdk(index.html file in ext-4.1.1a\examples\calendar).
I want to create a .js file as like ext-js calendar page. So for that i followed the path given in
http://loianegroner.com/2010/11/spket-setting-up-eclipse-ide-for-ext-js-and-jquery-development/ to integrate ext-js in eclipse.
But now when i copy index.html to my webcontent folder then it is not working(Originally it is showing nothing). But when i copy the entire ext-js source code to my workspace web content then running the index.html file in example/calendar folder of ext-4.1.1a giving me required result.But I don't think this as a solution.
I could not find any way also how to start to do my task.
So Pls anybody help me here...
Regards :
Dev
When nothing shows up on the screen, it is commonly a case where the ExtJS library isn't loaded. Without seeing the code, it's hard to pinpoint the issue.
Using Chrome Dev tools or Firebug for Firefox, take a look at the console and/or network output.
The files you're looking for will be included in the <head> section of your index.html. There should be ext-all.js or possibly ext-all-debug.js at a minimum, plus the style sheets.
If this is your issue, then you need to include the proper paths to the ExtJS library. This can be the local installation, or you can use a CDN. For example:
<script src="http://cdn.sencha.com/ext-4.1.1-gpl/ext-all.js"></script>