I am trying to use Quill editor with dojo framework, but its not working. The editor is not shown over there. Any help in this regard will be highly appreciated.
<html>
<head>
<link rel="stylesheet" href="http://cdn.quilljs.com/0.16.0/quill.snow.css" />
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/dojo/1.7.0/dojo/dojo.js"
data-dojo-config="async: true, packages: [
{ name: 'quill', location: 'http://cdn.quilljs.com/0.16.0/', main: 'quill' }
]" />
</head>
<body>
<div id="editor">
Editor in chief!
</div>
<script type="text/javascript">
define.amd.quill = true;
require(["quill"], function(quill){
var editor = new Quill("#editor");
});
</script>
</body>
I'm not familiar with Dojo 1.7, so opted for 1.10.4.
I also had XSS errors (something about an iframe) with Quill version 0.16, so went with the latest 1.2.6 version.
The below seems to work fine.
require(["dojo/ready", "Quill"], function(ready, Quill){
ready(function(){
var editor = new Quill("#editor", { theme: 'snow' })
})
})
<script>
var dojoConfig = {
async: true,
packages: [{ name: 'Quill', location: '//cdn.quilljs.com/1.2.6', main: 'quill' }]
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//cdn.quilljs.com/1.2.6/quill.snow.css" rel="stylesheet" />
<div id="editor">Editor in chief!</div>
Related
I am learning Vue.js and would like to implement the bulma-calendar module in my app. I came this far, but the calendar is somehow not updating, when I am selecting a new Date.
Sorry if I can't specify the problem more, as I said declarative programming is very new to me.
The template I got from the official website of bulma-calendar: https://demo.creativebulma.net/components/calendar/v6//#integration
Vue.component("comp-calendar", {
template: `
<div>
<input ref="calendarTrigger" type="date">
</div>
`,
data: function () {
return {
date: new Date(),
};
},
mounted: function () {
const options = {
type: "date",
color: "danger",
dateFormat: "DD-MM-YYYY",
startDate: this.date,
displayMode: "inline",
};
const calendar = bulmaCalendar.attach(
this.$refs.calendarTrigger,
options
)[0];
calendar.on("date:selected", (e) => (this.date = e.date));
},
});
var app = new Vue({
el: "#app",
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- import bulma -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css">
<!-- import bulma-calendar -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar#6.0.9/dist/css/bulma-calendar.min.css">
</head>
<body>
<div id="app">
<comp-calendar></comp-calendar>
</div>
<!-- import bulma-calendar -->
<script src="https://cdn.jsdelivr.net/npm/bulma-calendar#6.0.9/dist/js/bulma-calendar.min.js"></script>
<!-- import https://vuejs.org -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js"></script>
<script src="src/js/test.js"></script>
</body>
Any help? Thanks
EDIT: Did not help:
[...]
<input type="date">
[...]
const calendar = bulmaCalendar.attach('[type="date"]', options)[0];
calendar.on("select", (e) => (this.date = e.date))
Probably a bug in 6.0.9. Working with 6.0.0 (according to documentation here: https://creativebulma.net/product/calendar/demo) worked fine.
calendar.on("select", (e) => (this.date = e.date))
here this.date is incorect. this "this" is calendar object not the vue object
Can you please take a look at this code and let me why I am not able to add a Package dbootstrap into the dojo toolkit?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body class='dbootstrap'>
<div class="jumbotron">
<h1 id="greeting">app</h1>
</div>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
var dojoConfig = {
packages: [
{
location: '/dbootstrap',
name: 'dbootstrap'
}
]
};
require([
'dbootstrap',
'dojo/dom',
'dojo/dom-construct'
], function(dbootstrap, dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<i> Test!</i>', greetingNode);
});
</script>
</body>
</html>
As you can see in this image I already added the dbootstrap folder into the root directory
but I am getting these errors:
The dojoConfig need to be declared before including dojo.js, so, this should work for you
<script type="text/javascript">
var dojoConfig = {
packages: [
{
location: '/dbootstrap',
name: 'dbootstrap'
}
]
};
</script>
<!-- load Dojo -->
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script type="text/javascript">
require([
'dbootstrap',
'dojo/dom',
'dojo/dom-construct'
], function(dbootstrap, dom, domConstruct) {
var greetingNode = dom.byId('nodeId');
domConstruct.place('<i> Test!</i>', greetingNode);
});
</script>
I have problems with rendering a datagrid in my custom widget.
I was able to pinpoint the problem to this: datagrids that are not a direct child of the body do do not render correctly.
Showcase:
<!DOCTYPE html>
<html>
<head>
<title>Problems with datagrid</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css" media="screen">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/grid/resources/claroGrid.css">
</head>
<body class="claro">
<div id="outer"> </div>
<div><div id="inner"> </div></div>
<script>
dojoConfig = {
isDebug: true,
async: true,
has: {
"dojo-firebug": true,
"dojo-debug-messages": true
}
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" data-dojo-config="async: true"></script>
<script>
require([
"dojo/parser",
"dojo/ready",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojox/grid/DataGrid"
], function(parser, ready, Memory, ObjectStore, DataGrid){
createOuterGrid = function(){
var data = [{id:12,name:'outer'},{id:13,name:'blabla'}];
var dataStore = new ObjectStore({ objectStore:new Memory({ data:data }) });
var grid = new DataGrid({
store:dataStore,
items:data,
structure:[
{name:"ID", field:"id", width:"20%"},
{name:"Name", field:"name", width:"80%"}
]
}, "outer");
grid.startup();
};
createInnerGrid = function(){
var data = [{id:12,name:'inner'},{id:13,name:'blabla'}];
var dataStore = new ObjectStore({ objectStore:new Memory({ data:data }) });
var grid = new DataGrid({
store:dataStore,
items:data,
structure:[
{name:"ID", field:"id", width:"20%"},
{name:"Name", field:"name", width:"80%"}
]
}, "inner");
grid.startup();
};
parser.parse();
ready(function(){
createOuterGrid();
createInnerGrid();
});
});
</script>
</body>
</html>
Is there a way to make this work? Should I log it somewhere ?
I originally posted my question here:
dojo stackcontainer contains custom widget that uses datagrid, but dategrid not showing up
but then I didn't know that it was caused by the fact that a datagrid should be a direct child of the body.
Grid need a parent height. Is documented somewhere.
Set a height for inner Div parent will do the magic.
This is just so happen the parent for outter div is body.
I am not a jQuery person, wish I was. I have fiddled with no conflict, but it still lets only one of the scripts work at a time, not both. I am using a scroll to jquery script and colorbox (like lightbox) Here is my code. Any help is awesome.
<!--jquery scroll-->
<script src="js_scroll/jquery.js"></script>
<script src="js_scroll/jquery.scrollTo.js"></script>
<script src="js_scroll/jquery.nav.js"></script>
<script>
$(document).ready(function() {$('#nav').onePageNav();});
</script>
<!--colorbox-->
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
</body>
If you want to load multiple jQuery libraries, this is the way.
<script src='jquery-1.3.2.js'></script>
<script>
var $j132 = jQuery.noConflict();
</script>
<script src='jquery-1.4.2.js'></script>
<script>
var $j142 = jQuery.noConflict();
</script>
now use $j132() for jQuery 1.3.2 operations and $j142() for jQuery 1.4.2
I had the same problem with ColorBox and ScrollBar I solved by using the
<script>var $jQuery171 = $.noConflict(true);</script> after my scroll bar java
the final results was
<!--colorbox-->
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
and then come the scroll bar java
<!--Scroll Plans-->
<link rel="stylesheet" type="text/css" href="../../../siteroots/aboutScroll/general.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>var $jQuery171 = $.noConflict(true);</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../../siteroots/aboutScroll/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="../../../siteroots/aboutScroll/facescroll.js"></script>
<script type="text/javascript">
jQuery(function(){ // on page DOM load
$('#demo1').alternateScroll();
})
</script>
<!--End Scroll Plans-->
I used the <script>var $jQuery171 = $.noConflict(true);</script> in the scroll Java only and it's working fine now.
The dojo api doesn't seem to load on my system (IE 8, Windows 7 with IIS 7.5). I try to test these examples by linking to the dojo api like this
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
</script>
I also downloaded the library to link to it directly like this.
<script type="text/javascript" src="dojo.js">/*_*/</script>
<script type="text/javascript">
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
</script>
But got the same result. The library scripts don't load the treeview. Are there issues with IE8, Windows 7 or IIS 7.5 for the dojo libary 1.6.1?
Do you know of a treeview with this functionality: MySQL database support, context menu, add/delete node, hyperlink in tree support?
Thanks.
Complete HTML file where the dojo api doesn't load.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<!-- load Dojo -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.addOnLoad() {
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
}
</script>
<script type="text/javascript">
var treeDat = {
treeNodes: [
{ title:"World" },
{ title:"Business",
children:[
{ title:"News",
children:[
{ title:"Main"},
{ title:"Company News" },
{ title:"Economy" }
]
},
{ title:"Markets" },
{ title:"Technology" },
{ title:"Jobs and Economy" }
]
},
{ title:"Sports" }
]
};
</script>
<script type="text/javascript">
var TreeBuilder = {
buildTreeNodes:function (dataObjs, treeParentNode){
for(var i=0; i<dataObjs.length;i++){
var node = dojo.widget.createWidget("TreeNode",{
title:dataObjs[i].title,
expandLevel:99,
widgetId:(((treeParentNode)?treeParentNode.widgetId:"root_")+"_"+i)
});
treeParentNode.addChild(node);
treeParentNode.registerChild(node,i);
if(dataObjs[i].children){
this.buildTreeNodes(dataObjs[i].children, node);
}
}
},
buildTree:function (){
var myTreeWidget = dojo.widget.createWidget("Tree",{
widgetId:"myTreeWidget",
DNDMode:"between",
DNDAcceptTypes:["myTreeWidget"]
});
this.buildTreeNodes(treeDat.treeNodes,myTreeWidget);
var treeContainer = document.getElementById("myWidgetContainer");
var placeHolder = document.getElementById("treePlaceHolder");
treeContainer.replaceChild(myTreeWidget.domNode,placeHolder);
}
}
function addTreeContextMenu(){
var djWdgt = dojo.widget;
var ctxMenu = djWdgt.createWidget("TreeContextMenu",{});
ctxMenu.addChild(djWdgt.createWidget(
"TreeMenuItem",{caption:"Add Child Menu Item"}));
ctxMenu.addChild(djWdgt.createWidget(
"TreeMenuItem",{caption:"Delete This Menu Item"}));
document.body.appendChild(ctxMenu.domNode);
var myTree = dojo.widget.manager.getWidgetById("myTreeWidget");
/* Bind the context menu to the tree */
ctxMenu.listenTree(myTree);
}
dojo.addOnLoad(function(){
TreeBuilder.buildTree();
addTreeContextMenu();
});
</script>
</head>
<body>
<h1>Programmatic Dojo Tree Demo</h1>
<hr />
<div id="myWidgetContainer"
style="width: 17em; border: solid #888 1px; height:300px;">
<span id="treePlaceHolder"
style="background-color:#F00; color:#FFF;">
Loading tree widget...
</span>
</div>
</body>
</html>
You need to wrap the dojo.require calls in the dojo.addOnLoad function. This is required when using Dojo cross-domain build.
See more at http://dojotoolkit.org/reference-guide/quickstart/cross-domain.html
dojo.addOnLoad(function() {
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
});