I’m not seeing it. You don’t need to add the CSS to your page, but the markup.
Remove this:
<style>
.ql-editor .ql-align-right {
text-align: right;
}
</style>
And wrap the outputted markup in this:
<div class="ql-editor">
<!-- Outputted Markup here -->
</div>
YES!!! That did it - nice going!
It also aligns images correctly too. However, the font style always outputs to Sans Serif, but the monospace works - mystery there because using the div should probably work there too.
Sorry- meant to say output of text outputs to Serif - not Sans Serif.
Are you sure? Both work for me — serif and sans serif.
Here is editor view:
This is Output view:
Using FF and both output text is Serif. Is doesn’t recognize San Serif for the output text.
Also, with
<div class="ql-editor">
…and without the div
So you can see that with the div the spacing is greater distance from the Welcome. Holds true for normal paragraphs. Seems like the spacing is rather larger than normal.
Would you recommend to have squill.snow (the css file) reside on my server and that way I could make some of these changes to the paragraph property, etc?
Wanted to give you an update on the top and bottom alignment issue where the spacing was too much. What fixed the issue was using a separate CSS file for the output page making the margins like this:
margin-top: -25px;
margin-bottom: -45px;Also changed some padding px too.
The real issue was that it looked fine in the editor but once it was drawn to the page the padding and margins weren’t right. So having separate CSS did the trick.
Only issue now is the fonts don’t output right but I can sort of fix that by not having that option available in the editor and then fix the output page to a specific font.
I want to again thank you for all of your assistance; without your help I would have totally been lost in the process and I do believe I learned a bit!
Thank you!
Hi,
Sorry for disappearing—was very busy with work.
I think this is the best idea. Use the default CSS styles as far as you can, but the moment they don’t behave as they should, declare something more specific for your output page.
Ok, I just need to understand this properly.
This is my text in the editor:
This is the text on the output page:
This is the source of the output page.
<h1>Some Sans Serif Text</h1>
<h1><span class="ql-font-serif">Some Serif Text</span></h1>
<h1><span class="ql-font-monospace">Some monospaced text</span></h1>
As you can see, the Sans Serif text has no styling applied to it, so you’d need to add this yourself. As far as I can tell, the other two display correctly.
Based on the above, can you re-phrase what the problem is.
I think what you stated is correct. The only one that doesn’t work is the Sans. Serif Text. I will try to see if I can get that formatted.
I discovered another issues last night - the justify only works in Chrome and not in FF or Edge or IE.
text-align: justify;Lots of information about that not working when doing searches for answers but can’t find any solutions. Do you know of any?
Also looking for a way to use an alt image text hovering over the tool bar icons - as it is in the Sitepoint editor. Would you know how to do alt image text in Quill? I can’t find anything or get anything to work.
Thanks!
Like this?
Thank you for that.
I can’t seem to merge what I currently have, without error, with what is in Code pen.
Here is code pen:
$(document).ready(function() {
var quill = new Quill('#editor-container', {
modules: {
toolbar: '#toolbar-container'
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
// Enable all tooltips
$('[data-toggle="tooltip"]').tooltip();
// Can control programmatically too
$('.ql-italic').mouseover();
setTimeout(function() {
$('.ql-italic').mouseout();
}, 2500);
});This is what I have:
// Fetch content from database here
var editorContent = '<%=rs("myHtml")%>';
var editor = document.getElementById('editor-container');
var hiddenInput = document.getElementById('myHtml');
var form = document.forms.mainform;
var quill = new Quill(editor, {
modules: {
syntax: true,
toolbar: '#toolbar-container'
},
placeholder: Compose an epic...',
theme: 'snow'
});
editor.firstChild.innerHTML = editorContent;All I can come up with is a partial looking tool bar - so an obvious error on my part.
I don’t know if it is this that is throwing it off or not - but that would be new in my code:
$(document).ready(function() {Oh yeah, sorry — the demo requires Bootstrap for the tooltips to work.
I can’t take credit for teh demo either, I just found it on the project’s homepage.
Anyway, here’s the full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quill with tooltips</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
<style>
#content-container {
margin: 25px auto;
width: 400px;
}
#editor-container {
height: 100px;
}
</style>
</head>
<body>
<div id="content-container">
<div id="toolbar-container">
<button class="ql-bold" data-toggle="tooltip" data-placement="bottom" title="Bold"></button>
<button class="ql-italic" data-toggle="tooltip" data-placement="bottom" title="Add italic text <cmd+i>"></button>
</div>
<div id="editor-container"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
$(document).ready(function() {
var quill = new Quill('#editor-container', {
modules: {
toolbar: '#toolbar-container'
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
// Enable all tooltips
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
The whole subject is also discussed on this GitHub issue:
I have tired hours of combinations and even though I can get the code you provided to work - as is - when I add this to my file I lose all table formatting underneath the editor:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">I also can’t get the database info to drawn to the page.
I think there must be some conflicts was the bootsrap coding.
Also, there is more css and scripting on the one that works currently vs the newest one.
I was hoping there was another way of adding the alt images, but perhaps not. I know I couldn’t get anything to work.
Thanks though for finding that code because I couldn’t find it with all of my searches, but I think it’s easier to leave well enough alone and not be concerned about the alt images.
Figured out another way, actually it works easier with less coding this way:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
font-family: consolas,monospace;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
} <div class="tooltip">
<span class="tooltiptext">Bold</span>
<button class="ql-bold"></button>
</div>Produces this:
When you hover over it, it show this:
To remove the dotted line:
border-bottom: 0px dotted black;This way - less code - and simpler.
Change to:
position: absolute;
bottom: 25px;
z-index: 1;Then you get this when you hoover over bold - then you can do same for all.
Bootstrap is a bit of a beast and adds a load of styles to the page that could potentially conflict with the pre-existing ones.
Yeah, I just wanted to show you a demo of the tooltips working. That wasn’t intended to be a replacement for the code you have.
Fantastic! This would have been my advice—just try and extract the styles you need from the Bootstrap package.
Hoooowever, saying this, when I posted my answer on Friday, I just Googled “Quill tooltips” and linked you to the first thing I found. Looking at this again on Sunday morning, it seems a tad heavy to include jQuery and the Bootstrap JS library for the sake of this functionality.
Also, and this is something I was unaware of, it seems that using the title attribute for tooltips has usability implications:
So, here’s the same demo using a smaller, dedicated library (Tippy.js). See what you think:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quill with tooltips</title>
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
<style>
#content-container {
margin: 25px auto;
width: 400px;
}
#editor-container {
height: 100px;
}
</style>
</head>
<body>
<div id="content-container">
<div id="toolbar-container">
<button class="ql-bold" data-tippy-content="Bold"></button>
<button class="ql-italic" data-tippy-content="Add italic text"></button>
</div>
<div id="editor-container"></div>
</div>
<script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@4"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
var quill = new Quill('#editor-container', {
modules: {
toolbar: '#toolbar-container'
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
// Enable all tooltips
tippy('button');
</script>
</body>
</html>
The only thing I couldn’t figure out off the bat was how to have the angle brackets display in the tooltip, so this:
title="Add italic text <cmd+i>"
became this:
data-tippy-content="Add italic text"
Thank you, I will look into that; for now it seems to work.
I will look at it for sure, thanks!
Since there is a problem with justify, except for Chrome, I have eliminated that with using a dropdown, without justify, in the toolbar.
Do you know how to make this work on mobiles?
input.setAttribute('type', 'file');I know that accept="image/* works for type=“file” for normal uploads, but I can’t figure out how to upload on mobiles with the ajax. I tried to change file to images and it doesn’t work.
Thanks!
It should work, as is. You’d need to set up some kind of remote debugging to find out what is going on.
I should clarify, it opens up but it only allows Camera, Camcorder, Voice Recorder and Documents as a selection - not the photo album. I had the same issue with the regular uploader until I added accept="image/*
<input type="file" name="file" style="width:400" accept="image/*">I will check that out.
Ah ok, I misunderstood. In that case, remote debugging probably won’t help much.
I’m a bit busy today, but let me know how you get on with that. It’s not a problem that I have ever encountered, so don’t have any suggestions off the bat.