why does ckeditor contentcss not load - ckeditor

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'});

Related

Ckeditor is not functioning properly?

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.

d3 visualization not appearing

I'm trying to get a very basic d3 visualization working, but all I get is a blank browser window.
Here's my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="code.js"></script>
<title>My Title</title>
</head>
<body>
<div class="container"></div>
</body>
</html>
Here's my code.js:
console.log("test");
d3.select("body").append("h1").html("Here are some words")
My console prints test. But nothing appears in the browser window. When I inspect element, nothing has been added.
I've tried loading the localhost page via python -m SimpleHTTPServer and via npm install -g http-server plus http-server &.
What's going wrong?
you need to change your HTML code for the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<title>My Title</title>
</head>
<body>
<div class="container"></div>
<script type="text/javascript" src="code.js"></script>
</body>
</html>
I just put the line which reference the "code.js" inside the body tags

CKEditor changes tag order

CKEditor transforms the follow html code :
<a><h1>H1</h1></a>
to
<h1><a>H1</a></h1>
How to prevent CkEditor doing that change ?
My configuration :
allowedContent : true;
Snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1"><h1>Title</h1></textarea>
<script>
CKEDITOR.replace( 'editor1' , {
uiColor: '#ff0000',
allowedContent: true
});
</script>
</body>
</html>
I'm afraid the answer is that there's no solution. Block level links (like a wrapping h1) are not supported by ckeditor, at last not yet. You can check this dev ticket for updates.

Waypoints not responding

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>

Why is qUnit not recognising my test?

I'm trying-out qUnit for the first time but can't get any tests to run. I created an HTML file added links to the qunit CSS and JavaScript files but when I call test nothing happens. The test run states "0 tests of 0 passed, 0 failed". Any ideas? Here's the source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
<script type="text/javascript">
$(document).ready(function(){
test("a basic test example", function() {
ok( true, "this test is fine" );
});
});
</script>
</head>
<body>
<h1 id="qunit-header">QUnit example</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>
</body>
</html>
You need to have a html file like this
<!DOCTYPE html>
<html>
<head>
<title>Test title</title>
<link href="../../Content/qunit.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="../../Scripts/qunit.js" type="text/javascript"></script>
<script src="yourtestfile.js" type="text/javascript"></script>
</head>
<body>
<h1 id="qunit-header">Test title</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar">
</div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests">
</ol>
<div id="qunit-fixture">
<div id="container"></div>
</div>
</body>
</html>
Make a seperate js file which contains your tests. The file should look like
(function ($) {
module("Your module name", {
beforeEach: function () {
//your setup code goes here
},
afterEach: function () {
//your teardown code goes here
}
});
test("This is your first test", function (assert) {
assert.ok(true, "this test passed");
});
})(jQuery);
And include this to your html page.
And simply view the html page in a browser.
I warn you, qunit is addictive! :)

Resources