I am trying to get Quill up and running for an app I am creating. I have been following the docs and examples, but cannot seem to get consistent behavior when attempting to implement a full-featured editor. After working with some examples I found one which would work for some of the features but not others, otoh, I found another which worked for the features which were missing on the first, but not the others (confusing I know, I will explain in more detail below.)
I worked with these two examples, paring them down, and making them as similar as possible to try to pinpoint the differences. When it finally came down to it, the very slight difference in code is inexplicable to me why I get the results I am getting.
In the first example, I am able to generate a toolbar which contains a color palate and a background-color palate. Both work as they should. However, none of the other toolbar items appear, eg, bold, italic, underline, etc.
In the second example, I can generate a toolbar in which all of the expected toolbar items appear. However, the color and background-color select menus appear only in raw form with no styling. Moreover, no text appears for the options, and clicking on an option does nothing.
I am assuming the "snow" theme is responsible for displaying the basic tools.
Here are screenshots, in order as described:
https://postimg.cc/image/ioib9r8qp/
https://postimg.cc/image/4i2kej5ld/
This is the part that is baffling to me. Here is the code for the first file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Quill Test</title>
<link rel="stylesheet" href="http://cdn.quilljs.com/1.0.0-rc.4/quill.snow.css" rel="stylesheet">
<script src="http://cdn.quilljs.com/1.0.0-rc.4/quill.js"></script>
<style>
#editor-container {
height: 375px;
color: #000;
}
</style>
</head>
<body>
<div id='toolbar-container'>
<span class="ql-formats">
<select class="ql-color" title="Colour">
<option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"/>
<option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"/>
<option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"/>
<option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"/>
<option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"/>
</select>
<select title="Background Color" class="ql-background" defaultValue="rgb(255, 255, 255)">
<option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"/>
<option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"/>
<option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"/>
<option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"/>
<option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"/>
</select>
</span>
</div>
<div id="editor-container">
<p><br></p>
</div>
<script>
var quill = new Quill('#editor-container', {
theme: 'snow',
modules: {
toolbar: '#toolbar-container'
}
});
</script>
</body>
</html>
The code for the second file is EXACTLY the same, with the only exception, in the script block at the end it is this:
<script>
var quill = new Quill('#editor-container', {
theme: 'snow'
});
quill.addModule('toolbar', {
container: '#toolbar-container' // Selector for toolbar container
});
</script>
Apparently there is some difference between calling addModule on the quill object, and defining the modules object in the constructor. What doesn't make sense to me however, is in both cases, the "snow" theme is defined in the constructor, yet why in the first case is it not rendered?
Okay, I think I've figured it out. First of all, Quill.addModule is not defined in the version of quill I am linking to.
Second of all, apparently, defining modules in the constructor means that I now have to define all the items in the toolbar, in the HTML, assigning each of them to the proper ql- class.
Apparently not defining modules renders a more basic toolbar. I am wondering if there is code that can be defined in the constructor which would generate the additional toolbar items (eg, color palate and background-color palate) without having to explicitly put it all in HTML.
Related
I'm using toggle checkboxes by Semantic React UI.
The background color of a checkbox is defined in their styles here :
.ui.toggle.checkbox input:checked~.box:before, .ui.toggle.checkbox input:checked~label:before {
background-color: #2185d0!important;
}
... But I would like to be able to set a prop that would change that color, like
<Checkbox toggle toggleColor="red"/>
Could I extend that component to achieve that, or is there another way to achieve this ?
Thanks !
Yes you can, but it is not pretty!
I have a solution that works with semantic-ui and is heavily tested. I assume that it also works with semantic-ui-react but did not test extensively.
First, a color feature for checkboxes is missing from semantic-ui (as far as I can see, there is no documentation about it at least). So you need to use CSS to define your colors. All your colors! So if you have a lot you might to want SASS or something. Also you might want to make a feature request with semantic-ui.
Second, my solution uses the label of the checkbox to color the checkbox. I am fully aware that this is not pretty but this is apparently the only way to do this without too much additional code or even more ugly methods.
Add this to your code (please note, stackoverflow does not render this example properly since the <link rel="stylesheet" href="../semantic_ui/dist/semantic.min.css">is obviously missing. If there is a way to add this on this side please let me know.)
.ui.toggle.checkbox input:focus:checked ~ .box:before,
.ui.toggle.checkbox input:focus:checked ~ .coloring.black:before,
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.black:before {
background: #000000 !important;
}
.ui.toggle.checkbox input:focus:checked ~ .coloring.white:before,
.ui.toggle.checkbox input:checked ~ .coloring.white:before {
background: #FFFFFF !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.js"></script>
<div class="ui segment">
<div class="ui attached icon form" id="info_input_form">
<div class="ui toggle checkbox">
<input type="checkbox" tabindex="0">
<label class="coloring black">Toggle</label>
</div>
</div>
</div>
Using the polymer paper-swatch-picker, I'm trying to change an icon but it is not getting updated.
In the below there is the CSS code which I have used to change icon. Is it correct?
HTML:
<paper-swatch-picker class="fancy"></paper-swatch-picker>
CSS:
paper-swatch-picker.fancy {
--paper-swatch-picker-color-size: 10px; -- works
--paper-swatch-picker-icon-size: 40px; -- works
--paper-swatch-picker-icon: {
'icon':'menu' -- not works(icon not getting changed)
}
}
You can use the attributes icon to change it instead of CSS. But you need to import the iron-icons/iron-icons.html first, according to the set you use. In this case, you are using menu icon, which belongs to the default set iron-icons.html. For example, maps:...something will belong to iron-icons/maps-icons.html
<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-swatch-picker/v2.2.0/paper-swatch-picker/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-swatch-picker.html">
<link rel="import" href="../neon-animation/web-animations.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<style>
paper-swatch-picker {
margin: 0 10px;
}
</style>
<!-- Customized color swatch -->
<paper-swatch-picker icon="menu" color="#E91E63"></paper-swatch-picker>
I have also written an article featuring the top color picker web components, including paper-swatch-picker as well. Here's the link if you want to read.
My question is in regard of best practice / preferred readability in Angular 1.X with ng-show and ng-hide.
When using ng-hide and ng-show, is it advised to stick to one and to alternate the value I am evaluating or should i alternate between the two in order to keep the value in the expression the same?
See the following examples. Is one preferred over the other and if so why?
Assume that there are only two states, sportSelected can be Hockey or Football that is it, so there are two states.
Using only ng-show and switching the value
<div class="col-xs-4" ng-show="vm.sportSelected=='hockey'">
NJ Devils
</div>
<div class="col-xs-4" ng-show="vm.sportSelected=='football'">
NY Jets
</div>
<div class="col-xs-4" ng-show="vm.sportSelected=='football'">
NY Giants
</div>
Alternating between ng-show and ng-hide to keep the value the same
<div class="col-xs-4" ng-show="vm.isHockeySelected">
NJ Devils
</div>
<div class="col-xs-4" ng-hide="vm.isHockeySelected">
NY Jets
</div>
<div class="col-xs-4" ng-hide="vm.isHockeySelected">
NY Giants
</div>
The top seems more clear to me but it could just be due to poor method and variable names. I am looking through the angular documentation and I cant seem to arrive at what the preferred result is. Is one preferred over the other?
Edit: Flagged this to be closed, I realized this is pretty opinion based like tabs vs spaces even though I think one solution has benefits over the other
ng-hide and ng-show both work in different ways. They are essentially CSS classes which either hide or show the specified div, depending on how the value evaluates.
<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="myValue"></div>
if myValue evaluates to true then the div would be visible
<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="myValue" class="ng-hide"></div>
however, in the second example, the div would be hidden as the class is set to that of ng-hide.
also you can run ng-show or ng-hide to check if the value evaluates to false, like so: <div ng-show="!myValue"></div>
Due to the nature of the digest cycle in Angular, these checks will be ran on page load. If you do not want the div to be shown on the page, it can be recommendable to use ng-if, rather than ng-show or ng-hide, as it will not load on the page, as opposed to simply hiding it.
In the snippet below you will see an example working for both ng-hide and ng-show, using the value of the ng-model value response of the input checkbox 'checked'. Which gives a boolean response.
When it is clicked on, the value for 'checked' evaluates to true. When it is unclicked, the value evaluates to false. When the ng-model evaluates to false, it shows the ng-hide div, when the ng-model evalutes to true, it shows the ng-show div.
Further reading here: Angular ng-show documentation
#import url(../../components/bootstrap-3.1.1/css/bootstrap.css);
.animate-show {
line-height: 20px;
opacity: 1;
padding: 10px;
border: 1px solid black;
background: white;
}
.animate-show.ng-hide-add, .animate-show.ng-hide-remove {
transition: all linear 0.5s;
}
.animate-show.ng-hide {
line-height: 0;
opacity: 0;
padding: 0 10px;
}
.check-element {
padding: 10px;
border: 1px solid black;
background: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ng-show-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
</head>
<body ng-app="ngAnimate">
Click me: <input type="checkbox" ng-model="checked" aria-label="Toggle ngHide"><br/>
<div>
Show:
<div class="check-element animate-show" ng-show="checked">
<span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
</div>
</div>
<div>
Hide:
<div class="check-element animate-show" ng-hide="checked">
<span class="glyphicon glyphicon-thumbs-down"></span> I hide when your checkbox is checked.
</div>
</div>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
Whether or not you use ng-hide or ng-show should be based on how you want the page to appear by default. If you are controlling the visibility of an element that will be hidden by default and only shown after the user completes some action (like selecting a sport), then you want to use ng-show. If the element is to be shown by default and only hidden after some user action (maybe a div that says 'select a sport' that disappears once a sport is selected), then you want to use ng-hide.
Using the directives this way will contribute more toward readability than worrying about how the boolean condition itself is specified. It also has an important practical benefit. If you use ng-hide for something that is supposed to be hidden by default, you might see the element flicker each time you load the page, because in early $digest cycles before your scope can be fully evaluated, the result of that condition will be falsy, which will cause the element to appear briefly before it disappears.
You've got the right idea in the top example (looks like you have a syntax issue with the quotes though).
I have implemented form using angualr-material, I can't find any standard ways to change default color coding in material.
form
<div class="col-xs-12 testFormLabel">
<md-input-container class="testLabel">
<label>Reason</label>
<input name="reasonBox" id="reasonBox" ng-model="obj. reasonBox" ng-required="true">
</md-input-container>
</div>
css
.md-input-has-value. testLabel > input {
color:#008cba;
}
Problem
How can i change auto focus label name and underline to different color ( let say from dark blue to green )
You can use this selector to change the input:
md-input-container:not(.md-input-invalid).md-input-focused .md-input {
border-color: red
}
Use this to change the label:
md-input-container:not(.md-input-invalid).md-input-focused label {
color: red
}
Include this after you include the css for angular material.
I got this by going to the docs page here: https://material.angularjs.org/latest/demo/input
Looking at their demo, and inspecting a focused input.
You can also use <md-input-container [dividerColor]="primary|accent|warn"> to set the color when the field is in focus.
From the docs...
The divider (line under the input content) color can be changed by using the dividerColor attribute of md-input-container. A value of primary is the default and will correspond to the theme primary color. Alternatively, accent or warn can be specified to use the theme's accent or warn color.
I have a html page with this code
<p id="roonnameDiv" >{{chatRoom}}</p>
and an app.js with the following code . It reflects the value corrrectly but if I try to style it with color at runtime it doesnt not reflect on the html page
$scope.$parent.chatRoom = $stateParams.roomId;
$scope.$parent.chatRoom.style = {"color":"green"};
I even tried using ng-color but in vain . Have head using html-unsafe tags t add html5 code to angular variables at runtime , perhaps I could use that to provide style of element but could not find any examples .
Essentially the requirement is of having various styled ( color ,size and fonts ) in roonnameDiv using angular framework
..................Edit .............................
I used the ngstyle as suggested by answers below
$scope.$parent.chatRoom = $stateParams.roomId;
$scope.myStyle = {color: "green"};
however the output text was just plain grey . On exploring it thorugh chorome inspector , I found it is inheriting some styles through body.
Switching off the body color tag just turns the text black instead of green .
Following is the body
<body ng-app="xyz" ng-controller="AppController" class="ng-scope">
This is the body style
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
I want specific style class to apply for different text components without affetcting the overall body style . Could you suggest how to do so ?
You can use ng-style directive.
In Markup
<p id="roonnameDiv" ng-style="myStyle">{{chatRoom}}</p>
In controller
$scope.myStyle = {color: "green", background: "blue"} // Write all the required styles here.
More on ng-style directive at: https://docs.angularjs.org/api/ng/directive/ngStyle
try this
<p id="roonnameDiv" ng-style="chatRoom.style" >{{chatRoom}}</p>