Question
How come my ckeditor is not functioning?
Error
"Uncaught TypeError: Cannot read property 'options' of undefined"
https://prnt.sc/ttqdm8
Version
ckeditor_4.14.1_full
File Structure
https://prnt.sc/ttqg7w
Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>File Manager Integration</title>
<script src="./plugin/ckeditor/ckeditor.js" type="text/javascript"></script>
</head>
<body>
<textarea cols="10" id="editor1" name="editor1" rows="10" data-sample-short><p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p></textarea>
<script>
// CKEDITOR.replace('editor1');
CKEDITOR.replace('editor1', {
height: 300,
filebrowserBrowseUrl: './plugin/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl: './plugin/ckfinder/ckfinder.html?type=Images',
filebrowserUploadUrl: './plugin/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: './plugin/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images'
});
</script>
</body>
</html>
I found the solutions. The problem is caused by the folder name. Directly change the folder name from
D:\xampp\htdocs\testingProject\copypasteeditor --> D:\xampp\htdocs\testingproject\copypasteeditor
Change testingProject to testingproject.
Related
Hello I have a problem with Drag an Drop.
How to drag and drop image inside div like page builders? I have no idea about it.enter image description here
here is a code for dragging the image into a div file. you need to give your image a class named draggable and your div a class named droppable and call it from jquery by these class names.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="a.css">
<title>Hello, world!</title>
</head>
<body>
<div class="hp-product-item">
<img class="draggable" style="height:500px;width:500px;" src="https://images.unsplash.com/photo-1516703914899-e8303d01329a?ixlib=rb-0.3.5&s=9ebf86cdab3a1c7319ff15b16d09b1f7&auto=format&fit=crop&w=1350&q=80">
<div class="droppable" style="direction:rtl;height:500px;width:500px;border:5px solid black;">drop the image here</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$('.draggable').draggable({
cursor: 'move',
revert: 'invalid',
helper: 'original',
start: function (event, ui)
{
$(this).parent().find('#adminTimeReservation').css('display','block');
},
drag: function (event, ui)
{
}
});//draggable
$('.droppable').droppable({
drop: function(ev, ui) {
$(this).prepend(ui.draggable);
ui.draggable.position({
my: 'right top',
at: 'right top',
of: this
});
}
});//droppable
</script>
</body>
</html>
the documentation of what elements i used is int this link https://jqueryui.com/draggable/
I am working with serving a simple polymer element from a Tomcat server. The element works fine in Chrome but fails in the recent version of Firefox 49.0.2.
I have attached the content the two elements and the problem seems to happen because the WebComponentsReady event is fired repeatedly over and over again in Firefox but in Chrome only four times.
Furthermore by including a include on the paper-slider element in the simple-element below causes Firefox to go into a loop where it keeps reloading the files over and over again ?!
<link rel="import" href="./bower_components/paper-slider/paper-slider.html">
What is going on?
simple-element-demo.html (below)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Demo of simple element">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
</script>
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./simple-element.html"></link>
</head>
<body>
<div>Hello! I am going to demo simple-element. See below me.</div>
<simple-element></simple-element>
</body>
<script>
document.addEventListener('WebComponentsReady', function(e) {
console.log('WebComponentsReady', e);
debugger;
});
</script>
</html>
simple-element.html below
<!doctype html>
<html>
<head>
<title>Simple Element</title>
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./bower_components/paper-slider/paper-slider.html">
</head>
<body>
<dom-module id="simple-element">
<template>
<div class="container flex-horizontal">
Hi There! I am Simple Element.
</div>
</template>
<script>
Polymer({
is: 'simple-element',
properties: {
prop1: {
type: String,
notify: true
},
},
created: function() {
console.log('Simple is created');
},
ready: function() {
console.log('Simple is ready');
}
});
</script>
</dom-module>
</body>
</html>
I was able to fix the problem by including webcomponents-lite.js only once in the main file: simple-element-demo.html.
I removed the line below from the simple-element.html and now it works just fine in all browsers.
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
Was working on server log reports:
[20/Mar/2016 22:52:22] "GET /tm/edit_blocks HTTP/1.1" 200 1932
Now this line does not appear
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="//cdn.ckeditor.com/4.5.7/standard-all/ckeditor.js"></script>
</head>
<body>
<textarea id="editor0" name="editor0"><p>Editor</p>{{ block0.html }}</textarea>
<script>
CKEDITOR.replace('editor0'), {contentsCss : '/static/tm/style2.css'};
</script>
</body>
</html>
You need to load an extra plugin
CKEDITOR.replace('editor0'), {extraPlugins : 'stylesheetparser',contentsCss : '/static/tm/style2.css'};
edit
the original code should be updated:
CKEDITOR.replace( 'editor0',{contentsCss :'/static/tm/style3.css'});
I am failing to see why I cannot get waypoints to work. Code is below, what am I missing (it must be something small and simple)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.min.js"> </script>
<script>
$('#waypoint').waypoint(function () {
alert('You have scrolled to an entry.');
}, {
offset: '100%'
});
</script>
</head>
<body>
<div style="height: 1500px">Scroll down</div>
<div id="waypoint">Waypoint</div>
</body>
</html>
It doesn't look like you're including the jquery library, which is required.
<head>
<meta charset="utf-8" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.min.js"> </script>
i have script like this....
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="bbbbb" />
<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<title>for testing works</title>
<style>
div{
height: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('div').click(function(){
$(document).load('load.html');
} );
});
</script>
</head>
<body>
<div id="init">Click Me</div>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
</body>
</html>
in load.html i have a paragraph with with dummy content.
why this script is not changing my content of page...
loading a document object inside other is allowed or not?
You should change $(document).load('load.html'); to $('body').load('load.html');:
$(document).ready(function()
{
$('div').click(function(){
$('body').load('load.html');
return false;
});
});