Jquery based WYSIWYG with On-Air possibility - javascript

I have come across http://redactorjs.com which is a very nice wysiwig editor that has on air ability. In other words, in one single line you can turn a static div into an editable text area on the fly.
I -do not- want to pay for it (for some reasons I won't disclose) hence I am looking for an alternative.
Have you ever used a lightweight wysiwig jquery based editor that is easily usable on the fly?
I am looking for something I would use as follow:
$("#edit_btn").click(function({
$("#my_div").turnIntoEditor();
}));
$("#save_btn").click(function({
$("#my_div").post_content("http://target");
$("#my_div").turnIntoStatic();
}));
Please do not mind the post_content thingy and other function names as they are just given for reference to show the kind of usage I am looking after.
Thank you

I finally went for ckeditor. I could use it easily as follow (poc):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<title>Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#edit").click(function(){
$( '.editable' ).ckeditor();
});
$("#save").click(function(){
var editor = CKEDITOR.instances['editor'];
if (editor) { editor.destroy(); }
alert($('#editor').html());
});
});
</script>
</head>
<body>
<span id="edit">EDIT</span> <span id="save">SAVE</span><br/><br/>
<div class="editable" id="editor">
Some useless content
</div>
</body>
</html>

Related

learning javascript, why code will not work for javascript

I use IE 11 with the scripting option enabled. Even on other browsers it does not work. Using notepad++ to code and run... I'm currently learning javascript. I have a .js and .html file - the html has 3 sets of headings/paragraphs where the paragraphs should only show if i click the headings. This does not work. I downloaded a copy of the java library as well... I assume it has something to do with the Doctype statement ?
Any thoughts:
mcode.js
$(document).ready(function() {
$("p").hide();
$("h1").click(function() {
$(this).next().slideToggle(300);
});
});
myhtml.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Heading one</h1>
<p>This is just some text for heading 1</p>
<h1>Heading two</h1>
<p>This is just some text for heading 2</p>
<h1>Heading three</h1>
<p>This is just some text for heading 3</p>
<!-- FIRST BELOW POINTS TO WHERE THE JAVA SCRIPT LIBRARY IS -->
<!-- SECOND IS MY JAVASCRIPT CODE THAT WILL BE USED -->
<!--<script type="text/javascript" src="jquery-1.8.0.min.js"></script>-->
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>
</html>
You have listed your javascript as mcode.js in the question, but referenced src="my_code.js". Change your src in the html to the correct file and it should work fine.
<script type="text/javascript" src="mcode.js"></script>
That should be what you are after :)
You have to add mcode.js in your html file. Add a script in your head linked to mcode.js.

jQuery load() encoding for Korean (and Japanese) lang

I've recently ran into a problem and I would really use a bit of help from the community. I'm trying to load a HTML file using jQuery load().
The index file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question</title>
<meta http-equiv="Content-Type" Content="text/html; charset=euc-kr" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function restart(){
$("#wrap").load('new-content.html').hide().fadeIn('slow');
}
</script>
</head>
<body>
<div id="wrap">
<div id="content">Text before restart: 남성</div>
</div>
<br />
Restart
</body>
</html>
The new HTML file includes some simple HTML content and a call to a .js file (used for some animations). The new content file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question</title>
<meta http-equiv="Content-Type" Content="text/html; charset=euc-kr" />
<script src="main.js" language="javascript" type="text/javascript" />
</head>
<body>
<div id="contentInner">Text after restart: 여성</div>
</body>
</html>
As you can see I've included the correct encoding charsets (for both files) and I've double checked and I can confirm that every file used for this part of the code it's encoded as "KOREAN" (checked in different apps like Dreamweaver, Notepad++, Sublime Text 2).
Yet still once I load the content the characters are not encoded properly; question marks appearing instead of characters.
Of course I made some searching before posting and I found a few helpful topics about this called the PHP header solution, but this isn't an options since it need to use HTML/JS/CSS only.
The same behavior occurs when I'm using the Japanese language too. In other latin based languages everything is working perfectly fine of course.
Any sort of input/advice/help would be much much appreciated.
Thank you!

Trying to run a Hello World Program from a tutorial, but the dialog box does not show

