I need to integrate an web based html editor in asp.net core project. I downloaded CKEditor and placed the unzipped folder in wwwroot folder.
I have referenced "ckeditor.js" in _Layout.cshtml using following script tag.
<script src="~/ckeditor/ckeditor.js" type="text/javascript">
</script>
Then, I've used following code to display the editor.
<textarea id="editor1" name="editor1">
</textarea>
<script type="text/javascript">CKEDITOR.replace('editor1');</script>
On using these lines of code in the empty About.cshtml of Home Folder, the editor was displayed. But the editor was not displayed when using the same code in another .cshtml file. The Code is given below
<div class="panel">
<div class="panel-heading border">
Create User
</div>
<div class="panel-body">
<div class="row no-margin">
<div class="col-lg-12">
<form asp-action="Edit" class="form-horizontal bordered-group" role="form">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="_id" />
<div class="form-group">
<label asp-for="Subject" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<input asp-for="Subject" class="form-control" />
<span asp-validation-for="Subject" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="MailFrom" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<input asp-for="MailFrom" class="form-control" />
<span asp-validation-for="MailFrom" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="Body" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
#* CKEDitor *#
<textarea id="editor1" name="editor1">
</textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Update" class="btn btn-default" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">CKEDITOR.replace('editor1');</script>
Why is the editor not displayed in another cshtml file?
I've also faced the same problem while integrating CKEditor in aps.net mvc project. After trying to determine the error I found that the Layout of the page is different. You may have the same problem.
Use id attribute and use a hash on the name.
<script type="text/javascript">CKEDITOR.replace('#editor1');</script>
Related
I properly define everything in my back end file. When I try to use
the back end variables in Thymeleaf by using selection variable
expression it is not working. It show errors in every field:
cannot resolve field name
register.html
<!doctype html "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:replace="/fragments/head"></head>
<body>
<nav th:replace="/fragments/nav :: nav-front"></nav>
<div class="container-fluid mt-5">
<div class="row">
<div th:replace="/fragments/categories"></div>
<div class="col"></div>
<div class="col-6">
<h3 class="display-4">Register</h3>
<form method="post" th:object="${user}" th:action="#{/register}" >
<div th:if="${#fields.hasErrors('*')}" class="alert alert-danger">
There are errors
</div>
<div class="form-group">
<label for>Username:</label>
<input type="text" class="form-control" th:field="*{username}" placeholder="Username">
<span class="error" th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></span>
</div>
<div class="form-group">
<label for>Password:</label>
<input type="password" class="form-control" th:field="*{password}">
<span class="error" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></span>
</div>
<div class="form-group">
<label for>Confirm Password:</label>
<input type="password" class="form-control" th:field="*{confirmPassword}">
<span class="error" th:if="${passwordMatchProblem}">Passwords do not match</span>
</div>
<div class="form-group">
<label for>E-mail:</label>
<input type="email" class="form-control" th:field="*{email}" placeholder="E-mail" required>
<span class="error" th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></span>
</div>
<div class="form-group">
<label for>Phone number:</label>
<input type="text" class="form-control" th:field="*{phoneNumber}" placeholder="Phone number">
<span class="error" th:if="${#fields.hasErrors('phoneNumber')}" th:errors="*{phoneNumber}"></span>
</div>
<button class="btn btn-danger mb-5">Register</button>
</form>
</div>
<div class="col"></div>
</div>
</div>
<div th:replace="/fragments/footer"></div>
</body>
</html>
I get errors everywhere I use the selection expression field.
Are you adding "user" to your model in your controller?
You need to add it to your model so Thymeleaf can access it.
addAttribute method can be used like so: model.addAttribute("user", myUser);
I am using jsp . And I just want to show a value (maxHolidays which is 15) in my form. But I always get exception Neither BindingResult nor plain target object for bean name 'command' available as request attribute
This is my code
Controller
int maxHolidays = 15;
model.addAttribute("maxHolidays", maxHolidays);
jsp File
<form:form method="POST" >
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<div class="col-sm-10">
<label class="control-label">Max holiday length</label>
<form:input type="text" path="maxHolidays" id="maxHolidays"
class="form-control"
required="required" />
<div class="has-error">
<form:errors path="maxHolidays" class="help-inline" />
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
</form:form>
try below code in jsp page
value="${maxHolidays}"
Try this
<div class="has-error">
<span class="help-inline">${maxHolidays}</span>
</div>
I have two almost identical forms. One is meant to edit an item, and the other is meant to create an item. For some reason, the create-form does not react at all to submit button clicks, while the edit/update form works exactly as expected. I can not find any differences between the two that should result in this behavior.
I am as sure as I can be that this has nothing to do with back end. I have monitored network activity, ant the submit button for the create-form does not activate any kind of network activity at all.
Working update form:
#extends ('layout')
#section('middle-content')
<div class="wrapper">
<div id="page" class="container">
<h4>Edit Competition Category</h4>
<form method="POST" action="/competition-categories/{{$competitionCategory->id}}">
#csrf
#method('PUT')
<div class="form-group row">
<label for="competition-category-name-input" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="competition-category-name-input" name="name" type="text" class="form-control" required="required" value="{{ $competitionCategory->name }}">
</div>
</div>
<div class="form-group row">
<label for="competition-category-abbreviation-input" class="col-4 col-form-label">Abbreviation</label>
<div class="col-8">
<input id="competition-category-abbreviation-input" name="abbreviation" type="text" class="form-control" required="required" value="{{ $competitionCategory->abbreviation }}">
</div>
</div>
<div class="form-group row">
<div class="offset-4 col-8">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
#endsection
Non-responding create-form:
#extends ('layout')
#section('middle-content')
<div class="wrapper">
<div id="page" class="container">
<h4>New Competition Category</h4>
<form method="POST" action="/competition-categories"></form>
#csrf
<div class="form-group row">
<label for="competition-category-name-input" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="competition-category-name-input" name="name" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group row">
<label for="competition-category-abbreviation-input" class="col-4 col-form-label">Abbreviation</label>
<div class="col-8">
<input id="competition-category-abbreviation-input" name="abbreviation" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group row">
<div class="offset-4 col-8">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
#endsection
This line: <form method="POST" action="/competition-categories"></form>
of your non working form, please remove </form> you started and closed it that's why.
I'm trying to use Wget to log in to my router and make a complete mirror of all the pages. The problem is, the router login page does not use the traditional "user" & "pass" ID for the text fields. It has a 'Password' and 'VmWpsPin' field. The ID for the 'Password' field is randomly generated every time the page is loaded/refreshed/requested. Below is the source code of the relevant part of the router page:
<body lang="en" class="superhubGUI" onload="javascript:Init()">
<div class="globalHeader">
<div id="nav">
<div id="logo">
<h1 id="header">Super Hub</h1>
</div>
<div id="buttons">Router Status
</div>
</div>
</div>
<div id="content">
<div id="container">
<div id="main">
<div class="panel noTitle" style="*padding:38px 30px 0px 30px">
<div id="login" class="inner">
<div class="inner-section">
<h2>Welcome to your Virgin Media Super Hub 2ac</h2>
<div id="signInForm">
<form action="/cgi-bin/VmLoginCgi" method="POST" name="signIn1" id="signIn">
<h2 id="loginTitle">Sign in to view and change your settings</h2>
<div class="field formField noHint username clearfix">
<label for="username"></label>
</div>
<div style="position:relative;top:-20px;" class="field formField noHint password clearfix">
<label for="password">Settings Password</label>
<input type="password" autocomplete="off" value="" maxlength="15" class="name required onefiftyPX inactive" name="KsCAqiihZb" id="password" onkeypress="handleKeyPress(event)" />
<div style="position:relative;left:-10px;" class="tooltip">
<img style="position:absolute; top:10px;" src="../images/toolTipButton.png"><span>Password can be found on the base of your Super Hub</span>
</div>
</div>
<div style="position:relative;top:-25px;" class="field formField noHint password clearfix">
<label for="password">WPS PIN</label>
<input type="text" autocomplete="off" value="" maxlength="15" class="name required onefiftyPX inactive" name="VmWpsPin" id="WpsPin" onkeypress="handleKeyPress(event)" />
<div style="position:relative;left:-10px;" class="tooltip">
<img style="position:absolute; top:10px;" src="../images/toolTipButton.png"><span>WPS PIN can be found on the base of your Super Hub</span>
</div>
</div>
<div>
Sign In
</div>
</form>
<p>
<span style="font-weight:bold;">Don't know your password?</span>
<br/>You'll find your default password on the bottom of your Super Hub.
</p>
</div>
</div>
</div><span class="pFoot"> </span>
</div>
</div>
My question is, how can I use Wget to login to the router when the ID changes at every request, is there somehow a way to request the page, parse the value out and then submit the form using something like --keep-session?
Or is there an alternative solution outside of Wget to automate the process? Any help is much appreciated.
Which bootstrap files need to include and how to implement the bootstrap datepicker?
<script src="~/Scripts/Common/bootstrap-datepicker.js"></script>
<link href="~/Content/datepicker.css" rel="stylesheet" />
this is the code:
<div id="yeadDropdown" class="drpDownMarginAdjust">
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker7'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
It depends on which datepicker plugin you are using. Because, there are many bootstrap datepickers.
But usually to initiate datepicker you need to execute this javascript code:
$('.datepicker').datepicker();
Before executing this code add "datepicker" class to your inputs, like this:
<input type='text' class="form-control datepicker" />