how can I use elrte Editor inside asp.net website?(any example)
Elrte Editor is pure javascript solution (more clear jQuery), so for accessing any of it features you have to use some javascript in your asp.net web-site.
First of all you should add some required folder with all it insertions to you project. You can find it inside installation package - elrte-1.2.zip. You have to copy to your project next folders: css, js, images with all subfolders and it content.
Secondly add some reference into your asp page like here:
<!-- jQuery and jQuery UI -->
<script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.7.custom.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.7.custom.css" type="text/css" media="screen" charset="utf-8"/>
<!-- elRTE -->
<script src="js/elrte.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/elrte.min.css" type="text/css" media="screen" charset="utf-8"/>
<!-- elRTE translation messages -->
<script src="js/i18n/elrte.ru.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$().ready(function () {
var opts = {
cssClass: 'el-rte',
// lang : 'ru',
height: 450,
toolbar: 'complete',
cssfiles: ['css/elrte-inner.css']
}
$('#editor').elrte(opts);
})
<style type="text/css" media="screen">
body { padding:20px;}
</style>
For accessing content of this editor we can use some javascript api that was prepared to us by developers of this editor. So, lets see it here and we will find out that for getting editor content, for example, we can use next expression:
var content = $('selector').elrte('val');
So, lets add some page and editor interoperability into our page.
Add some button and textbox to your page:
<asp:Button ID="btnSend" runat="server" OnClientClick= "ViewText();" Text="View text" />
<asp:TextBox ID="txtText" runat="server">test</asp:TextBox>
and add next javascript, also:
function ViewText() {
var content = $('#editor').elrte('val');
alert(content);
var MyLabel = $('#txtText');
MyLabel[0].value = content;
}
After implementing this functionality you can get editor's content as well using javascript alert function and setting your textbox value, which can be accessed in your server code, actually.
Full asp.net page code in my case was:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>elRTE</title>
<!-- jQuery and jQuery UI -->
<script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.7.custom.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.7.custom.css" type="text/css" media="screen" charset="utf-8"/>
<!-- elRTE -->
<script src="js/elrte.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/elrte.min.css" type="text/css" media="screen" charset="utf-8"/>
<!-- elRTE translation messages -->
<script src="js/i18n/elrte.ru.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$().ready(function () {
var opts = {
cssClass: 'el-rte',
// lang : 'ru',
height: 450,
toolbar: 'complete',
cssfiles: ['css/elrte-inner.css']
}
$('#editor').elrte(opts);
})
function ViewText() {
var content = $('#editor').elrte('val');
alert(content);
var MyLabel = $('#txtText');
MyLabel[0].value = content;
}
</script>
<style type="text/css" media="screen">
body { padding:20px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="editor" runat="server">
</div>
<asp:Button ID="btnSend" runat="server" OnClientClick= "ViewText();" Text="View text" />
<br />
<asp:TextBox ID="txtText" runat="server">test</asp:TextBox>
</form>
</body>
</html>
Related
I have done everything according to the documentation provided on https://fullcalendar.io/docs/google-calendar
I created a new calendar for this specific purpose.
I have purposely left the API key and calendarID blank
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script src='fullcalendar/gcal.js'></script>
<script>
$(function () {
$('#calendar').fullCalendar({
googleCalendarApiKey: '',
events: {
googleCalendarId: ''
}
});
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Solved Check comments for answer
I am able to use some of the bootstrap elements but not all.
I have tried this, but I get an error for some of the elements attributes saying not a valid attribute for that element.
<head runat="server">
<title></title>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
</head>
in the head try this:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head >
and
before closing the body try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
why the Jquery?
because without the Bootstrap does not work
I am trying to make a simple login page with dojo, I have a button at the moment but it doesn't use the dojo theme. The css works when I copy everything from the theme of claro and make a local css file but it doesn't work when i try to load it from the link.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Button test</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css ">
</head>
<script src="lib/dojo/dojo.js"></script>
<body class="claro">
<script>
require(["dijit/form/TextBox", "dijit/form/SimpleTextarea", "dojo/parser", "dojo/domReady!"]);
</script>
</body>
<body class="claro">
<button id="Button" data-dojo-type="dijit/form/Button"
data-dojo-props="
iconClass: 'dijitIconNewTask',
showLabel: false,
onClick: function(){ console.log('Second button was clicked!'); }">
Login
</button>
</html>
I'm not well-versed with javascript or jQuery and I am (therefore?) struggling with integrating datatables with an HTML UI in Shiny. All the examples I can find seem to work with ui.r and not with an HTML UI.
Any example or advice on how to do this?
( I've been pointed to the excellent app at http://emoteer.com/ but I'm unable to find out how it works )
You could try something like this for the index.html
<html>
<head>
<script src="shared/jquery.js" type="text/javascript"></script>
<script src="shared/shiny.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
<script src="js/jquery.dataTables.min.js"></script>
<link href="css/dataTables.bootstrap.css" rel="stylesheet" />
<link href="css/dataTables.extra.css" rel="stylesheet" />
<script src="js/dataTables.bootstrap.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>HTML UI</h1>
<div id="table" class="shiny-datatable-output"></div>
</body>
</html>
And in the server.R:
shinyServer(function(input, output, session) {
output$table <- renderDataTable({iris})
})
You will need to put the javascript, css and images in the www directory where the index.html is.
Edit on 13th March -
If you copy the C:\Users\<username>Documents\R\win-library\3.1\shiny\www\shared folder to the www folder inside which the index.html file is place, then the following should take care of it.
<head>
<script src="shared/jquery.js" type="text/javascript"></script>
<script src="shared/shiny.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
<link href="shared/datatables/css/dataTables.bootstrap.css" rel="stylesheet" />
<link href="shared/datatables/css/dataTables.extra.css" rel="stylesheet" />
<script src="shared/datatables/js/jquery.dataTables.min.js"></script>
<script src="shared/datatables/js/dataTables.bootstrap.js"></script>
<link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="shared/bootstrap/js/bootstrap.min.js"></script>
</head>
i would like to use FastClick in an Application for iOS. I downloaded the fastclick and included it into my header which looks like:
<meta name="format-detection" content="telephone=no" />
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.2.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript" src="js/fastclick.js"></script>
<script type="text/javascript" src="js/jquery.simpleWeather.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
Now i added the script directly above my body tag:
<script>
$(function() {
FastClick.attach(document.body);
});
</script>
But i haven't eliminated the 300ms delay... its still there. Do i use it the wrong way?
You don't need to use 3rd party plugins like Fastclick.
jQuery Mobile has already solved this problem with vclick event. It works on desktop and mobile devices and don't have 300ms delay.
Read my other answer if you want to find out more.
$(document).on('vclick', '#someButton', function(){
});