I wanted to get an image editor so that I can edit my pictures and add text over them so that I tried Toast UI image editor, I did as the documentation of Toast UI Image Editor says but Toast UI Image Editor isn't showing anything on my browser I'm attaching my code below. Please tell me if I did something wrong while implementing the image editor.
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<!--Toast UI stylesheet-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tui-image-editor/3.10.0/tui-image-editor.min.css" integrity="sha512-WEhPru82cOhEAThEMrYXgrHXc0eR69oZF0vGzXwhNf2hSbNc/q4/fb9qeDexgrIyBU6TKfhXC/DKwxYHx5CmLA==" crossorigin="anonymous" />
</head>
<body>
<div id="tui-image-editor"></div>
<!--jQuery File-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!--Toast UI js file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tui-image-editor/3.10.0/tui-image-editor.js" integrity="sha512-n85VUN94xSJstXJvMxHC968reNaBOSy9+LRA0slHiqYzsa6sAX3ok0cupK6HTg1sIlWXncBcCVzg7YGPJ70T0w==" crossorigin="anonymous"></script>
<script>
var ImageEditor = require('tui-image-editor');
var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
includeUI: {
loadImage: {
path: '/media/profile-images/20/09/23/Koala_iaIdqm5.jpg',
name: 'SampleImage'
},
locale: locale_ru_RU,
theme: whiteTheme
initMenu: 'filter',
menuBarPosition: 'bottom'
},
cssMaxWidth: 700,
cssMaxHeight: 500,
selectionStyle: {
cornerSize: 20,
rotatingPointOffset: 70
}
});
</script>
</body>
Below I'm attaching the error my browser's console is throwing
Browser's console
util.js:89 Uncaught TypeError: Cannot read property 'forEach' of undefined
at keyMirror (util.js:89)
at eval (consts.js:48)
at Object../src/js/consts.js (tui-image-editor.js:1579)
at __webpack_require__ (tui-image-editor.js:36)
at eval (util.js:38)
at Object../src/js/util.js (tui-image-editor.js:2203)
at __webpack_require__ (tui-image-editor.js:36)
at eval (invoker.js:17)
at Object../src/js/invoker.js (tui-image-editor.js:1843)
at __webpack_require__ (tui-image-editor.js:36)
You have a typo in your code
theme: whiteTheme -> theme: whiteTheme,
Here is the working example.
Reference: https://github.com/nhn/tui.image-editor/blob/master/examples/example01-includeUi.html
<html>
<head>
<meta charset="UTF-8">
<title>0. Design</title>
<link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" rel="stylesheet">
<link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css">
<style>
#import url(http://fonts.googleapis.com/css?family=Noto+Sans);
html, body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="tui-image-editor-container"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.0/fabric.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
<!-- <script type="text/javascript" src="./js/theme/white-theme.js"></script>
<script type="text/javascript" src="./js/theme/black-theme.js"></script> -->
<script>
// Image editor
var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
includeUI: {
loadImage: {
path: 'img/sampleImage2.png',
name: 'SampleImage'
},
// theme: blackTheme, // or whiteTheme
initMenu: 'filter',
menuBarPosition: 'bottom'
},
cssMaxWidth: 700,
cssMaxHeight: 500,
usageStatistics: false
});
window.onresize = function() {
imageEditor.ui.resizeEditor();
}
</script>
</body>
</html>
Related
Ive created a world map using JVectorMap and am wanting to open a box using Shadowbox.js displaying various information about each highlighted country - In this example it's specifically MENA countries.
The map works and the pop-up works but my div <div>TEST</div> is not displaying at all, I am getting an error: "It may have been moved, edited or deleted."
Heres my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>jVectorMap</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<link rel="stylesheet" href="jquery-jvectormap-2.0.5.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="jquery-jvectormap-2.0.5.min.js"></script>
<script src="jquery-jvectormap-world-mill-en.js"></script>
<script src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: 'en',
players: ['iframe','html']
});
</script>
</head>
<body>
<div id="world-map" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
$(function(){
var codes = ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE','YE'];
$('#world-map').vectorMap({
map: 'world_mill_en',
zoomMax: 20,
backgroundColor: '#505050',
regionStyle: {
initial: {
fill: '#F6F5F4'
},
hover: {
fill: '#F6F5F4',
"fill-opacity": 1
},
selected: {
fill: '#7B8B9B'
},
selectedHover: {
cursor: 'pointer',
fill: '#002142'
}
},
selectedRegions: ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE','YE'], onRegionClick: function (event, code) {
if($.inArray(code,codes) > -1) {
Shadowbox.open({
content: '<div>TEST</div>',
title: "MENA",
player: "iframe",
height: 400,
width: 640
});
}
}
});
});
</script>
</body>
</html>
Further down the line Id like to have a different message for each code but for now I'd just like to get this working.
Any help appreciated.
I figured it out and was something that should not have taken this long. Since I want the shadowbox to display html I needed the html player:
player: "html",
Everything worked after that.
I'm using react-codemirror2 in a react project. I want to add features like auto bracket close and auto tag close. There is a npm package called #codemirror/closebrackets but I can't find any documentation to do that.
<ControlledEditor
onBeforeChange={handleChange}
value={value}
className="code-mirror-wrapper"
options={{
linerWrapping: true,
lint: true,
mode: language,
theme: 'material',
lineNumbers: true
}}
/>
This is my react component.
Specify if there is a way to do without additional packages like #codemirror/closebrackets.
You can add autoCloseBrackets: true to your options and it'll work fine. From the doc:
Defines an option autoCloseBrackets that will auto-close brackets and
quotes when typed.
import 'codemirror/addon/edit/closebrackets'
// other parts of the code//
<ControlledEditor
onBeforeChange={handleChange}
value={value}
className="code-mirror-wrapper"
options={{
linerWrapping: true,
lint: true,
mode: language,
theme: 'material',
lineNumbers: true,
autoCloseBrackets: true,
}}
/>
This really works:
<!doctype html>
<html>
<head>
<title>CodeMirror</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
<link rel=stylesheet href="https://CodeMirror.net/doc/docs.css">
<script src="https://CodeMirror.net/addon/hint/anyword-hint.js" id="anyword"></script>
<link rel="stylesheet" href="https://CodeMirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/hint/show-hint.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/dialog/dialog.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/search/matchesonscrollbar.css">
<script src="https://CodeMirror.net/lib/codemirror.js"></script>
<script src="https://CodeMirror.net/addon/edit/closetag.js"></script>
<script src="https://CodeMirror.net/addon/hint/show-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/sql-hint.js"></script>
<script src="https://CodeMirror.net/addon/mode/loadmode.js"></script>
<script src="https://CodeMirror.net/mode/meta.js"></script>
<script src="https://CodeMirror.net/addon/hint/xml-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/html-hint.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/hint/javascript-hint.js"></script>
<script src="https://CodeMirror.net/mode/xml/xml.js"></script>
<script src="https://CodeMirror.net/mode/javascript/javascript.js"></script>
<script src="https://CodeMirror.net/mode/css/css.js"></script>
<script src="https://CodeMirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://CodeMirror.net/addon/dialog/dialog.js"></script>
<script src="https://CodeMirror.net/addon/search/searchcursor.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/search/search.js"></script>
<script src="https://CodeMirror.net/addon/scroll/annotatescrollbar.js"></script>
<script src="https://CodeMirror.net/addon/search/matchesonscrollbar.js"></script>
</head>
<body>
<div id="editor"></div>
<button onclick="closeBrackets()">Close Brackets</button>
<script>
function closeBrackets() {
myCodeMirror.execCommand("closeBrackets");
}
</script>
<script>
var myCodeMirror = CodeMirror(
document.getElementById('editor'), {
lineNumbers: true,
autoCloseBrackets: true,
});
</script>
</body>
</html>
I have the following code (also on jfiddle https://jsfiddle.net/96ye4hL4/1/ )
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<link href="https://cdn.quilljs.com/1.2.0/quill.snow.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.quilljs.com/1.2.0/quill.js"></script>
</head>
<body>
<div id="editor0"></div>
<script type="text/javascript">
const quill = new Quill("#editor0", {
modules: { toolbar: true },
theme: "snow"
});
quill.setContents({"ops":[{"insert":"Index"},{"attributes":{"header":1},"insert":"\n"},{"attributes":{"link":"http://google.com"},"insert":"FooM"},{"insert":"\n"},{"insert":"\n"}]},)
</script>
</body>
</html>
When I click on the right most character in a hyperlink (the M in FooM), the hyperlink window does not pop up.
How can I pop up the hyperlink window upon clicking the last letter in FooM?
This is an open issue with the Quill library.
https://github.com/quilljs/quill/issues/1931
Notice your code snippet will not run, but standard HREF does:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<link href="https://cdn.quilljs.com/1.2.0/quill.snow.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.quilljs.com/1.2.0/quill.js"></script>
</head>
<body>
<div id="editor0"></div>
<script type="text/javascript">
const quill = new Quill("#editor0", {
modules: { toolbar: true },
theme: "snow"
});
quill.setContents({"ops":[{"insert":"Index"},{"attributes":{"header":1},"insert":"\n"},{"attributes":{"link":"http://google.com"},"insert":"FooM"},{"insert":"\n"},{"insert":"\n"}]},)
</script>
FooM
</body>
</html>
I've just downloaded the trial version of Ext JS 5 and I'm wondering how to use a single component instead of the whole framework. The Ext's guide doesn't seem to have a guide on this. I'm trying to use this http://dev.sencha.com/deploy/ext-4.0.0/examples/form/combos.html
Can I just include a JS and some images like jQuery UI?
Looking at sencha fiddle you could add the following cdn files (or pull them local) and it'll load the extjs framework. Then you could add Ext.onReady and create extjs elements on your page:
Js Files Required:
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/build/ext-all-debug.js"></script>
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
CSS Files Required:
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_01.css">
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_02.css">
And here is an example index.html file that loads a message box when Ext is ready:
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/build/ext-all-debug.js"></script>
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_01.css">
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_02.css">
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
title: 'Hello World!',
items: [{
html: 'Another Item Here'
}]
}).show();
});
</script>
</head>
<body>
<p>TEST SITE</p>
</body>
</html>
Edit 1 (Adding Combobox):
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/build/ext-all-debug.js"></script>
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_01.css">
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_02.css">
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
title: 'Hello World!',
items: [{
html: 'Another Item Here'
}]
}).show();
Ext.create('Ext.panel.Panel', {
renderTo:'testDiv',
width: 500,
height: 500,
title: 'This is another test',
items: [{
html: 'Another test here too.'
},{
xtype:'combobox',
width:400,
displayField: 'descr',
valueField: 'descr',
store: Ext.create('Ext.data.Store',{
fields:['descr'],
data: [{
descr: 'Example 1'
},{
descr: 'Example 2'
}]
})
}]
})
});
</script>
</head>
<body>
<p>TEST SITE</p>
<div id="testDiv"></div>
</body>
</html>
Whenever i load my page this error got hit.
My code is:
<head runat="server">
<title>Jai Jinendera</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css"/>
<link rel="stylesheet" href="css/flexslider.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script src="js/selectivizr-min.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css">
<![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="js/all-in-one-min.js"></script>
<script src="js/setup.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel.js" type="text/javascript">
$(window).load(function () {
$('.flexslider').flexslider();
});
$(function () {
$('#work').carouFredSel({
width: '100%',
scroll: 1,
auto: false,
pagination: false,
prev: '.prev_item',
next: '.next_item'
});
$("#work").touchwipe({
wipeLeft: function () { $('.next_item').trigger('click'); },
wipeRight: function () { $('.prev_item').trigger('click'); }
});
});
$(window).load(function(){
$('#demo-side-bar').removeAttr('style');
});
</script>
<style type="text/css">
.demobar {
display:none;
}
#demo-side-bar {
top:53px!important;
left:90%!important;
display:block!important;
}
</style>
</head>
It says error in client/js/setup.js-line 10 column 5
and 10th line of setup.js is
$('.tabs').tabs({ fx: { opacity: 'toggle', duration: 'fast'} });
I see two problems in your <script> declarations:
You have included jquery.min.js twice, once from a location on your server and once from Google's CDN. Remove the latter. (Or remove the former and move the latter up to replace it.)
A <script> element should either reference an external script or contain content of its own, but not both.
You need to move the code out of your jquery.carouFredSel.js script element:
<script src="jquery.carouFredSel.js" type="text/javascript"></script>
...and then include that code in a new script element:
<script>
$(window).load(function () {
...
</script>
P.S. I don't know what you have in all-in-one-min.js, but it clearly isn't actually all in one or you wouldn't need the other scripts.