how to implement bootstrap-wysihtml5

Report · Apr 22, 2012

I have been told to use the above WYSIWYG as it is a good one to use, simple and clean. i went to the site http://jhollingworth.github.com/bootstrap-wysihtml5/

but its unclear to me how i attach it to and exisiting text aera and how i link it all in, has anyone used this and can show me what to do

thanks

Jon

Report · Apr 22, 2012

Looks to be JQuery based. Good for a basic editor seems nice. Basically on their page ( http://jhollingworth.github.com/bootstrap-wysihtml5/ ) they give you the following code:

$('#textarea').wysihtml5();

The #textarea is the ID and the wysihtml5 is the javascript function being called. For your form textarea, just make sure the ID for that matches the ID in the above line of code. That code can go anywhere on the page. On the example website they put the code on line 87-89. Then include the CSS and javascript they give you on the page. Nothing more to it.

Report · Apr 22, 2012

i just tried this but didnt work

<html>

<head>

<title>wysihtml5</title>

</head>

<body>

<p>

</p>

<p>

</p>

</form>

$('#welcome').wysihtml5();

</script>

</body>

</html>

Report · Apr 22, 2012

i cant get it to work, looking at his code do you think these are required?

Report · Apr 22, 2012

Yes. All those files are in the library (lib folder) on github for the project.

Report · Apr 22, 2012

yes i added those but the icons in the text bar are showing. i new to using this sort of thing so just finding my way around. i have managed to get the rest working but im not sure how to display the icons

thanks

Report · Apr 22, 2012

You'll need to download the Zip folder cotnaining all the supporting files from link below:

https://github.com/jhollingworth/bootstrap-wysihtml5/zipball/master

Unzip or Extract the zipped files to a folder called bootstrap in your DW Local Site.

In DW, open bootstrap/index.html to see how the code is set-up.

readme.textfile contains an overview on how to use it.

HINT: right-click on readme.textfile and re-name it to readme.txt.

Good luck,

Nancy O.

Alt-Web Design & Publishing

Web | Graphics | Print | Media Specialists

http://alt-web.com/

http://twitter.com/altweb

http://alt-web.blogspot.com/

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 23, 2012

thanks for the response,

i have done what you said and downloaded all the files, in order to see it work correctly rather than adding there code to my page i added my code to there page then was goin to delete what i didnt need, however when uploadin g i got the following arroe in the text area

<br />

<b>Warning</b>: htmlentities() [<a href='function.htmlentities'>function.htmlentities</a>]: charset `US-ASCII' not supported, assuming iso-8859-1 in <b>/usr/users1/jonfort/public_html/think/beta/admin/index.php</b> on line <b>112</b><br />

then the text that is in the DB

i have included the whole page that is showing the errors. Any ideas would help

<?php require_once('../Connections/hostprop.php'); ?>

<?php

if (!function_exists("GetSQLValueString")) {

function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")

{

if (PHP_VERSION < 6) {

$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

}

$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {

case "text":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "long":

case "int":

$theValue = ($theValue != "") ? intval($theValue) : "NULL";

break;

case "double":

$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";

break;

case "date":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "defined":

$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;

break;

}

return $theValue;

}

$editFormAction = $_SERVER['PHP_SELF'];

if (isset($_SERVER['QUERY_STRING'])) {

$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);

}

if ((isset($_POST["MM_update"])) && ($_POST["MM_update"] == "form2")) {

$updateSQL = sprintf("UPDATE think_welcome SET welcome=%s WHERE welcomeID=%s",

GetSQLValueString($_POST['welcome'], "text"),

GetSQLValueString($_POST['welcomeID'], "int"));

mysql_select_db($database_hostprop, $hostprop);

$Result1 = mysql_query($updateSQL, $hostprop) or die(mysql_error());

$updateGoTo = "index.php";

if (isset($_SERVER['QUERY_STRING'])) {

$updateGoTo .= (strpos($updateGoTo, '?')) ? "&" : "?";

$updateGoTo .= $_SERVER['QUERY_STRING'];

}

header(sprintf("Location: %s", $updateGoTo));

}

mysql_select_db($database_hostprop, $hostprop);

$query_Recordset1 = "SELECT * FROM think_welcome";

$Recordset1 = mysql_query($query_Recordset1, $hostprop) or die(mysql_error());

$row_Recordset1 = mysql_fetch_assoc($Recordset1);

$totalRows_Recordset1 = mysql_num_rows($Recordset1);

?>

<!DOCTYPE html>

<html>

<head>

<title>bootstrap-wysihtml5</title>

.btn.jumbo {

font-size: 20px;

font-weight: normal;

padding: 14px 24px;

margin-right: 10px;

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

border-radius: 6px;

}

</style>

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-30181385-1']);

_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

</script>

</head>

<body>

<hr/>

<td nowrap align="right">WelcomeID:</td>

</tr>

<td nowrap align="right" valign="top">Welcome:</td>

</tr>

</tr>

</table>

</form>

</div>

</div>

$('#welcome').wysihtml5();

</script>

$(prettyPrint);

</script>

</body>

</html>

<?php

mysql_free_result($Recordset1);

?>

Report · Apr 23, 2012

Seems like a char-encoding bug with the editor, not with your DB.

Find this line in your code:

<td><textarea name="welcome" cols="50" rows="5"><?php echo htmlentities($row_Recordset1['welcome'], ENT_COMPAT, ''); ?></textarea></td>

and replace it with this:

<td><textarea name="welcome" cols="50" rows="5"><?php echo htmlentities($row_Recordset1['welcome'], ENT_COMPAT, 'ISO-8859-1'); ?></textarea></td>

This should circumvent the issue temporarily, I guess!

Report · Apr 23, 2012

i have remade it and it seems to be working now, i am going to try and intergrate it into an existing page

thanks

Report · Apr 23, 2012

it seems you cant change the text are name and the code e.g

$('#welcome').wysihtml5();

</script>

if i change this i dont see the toolbar

how am i meant to add multiple text areas?

Report · Apr 26, 2012

I got it working but just so you are aware the textarea tag need to go in the correct position which is underneathe the other script otherwise it wont work...not realy sure why??? but you can have multiple text area tags just labelled different

$('#welcome').wysihtml5();

</script>

$(prettyPrint);

</script>

how to implement bootstrap-wysihtml5

1 Correct answer