This is the file I am trying to run, but all it does is open the web page with the page title, it doesn't run the script.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html lang=”EN” dir=”ltr” xmlns=”http://www.w3.org/1999/
xhtml”>
<head>
<meta http-equiv=»content-type» content=»text/xml;
charset=utf-8» />
<title>HelloWorld.html</title>
<script type = «text/javascript»>
//<![CDATA[
// Hello, world!
alert(«Hello, World!»);
//]]>
</script>
</head>
<body>
</body>
</html>
I tried running on aptana and notepad, neither show the dialog box. I feel like I am forgetting a small yet significantly important part?
Your quotes are a combination of angled quotes (« and ») and smart quotes (“ and ”). You need "regular" quotes, ", in both HTML and JavaScript. If your keyboard is automatically configured to do that replacement somehow, try using single quotes instead, or just swapping keyboard layouts for coding.
You need to enclose single ' ' or double " " instead of « ».
Here is the corrected codes,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/
xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>HelloWorld.html</title>
<script type = "text/javascript">
//<![CDATA[
// Hello, world!
alert("Hello, World!");
//]]>
</script>
</head>
<body>
</body>
</html>

Problems getting Quartz Composition to interact with JavaScript in browser

I'm trying to embed a simple Quartz Composition into a webpage using the embed tag. According to Apple's documentation and the API reference, this should be a very simple task, but selecting the embedded object in JavaScript doesn't expose the API.
Here's my page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Quartz Test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="main">
<h1>Quartz Test</h1>
<hr/>
<div id="content">
<embed type="application/x-quartzcomposer"
src="lineTest.qtz"
id="myComp"
width="300px"
height="150px"
opaque="false"/>
</div>
</div>
</body>
</html>
and here's my js:
var composition;
$(document).ready(function() {
composition = $('#myComposiiton');
});
With this simple setup I should be able to write something like...
composition.loaded() //should be true
or
composition.inputKeys() //should return Array
Instead all I get are errors in the debugger like, TypeError: Result of expression 'composition.loaded' [undefined] is not a function.
Has anybody been through this or have suggestion on how I might be able to debug it?
Thanks
Have you tried the obvious composition[0].loaded() ?
The jQuery $ function returns an array of DOM elements that match your selection, even if there is only one element that matches.

Simple jQuery css background "chooser"

I wrote this very simple background chooser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<title>jQuery Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="Normal.css" />
<script type="text/javascript">
$(document).ready(function(){
$("#StyleContrast").click(function() {
$("link[media='screen']").attr("href", "Contrast.css");
});
$("#StylePrint").click(function() {
$("link[media='screen']").attr("href", "Print.css");
});
$("#StyleNormal").click(function() {
$("link[#media='screen']").attr("href", "Normal.css");
});
});
</script>
</head>
<body>
<h1>Choose A Style:</h1>
<ul>
<li><a id="StyleContrast" href="#">Contrast</a></li>
<li><a id="StylePrint" href="#">Print</a></li>
<li><a id="StyleNormal" href="#">Normal</a></li>
</ul>
</body>
</html>
I have:
Normal.css
Print.css
Contrast.css
in the same folder with a very basic:
body {background-color:#000000;}
When I go to the URL it chooses Normal.css (as it should)
Then it changes to just fine to Print.css or Contrast.css (as it should)
But then it doesn't ´t go back (doesn't ´t choose) Normal.css again?
Can you help me spot what's wrong with the code?
$("#StyleNormal").click(function() {
$("link[#media='screen']").attr("href", "Normal.css");
});
Should be
$("#StyleNormal").click(function() {
$("link[media='screen']").attr("href", "Normal.css");
});
Also, I would update the version of jQuery you're using to 1.4.2
You used [#media='screen'] instead of just [media='screen']
In jQuery 1.4.2 (and I think in jQuery 1.3) # for attribute selection is deprecated. Notice that you had it right in the first two calls of your code, just not the last one. :D
If you want to optimize, you could add a class (say "switcher") to your links, and change your jQuery to this:
$(function(){
$(".switcher").click(function() {
$("link[media=screen]").attr("href", $(this).text() + ".css");
});
});

Categories