I am working on a asp.net core 1.1 web application. In one of the create views i need to use ckeditor.
i can use ckeditor well but i want to change default language.
how can i change language in ckeditor? and Where should I make changes?
my code:
<div class="form-group">
<label asp-for="BookDescription" class="col-lg-4 col-sm-4 control-label"></label>
<div class="col-lg-6">
<textarea id="editor1" name="editor1"></textarea>
</div>
<script type="text/javascript">
CKEDITOR.replace('editor1');
</script>
</div>
Hamid, you can specify default language in your view, like this -
CKEDITOR.replace('editor1', {language: 'en'});
Or you can add to CKEditor config.js file like this
config.language = 'en';
Please, check more information here https://docs.ckeditor.com/#!/guide/dev_uilanguage
Related
I'm tinkering with DaisyUI within Vue.js 3 (porting an existing Vue+Bootstrap application to Tailwind CSS). I liked the idea that DaisyUI doesn't have JS wizardry going on behind the scenes, yet there seems to be some CSS voodoo magic that is doing things more complicated than they need to be (or at least this is my impression).
From the DaisyUI examples, here's the modal I'm trying to integrate:
<input type="checkbox" id="my-modal" class="modal-toggle"/>
<div class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">Congratulations random Internet user!</h3>
<p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
<div class="modal-action">
<label for="my-modal" class="btn">Yay!</label>
</div>
</div>
</div>
no javascript, yet the problem is that the modal will come and go according to some obscure logic under the hood that tests the value of the my-modal input checkbox at the top. That's not what I want. I want my modal to come and go based on my v-show="showModal" vue3 reactive logic!
Daisy doesn't seem to make that possible. Or at least not easily. What am I missing?
The modal is controller by the input field, so to open or close the modal just toggle the value of that input:
<template>
<!-- The button to open payment modal -->
<label class="btn" #click="openPaymentModal">open modal</label>
<!-- Put this part before </body> tag -->
<input type="checkbox" v-model="paymentModalInput" id="payment-modal" class="modal-toggle" />
<div class="modal modal-bottom sm:modal-middle">
<div class="modal-box">
<h3 class="font-bold text-lg">Congratulations random Internet user!</h3>
<p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
<div class="modal-action">
<label class="btn" #click="closePaymentModal">Yay!</label>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
const paymentModalInput = ref()
const openPaymentModal = () => {
paymentModalInput.value = true
}
const closePaymentModal = () => {
paymentModalInput.value = false
}
</script>
I recently started building a simple web app using the following tools:
Vue.js
Carbon Design System
The next step is to include a mailing list. I would like to add a simple form with two components: a text box and a subscribe button.
I am backend agnostic and considered using MailChimp or SendGrid. However I run into the following issue. Both MailChimp and SendGrid allow the user to generate custom forms in HTML that can be copied to your webpage. The issue is that the style doesn't match the Carbon Design System. I would like to use the official components cv-button instead of the standard button for instance.
I tried two approaches to address the issue. First I fiddled with css styling. This is not the way to go as my Carbon Design System uses scss instead of css and setting a custom css for just this form will inevitably lead to an inconsistent design in the future.
Secondly I tried working with both MailChimp and SendGrid APIs directly. This however is a tedious and time consuming endeavour. Moreover it introduces a lot of complexity to the project.
My question: What is the best practice when it comes to including a subscription button to a node js (vue.js) app and third party email marketing solution (mailchimp / sendgrid) that is consistent with a custom design system.
This is my current mailchimp code:
<template>
<div>
<!-- Begin Mailchimp Signup Form -->
<link
href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css"
rel="stylesheet"
type="text/css"
/>
<div id="mc_embed_signup">
<form
action="https://pm.us1.list-manage.com/subscribe/post?u=5119408c70596654ef4da6c1a&id=987baf3d10"
method="post"
id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form"
class="validate"
target="_blank"
novalidate
>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Join Waiting List</label>
<input
type="email"
value=""
name="EMAIL"
class="email"
id="mce-EMAIL"
placeholder="email address"
required
/>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input
type="text"
name="b_5119408c70596654ef4da6c1a_987baf3d10"
tabindex="-1"
value=""
/>
</div>
<div class="clear">
<input
type="submit"
value="Subscribe"
name="subscribe"
id="mc-embedded-subscribe"
class="button"
/>
</div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</template>
<script>
export default {
name: "SignupForm",
components: {}
};
</script>
That renders as:
which is different than the style of official Carbon components such as cv-button etc.
Removing
<link
href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css"
rel="stylesheet"
type="text/css"
/>
should fix this
I am working on an AspNetCore 3.1 app using a scaffolded Identity. I managed to use External Identity Providers successfully, I could customize Login.cshtml and Register.cshtml using my own styling, what I want to do now is changing the pictured page below to fit my styling but I couldn't find where the view is, I am aware that aspnet core 3.x identity is not an mvc patterned anymore and that the code is inside all razor pages but I couldn't find any view or action that produce the shown elements. Please help and execuse my ignorance about razor pages if it is the reason :) . Thanks!
View I want to Customize:
My Identity Files:
I am aware that aspnet core 3.x identity is not an mvc patterned anymore and that the code is inside all razor pages but I couldn't find any view or action that produce the shown elements.
ASP.NET Core Identity is provided as a Razor Class Library in ASP.NET Core. And applications that include Identity can apply the scaffolder to selectively add the source code contained in the Identity Razor Class Library (RCL).
what I want to do now is changing the pictured page below to fit my styling but I couldn't find where the view is.
To achieve your requirement, you can add and override Account\ExternalLogin, like below.
And the content of ExternalLogin.cshtml would be same as below, you can customize it with your expected style based on your actual requirement.
#page
#model ExternalLoginModel
#{
ViewData["Title"] = "Register";
}
<h1>#ViewData["Title"]</h1>
<h4>Associate your #Model.LoginProvider account.</h4>
<hr />
<p class="text-info">
You've successfully authenticated with <strong>#Model.LoginProvider</strong>.
Please enter an email address for this site below and click the Register button to finish
logging in.
</p>
<div class="row">
<div class="col-md-4">
<form asp-page-handler="Confirmation" asp-route-returnUrl="#Model.ReturnUrl" method="post">
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
I was trying to use a DateTimePicker in the Asp.net core Razor page.
I searched the internet and found this page seems works good.
So, I went to the NuPackage and found Bootstrap.v3.datetimepicker 4.17.45, and downloaded it.
After install, I got a warning:
Bootstrap.v3.Datetimepicker 4.17.45 depends on bootstrap.less (>= 3.3.0) but bootstrap.less 3.3.0 was not found. An approximate best match of bootstrap.less 3.3.5 was resolved.
Since the bootstrap version in the project is 3.3.5, and it is a warning instead an error, so I think it should be fine. I copied the sample code into my cshtml file, and run it.
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
The DateTimePicker showed up. How ever, when I clicked on the calendar button, nothing happened. It seems javascript is not running?
I searched everywhere, and I found this part in the layout page.
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
It seems I need to include the js file which contains the datetimepicker here. However, I search the whole project, cannot find any js file contains 'datetimepicker' string.
I am not familiar with front-end structure. what I did wrong or missing? Is my datetimepicker installation not success? is the js script not working on my razor page? How do I diagnose it?
Added:
I enabled the javascript debugging, and I got the following exception. It looks really wired as exception comes from the sample code, which runs with no problem on the original webpage.
The DateTimePicker.js NuGet package itself will be in the %UserProfile%\.nuget\packages directory if you need to get the javascript files.You could copy it in your project and add #section Scripts { and } in your project.
The better way is to use either LibMan or npm to get your client-side libraries.
Here is a simple sample in my project as below.Anyway,the version up to you:
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
#section Scripts
{
<link rel="stylesheet" href="~/lib/bootstrap/3.3.0/content/Content/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/3.3.0/content/Content/bootstrap-theme.min.css" />
<script type="text/javascript" src="~/lib/jquery/1.9.1/Content/Scripts/jquery-1.9.1.js"></script>
<script src="~/lib/moment.js/2.9.0/Content/Scripts/moment.min.js"></script>
<script src="~/lib/bootstrap/3.3.0/content/Scripts/bootstrap.min.js"></script>
<script src="~/lib/bootstrap.v3.datetimepicker/4.17.45/content/Scripts/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
}
Note: moment.js should render before the datetimepicker.js
I want to create a static header, with some links that change a vue app like a SPA. I know how to do this within the main app, but how can it be achieved outside of it, in a static header for example?
App being the main vue instance.
<body>
<div id="header">
</div>
<div id="#app"></div>
</body>
As claimed in the comments you can simply put your static header inside your app
<div id="#app">
<!-- static -->
<div id="header">
<router-link to="" id="link_to_change_app_view" />
</div>
<!-- dynamic -->
<router-view></router-view>
</div>