Downloaded the default setup using the CKeditor v5 online builder.
When using it all works. But when using the to load the local (and downloaded online builder version) all the buttons are gone, why?
Help is appreciated.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="/ckeditor5/build/ckeditor.js"></script>
<!-- <script src="https://cdn.ckeditor.com/ckeditor5/20.0.0/classic/ckeditor.js"></script> -->
<body>
<div id="editor">Test Text (buttons missing)</div>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
Check the source code of the sample attached to a CKEditor 5 build (samples/index.html). You will notice that there is a toolbar configuration provided that you need to pass when initializing the CKEditor instance.
For Angular users:
Even though default ckeditor build (#ckeditor/ckeditor5-build-classic/build/ckeditor) brings it's own toolbar buttons,
you'll have to add it yourself for custom builds (https://ckeditor.com/ckeditor-5/online-builder/ for instance)
Copy the toolbar array generated from theCustomBuild/sample/index.html to your config:
html:
<ckeditor [editor]="Editor" [config]="config"></ckeditor>
in your component:
public config = {
toolbar: [
'exportPdf',
'heading',
'|',
'bold',
...
]
};
Related
I have install Vue Devtootls but each time I have errors it doesn't show in the console I see o laracast they have like [vue: warn] and the error. I put this code but nothing.
catch(function(error){ console.log(error.message); });
}
I think you have a misunderstanding on vue-devtools, vue-devtools is a browser extension used as a debugging tool. You can check your components, events and more information via it. Please have a look at its introduction on GitHub.
On the other hand, messages like [vue: warn] ... are produced by Vue itself. The reason that you didn't get the messages is simply because you used vue.min.js instead of vue.js, I think. Save following code as a html file and then open it in chrome. You should be able to see the warning message in Chrome's console.
<!DOCTYPE html>
<html>
<head>
<title>Vue test</title>
</head>
<body>
<script type="text/javascript" src="https://unpkg.com/vue#2.4.2/dist/vue.js"></script>
<div id="app">
<span>{{ message }}</span>
<component1></component1>
</div>
<script>
// Vue.component('component1', {
// template: '<button>{{ message }}</button>',
// data: function() {
// return {
// message: 'I am a test button'
// };
// }
// });
var vm = new Vue({
el: '#app',
data: {
message: 'hello'
},
});
</script>
</body>
</html>
I am experimenting with cycle.js and webpack. I have got the following index.js file which almost a copy of what I found on cycle.js documentation.
import Cycle from '#cycle/core';
import {makeDOMDriver, hJSX} from '#cycle/dom';
function main(drivers) {
return {
DOM: drivers.DOM.select('input').events('click')
.map(ev => ev.target.checked)
.startWith(false)
.map(toggled =>
<div>
<input type="checkbox" /> Toggle me
<p>{toggled ? 'ON' : 'off'}</p>
</div>
)
};
}
const drivers = {
DOM: makeDOMDriver('#app')
};
Cycle.run(main, drivers);
And here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cycle.js checkbox</title>
</head>
<body>
<div id="app"></div> <!-- Our container -->
<script src="./dist/bundle.js"></script>
</body>
</html>
I am using webpack to generate bundle.js inside dist folder. When I run the app by opening index.html in chrome, I get following error in chrome console
cycle.js:51ReferenceError: React is not defined
at index.js:10
at tryCatcher (rx.all.js:63)
at InnerObserver.next (rx.all.js:5598)
at InnerObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (rx.all.js:1762)
at InnerObserver.tryCatcher (rx.all.js:63)
at AutoDetachObserverPrototype.next (rx.all.js:11810)
at AutoDetachObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (rx.all.js:1762)
at ConcatObserver.next (rx.all.js:3466)
at ConcatObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (rx.all.js:1762)
at ConcatObserver.tryCatcher (rx.all.js:63)
Not sure what I am doing wrong in this seemingly simple first step in a cycle.js app.
You need to set the correct pragma for JSX, or the JSX will be transformed incorrectly.
You can add the correct pragma to the top of your .js file:
/** #jsx hJSX */
Or put this in your babel configuration:
[ "transform-react-jsx", { "pragma": "hJSX" } ]
Relevant GitHub thread.
I wrote html page with simplest graph. It contain only one node.
In FireFox it's showed well, but Safari (5.1.7 fo Windows) does not show it.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
</head>
<body>
<div id="cy" style="height:100%;width:100%;position:absolute;left:0;top:0;"></div>
</body>
</html>
<script>
$(function(){ // on dom ready
$("#cy").cytoscape({
elements: [ { group: 'nodes', data: { id: 'a', name: 'Adam' } } ],
ready: function(){
}
});
alert('END');
}); // on dom ready
</script>
Moreover I use function alert('END') to check that everything is ok.
And FireFox shows message 'END', but Safari does not.
Only if I remove line 'elements: [ ... ]', then Safari shows message 'END'.
Any idea?
Cytoscape.js uses HTML5 technologies such that only A-grade autoupdated browsers are supported. Safari 5 is very old, and I don't think it's supported on Windows anymore.
For some reason when using the Google Earth Plugin with EXTJS it just gives me a white map.
Wish I could post an image although my reputation needs some work.
I include the following files when loading my app.
https://www.google.com/jsapi
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.js
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.css
/location_of_file/GoogleEarthStartup.js
The startup file contains.
google.load("earth", "1");
google.load("maps", "2.xx");
Do I need a key with the jsapi?
Please advice.
All browsers are giving me same issue.
We have GE plugin loading in an ExtJs container. HTML looks like:
<script type="text/javascript" src="scripts/globe/Globe.js"></script>
<script type="text/javascript" src="scripts/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("earth", "1");
</script>
<script type="text/javascript">
Ext.onReady(function() {
Globe.initGlobe();
});
</script>
...
<body><!--Globe Panel is inserted here from Globe.js by Ext--></body>
The javascript class sets up a container with a div that we can target:
this.globeContainingPanel = Ext.create('Ext.container.Container', {
...
renderTo: Ext.getBody(),
items: [{
{
xtype: 'panel',
region: 'center',
html: '<div id="map3d"></div>'
}
}]
});
Then have the GE render to the div panel:
window.google.loader.ApiKey = 'ABCDEFGHIJKLMNOPgoogle.earth.ex.key';
window.google.loader.KeyVerified = true;
window.google.earth.allowUsageLogging = false;
google.earth.createInstance('map3d', this.initCallback, this.failureCallback);
Also, make sure you have the Google Earth plugin installed in your browser.
I donwloaded this release, and I'm trying to run an example from the docs.
After expanding the Dojo download, my dojo dir is:
js/dojo-release-1.5.0/dijit
js/dojo-release-1.5.0/dojo
js/dojo-release-1.5.0/dojox
The buttons show up, but hide button does not hide the div.
Do I need to add other Dojo libraries along with the reference to dojo.js?
<script type="text/javascript" language="JavaScript" src="/js/dojo-release-1.5.0/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.addOnLoad(function() {
var node = dojo.byId("findMe");
dojo.connect(dijit.byId("buttonOne"), "onClick", function() {
dojo.fadeOut({
node: node,
duration: 300
}).play();
});
dojo.connect(dijit.byId("buttonTwo"), "onClick", function() {
dojo.fadeIn({
node: node,
duration: 300
}).play();
})
});
HTML:
<button dojoType="dijit.form.Button" id="buttonOne">
Hide Me!
</button>
<button dojoType="dijit.form.Button" id="buttonTwo">
Show Me!
</button>
<div id="findMe">
Hiya!
</div>
There are a couple of things you may be missing. As Daniel says, adding parseOnLoad=true as a djConfig param will help. Alternatively you can add djConfig params as a global JS variable before your dojo.js script tag, i.e.
<script>
var djConfig = {
parseOnLoad: true
}
</script>
A final alternative is to manually call the parser yourself. To do this, modify your JS to:
dojo.require("dijit.form.Button");
// You need to manually require the parser if you're going to call it yourself
dojo.require("dojo.parser");
dojo.addOnLoad(function() {
var node = dojo.byId("findMe");
dojo.connect(dijit.byId("buttonOne"), "onClick", function() {
dojo.fadeOut({
node: node,
duration: 300
}).play();
});
dojo.connect(dijit.byId("buttonTwo"), "onClick", function() {
dojo.fadeIn({
node: node,
duration: 300
}).play();
})
// New line, parse the doc
dojo.parser.parse();
});
Additionally to parsing, you may need to add a theme (you've not mentioned if you've done this or not). The easiest way to do this is to add the class name to your body tag and import the css.
...
<link rel="stylesheet" type="text/css" href="/js/dojo-release-1.5.0/dijit/themes/claro/claro.css">
</head>
<body class="claro">
...
</body>
http://telliott.net/dojoExamples/dojo-buttonHelloWorld.html contains an example of this all working for you, feel free to go crib.
Reading http://dojotoolkit.org/reference-guide/djConfig.html#djconfig and http://dojotoolkit.org/reference-guide/dijit/info.html#dijit-info would probably be a good idea also.
HTH.
Tom
try adding djConfig="parseOnLoad:true" when add the dojo.js to the page.
ex:
<script type="text/javascript" language="JavaScript" src="/js/dojo-release-1.5.0/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
//Daniel