I have multiple instances of CKEditor 5 and I want to add button which will change the height of texteditor. In order to do so I have to change height of a single instance, is that possible and if yes, how?
Side note:
I want to make maximize button like in CKEditor 4. Is there plugin for that or I have to make it myself?
Maximize Feature - From what I have checked it has not been implemented yet. CKEditor has a ticket ofr it: https://github.com/ckeditor/ckeditor5/issues/1235
Editor Height - This link explains How to set the height of CKEditor 5 (Classic Editor) explains how to do this permanently. If however you want to do change editor height dynamically with a button, you need to use a small trick where you assign a CSS class not directly to content area but to its container (notice .ck-small-editor .ck-content in css class and document.getElementsByClassName( 'ck-editor' )[ 0 ] in JavaScript ):
ClassicEditor
.create( document.querySelector( '#editor' ), {
} )
.then( editor => {
window.editor = editor;
// Assign small size to editor using CSS class in styles and button in HTML
const editable = editor.ui.getEditableElement();
document.getElementById( 'change-height' ).addEventListener( 'click', () => {
document.getElementsByClassName( 'ck-editor' )[ 0 ].classList.toggle( 'ck-small-editor' );
} );
} )
.catch( err => {
console.error( err.stack );
} );
.ck-small-editor .ck-content {
min-height: 50px !important;
height: 50px;
overflow: scroll !important;
}
<script src="https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js"></script>
<div id="editor">
<h2>The three greatest things you learn from traveling</h2>
<p>Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.</p>
<h3>Appreciation of diversity</h3>
<p>Getting used to an entirely different culture can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person. You learn to appreciate each and every single one of the differences while you become more culturally fluid.</p>
<h3>Confidence</h3>
<p>Going to a new place can be quite terrifying. While change and uncertainty makes us scared, traveling teaches us how ridiculous it is to be afraid of something before it happens. The moment you face your fear and see there was nothing to be afraid of, is the moment you discover bliss.</p>
</div>
<div>
<button type="button" id="change-height">Change Height</button>
</div>
Related
So I am trying to display a transition with ReactCSSTransitionGroup on load of the home page. It is to display a list of items below the jumbotron. This items come from Redux store. They are passed from a container component called home_index.js that is aware of Redux Store. The component itself 'poll-list.js' contains poll-links, the items to be transitioned in; it (and its child) is a DUMB component. Meaning, it has no state nor is it aware of redux store. (Can these components even use ReactCSSTransitionGroup?)
In any case, I cannot, for the life of me, get this fade in transition to work. I know I must be doing something wrong...but cannot figure it out.
const appearTransition = {
transitionName: "fade",
transitionLeave: false,
transitionEnter: false,
transitionAppear: true,
transitionAppearTimeout: 2500
};
let polls;
if (props.pollsList) {
polls = props.pollsList.map((poll, ind) => {
return (
<PollLink
className='poll-link'
title={poll.title}
index={ind}
id={poll.id}
key={ind}
/>
)
});
}
return (
<div className='poll-list'>
<ReactCSSTransitionGroup {...appearTransition}>
{props.pollsList.length > 0 ? polls : null}
</ReactCSSTransitionGroup>
</div>
)
}
And here is the CSS (note I am not doing a Leave, and I have set Appear to true, i just want this to happen on initial load of the home page)
.fade-appear {
opacity: 0.01;
#include prefix(transition, (opacity 2500ms), webkit ms moz o);
}
.fade-appear.fade-appear-active {
opacity: 1;
}
Also, putting ReactCSSTransitionGroup at this level, in this element, makes my flexbox get all weird. The components are no longer in columns of 4 (or however many based on screen width), they are in one single column down the center...
Where do I put the transition group HOC?
Hierarchy:
<HomeIndex>
<Poll-List>
<Poll-Links>
You can simply add this style in your css file, try to remove the hyphen between class name and make it in camelcasing:
.fadeAppear {
opacity: 1;
transition: opacity 0.3s ease-in;-webkit-transition: opacity 0.3s ease-in;
}
import your css file in your redux code,
#import mycss from '../path/style.css'
and add the given class in css in wherever needed.
as:
return (
<div className='poll-list'>
<ReactCSSTransitionGroup className={mycss.fadeAppear} >
{props.pollsList.length > 0 ? polls : null}
</ReactCSSTransitionGroup>
</div>
)
Hope this works!
I'm using animate.css to add some transistions to my meteor app. However, there is this problem that animate.css creates an almost transparant overlay over my buttons/images etc.
I have a main div where the animate.css class is added depending on changing page views etc. Very simplified this is my HTML.
<body>
<header class="header></header>
<div class="animate-holder {{animated class}}>
<div class="class1></div>
<div class="class2></div>
</div>
</body>
From what I've tested this will happen all the time and it doesn't matter how I use transistions. Is there a simple way to NOT have this overlay?
EDIT:
I can hack it like this, but this is very very ugly. But maybe it creates more insight into the problem:
Template.DetailsSubmit.rendered = function() {
Meteor.setTimeout(function() {
var classes = $('div.animated').attr('class');
$('div.animated').removeClass(classes);
}, 1000)
}
You can make this specific div clickable through using the very useful (and not famous enough) pointer-events css property:
div.animated {
pointer-events: none;
}
How can I disable kendo editor or make it read only? I tried using HTML attribute but no luck ( or I still do it right)
#(Html.Kendo().Editor()
.Name("Text")
.Value(#detail.SRoomInformation)
.Tools(tools => tools.Clear())
)
If you are wondering why there is no such option such as Enable/Disable - because html could be simply shown as html or as text - all the tools the Editor provide are not needed and it is pointless to use such widget. Editor means it helps you edit ;)
If you really want to make it disabled you can use the following line of code after initializing the Editor
e.g.
#Html.Kendo().Editor().Name("test")
<script type="text/javascript">
$(function () {
$($('#test').data().kendoEditor.body).attr('contenteditable', false)
})
</script>
No Idea why the answered question didn't work for me. But anyway, it sparked something like:
#(Html.Kendo().EditorFor(model => model.Description) )
#Html.ValidationMessageFor(model => model.Description)
<script>
// this piece of code neeeeeeeds to be heeeeere! Don't move it
$(document).ready(function () {
var editor = $('#Description').data('kendoEditor');
editor.body.contentEditable=false;
});
</script>
And this worked!:) Have fun!
None of the above solutions worked for me when I tried to implement them. It seems that Telerik has provided an extremely simple solution to this involving an overlaid div as documented at: http://docs.telerik.com/kendo-ui/controls/editors/editor/how-to/enable-and-disable-editor
In practice this resulted in an extra div next to the control I wanted to disable:
<div ng-if="readonly/disabled_Condition == true">
<div id="overlay" style="width:100%;height:250px; top:100; position:absolute; background-color: black; opacity:0.1; z-index:2;"></div>
<textarea kendo-editor k-options="options.DutyEditor" ng-model="item.TasksHtml"></textarea>
</div>
The one issue is matching up the size of the overlaid div to the size of your kendo editor. In my case it's a simple 100% width and 250px height, so I lucked out here.
Thought this might help someone!
The text-overflow:ellipsis; CSS property must be one of the few things that Microsoft has done right for the web.
All the other browsers now support it... except Firefox.
The Firefox developers have been arguing over it since 2005 but despite the obvious demand for it, they can't seem to actually bring themselves to implement it (even an experimental -moz- implementation would be sufficient).
A few years ago, someone worked out a way to hack Firefox 3 to make it support an ellipsis. The hack uses the -moz-binding feature to implement it using XUL. Quite a number of sites are now using this hack.
The bad news? Firefox 4 is removing the -moz-binding feature, which means this hack won't work any more.
So as soon as Firefox 4 is released (later this month, I hear), we're going to be back to the problem of having it not being able to support this feature.
So my question is: Is there any other way around this? (I'm trying to avoid falling back to a Javascript solution if at all possible)
[EDIT]
Lots of up-votes, so I'm obviously not the only one who wants to know, but I've got one answer so far which basically says 'use javascript'. I'm still hoping for a solution that will either not need JS at all, or at worst only use it as a fall-back where the CSS feature doesn't work. So I'm going to post a bounty on the question, on the off chance that someone, somewhere has found an answer.
[EDIT]
An update: Firefox has gone into rapid development mode, but despite FF5 now being released this feature still isn't supported. And now that the majority of users have upgraded from FF3.6, the hack is no longer a solution. The good news I'm told that it might be added to Firefox 6, which with the new release schedule should be out in only a few months. If that's the case, then I guess I can wait it out, but it's a shame they couldn't have sorted it sooner.
[FINAL EDIT]
I see that the ellipsis feature has finally been added to Firefox's "Aurora Channel" (ie development version). This means that it should now be released as part of Firefox 7, which is due out toward the end of 2011. What a relief.
Release notes available here: https://developer.mozilla.org/en-US/Firefox/Releases/7
Spudley, you could achieve the same thing by writing a small JavaScript using jQuery:
var limit = 50;
var ellipsis = "...";
if( $('#limitedWidthTextBox').val().length > limit) {
// -4 to include the ellipsis size and also since it is an index
var trimmedText = $('#limitedWidthTextBox').val().substring(0, limit - 4);
trimmedText += ellipsis;
$('#limitedWidthTextBox').val(trimmedText);
}
I understand that there should be some way that all browsers support this natively (without JavaScript) but, that's what we have at this point.
EDIT
Also, you could make it more neat by attaching a css class to all those fixed width field say fixWidth
and then do something like the following:
$(document).ready(function() {
$('.fixWidth').each(function() {
var limit = 50;
var ellipsis = "...";
var text = $(this).val();
if (text.length > limit) {
// -4 to include the ellipsis size and also since it is an index
var trimmedText = text.substring(0, limit - 4);
trimmedText += ellipsis;
$(this).val(trimmedText);
}
});
});//EOF
EDIT 09/30/2011
FF7 is out, this bug is resolved and it works!
EDIT 08/29/2011
This issue is marked as resolved and will be available in FF 7; currently set to release on 09/27/2011.
Mark your calendars and get ready to remove all those hacks you've put in place.
OLD
I have another answer: wait.
The FF dev team is in hot pursuit to resolve this issue.
They have tentative fix set for Firefox 6.
Firefox 6!! When will that come
out?!?
Easy there, imaginary, over-reactive person. Firefox is on the fast dev track. FF6 is set for release six weeks after Firefox 5. Firefox 5 is set for release June 21st, 2011.
So that puts the fix sometime in the beginning of August 2011...hopefully.
You can sign up for the mailing list following the bug from the link in the original poster's question.
Or you can click here; whichever is easiest.
I must say I'm a little disappointed that the only browser specific hack in my application is going to be to support FF4. The above javascript solution doesn't account for variable width fonts. Here is a more verbose script that accounts for this. The big problem with this solution is that if the element containing the text is hidden when the code is run then the width of the box isn't known. This was a deal breaker for me so I stopped working on/testing it... but I thought I'd post it here in case it is of use to someone. Be sure to test it well as my testing was less than exhaustive. I intended to add a browser check to only run the code for FF4 and let all the other browsers use their existing solution.
This should be available for fiddling here:
http://jsfiddle.net/kn9Qg/130/
HTML:
<div id="test">hello World</div>
CSS:
#test {
margin-top: 20px;
width: 68px;
overflow: hidden;
white-space: nowrap;
border: 1px solid green;
}
Javascript (uses jQuery)
function ellipsify($c){
// <div $c> content container (passed)
// <div $b> bounds
// <div $o> outer
// <span $i> inner
// </div>
// <span $d></span> dots
// </div>
// </div>
var $i = $('<span>' + $c.html() + '</span>');
var $d = $('<span>...</span>');
var $o = $('<div></div>');
var $b = $('<div></div>');
$b.css( {
'white-space' : "nowrap",
'display' : "block",
'overflow': "hidden"
}).attr('title', $c.html());
$o.css({
'overflow' : "hidden",
'width' : "100%",
'float' : "left"
});
$c.html('').append($b.append( $o.append($i)).append($d));
function getWidth($w){
return parseInt( $w.css('width').replace('px', '') );
}
if (getWidth($o) < getWidth($i))
{
while (getWidth($i) > (getWidth($b) - getWidth($d)) )
{
var content = $i.html();
$i.html(content.substr(0, content.length - 1));
}
$o.css('width', (getWidth($b) - getWidth($d)) + 'px');
}
else
{
var content = $i.html();
$c.empty().html(content);
}
}
It would be called like:
$(function(){
ellipsify($('#test'));
});
I have run into this gremlin over the past week as well.
Since the accepted solution does not account for variable width fonts and wwwhack's solution has a While Loop, I will throw in my $.02.
I was able to drastically reduce the processing time of my problem by using cross-multiplication. Basically, we have a formula that looks like this:
The variable x in this case is what we need to solve. When returned as an Integer, it will give the new length that the over-flowing text should be. I multiplied the MaxLength by 80% to give the ellipses enough room to show.
Here is a full html example:
<html>
<head>
<!-- CSS setting the width of the DIV elements for the table columns. Assume that these widths could change. -->
<style type="text/css">
.div1 { overflow: hidden; white-space: nowrap; width: 80px; }
.div2 { overflow: hidden; white-space: nowrap; width: 150px; }
.div3 { overflow: hidden; white-space: nowrap; width: 70px; }
</style>
<!-- Make a call to Google jQuery to run the javascript below.
NOTE: jQuery is NOT necessary for the ellipses javascript to work; including jQuery to make this example work -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Loop through each DIV element
$('div').each(function(index) {
var myDiv = this; //The original Div element which will have a nodeType of 1 (e.g. ELEMENT_NODE)
var divText = myDiv; //Variable used to obtain the text from the DIV element above
//Get the nodeType of 3 (e.g. TEXT_NODE) from the DIV element. For this example, it will always be the firstChild
divText = divText.firstChild;
//Create another variable to hold the display text
var sDisplayText = divText.nodeValue;
//Determine if the DIV element is longer than it's supposed to be.
if (myDiv.scrollWidth > myDiv.offsetWidth) {
//Percentage Factor is just a way of determining how much text should be removed to append the ellipses
//With variable width fonts, there's no magic number, but 80%, should give you enough room
var percentageFactor = .8;
//This is where the magic happens.
var sliceFactor = ((myDiv.offsetWidth * percentageFactor) * sDisplayText.length) / myDiv.scrollWidth;
sliceFactor = parseInt(sliceFactor); //Get the value as an Integer
sDisplayText = sDisplayText.slice(0, sliceFactor) + "..."; //Append the ellipses
divText.nodeValue = sDisplayText; //Set the nodeValue of the Display Text
}
});
});
</script>
</head>
<body>
<table border="0">
<tr>
<td><div class="div1">Short Value</div></td>
<td><div class="div2">The quick brown fox jumps over the lazy dog; lots and lots of times</div></td>
<td><div class="div3">Prince</div></td>
</tr>
<tr>
<td><div class="div1">Longer Value</div></td>
<td><div class="div2">For score and seven year ago</div></td>
<td><div class="div3">Brown, James</div></td>
</tr>
<tr>
<td><div class="div1">Even Long Td and Div Value</div></td>
<td><div class="div2">Once upon a time</div></td>
<td><div class="div3">Schwarzenegger, Arnold</div></td>
</tr>
</table>
</body>
</html>
I understand this is a JS only fix, but until Mozilla fixes the bug, I'm just not smart enough to come up with a CSS solution.
This example works best for me because the JS is called every time a grid loads in our application. The column-width for each grid vary and we have no control over what type of computer our Firefox users view our app (which, of course, we shouldn't have that control :) ).
This pure CSS solution is really close, except for the fact that it causes ellipsis to appear after every line.
I have some page with something like this:
<div id="editor" contenteditable="true">SomeText</div>
I have an selfmade JS editor which actually issues
document.execCommand(some_command,false,optional_value);
when user presses a button in the editor. (For example I have plain, simple [Bold] button).
Everything is fine as long as I apply editing to part of "SomeText". For example selecting "Text" with mouse and pressing [Bold] button (which leads to document.execCommand("bold",false,false);) will produce:
<div id="editor" contenteditable="true">Some<span style="some-css-here">Text</span></div>
but when I select entire content of the div ("SomeText" in this example) and press [Bold] in my editor, FF will not produce expected
<div id="editor" contenteditable="true"><span style="some-css-here">SomeText</span></div>
but rather
<div id="editor" contenteditable="true" style="some-css-here">SomeText</div>
Notice the "style" attribute went into the editable div!
Why this makes a difference to me?
--It's because after editing is done I would like to take the content of the editable div, along with all styles, formating etc and further use it on the page. But I can't -- all the styling now sits inside the div.
A solution when I would be advised to extract styles from the div is not acceptable -- the div during its life takes a lot of styles from other active elements of the page (heavy jQuery usage)
So in brief:
How to tell FF to never touch editable div and apply all styling to its inner contents only?
Sincere thanks for you time.
(just pulled last of my hair, browsing FF dev site along with many others(((( )
Call once before any other execCommand and switch FF to tag mode
document.execCommand('StyleWithCSS', false, false);
Sometimes organizing and writing my thoughts brings me very positive results.
I have found satisfactory solution.
1)insert hidden div as a first child node into your editing div:
<div id="editor" contenteditable="true">
<div class="edit_text_mozilla_hack"></div>
SomeText
</div>
2) The CSS for it:
.edit_text_mozilla_hack {
display: block;
width: 0;
height: 0;
-moz-user-edit: none;
-moz-user-select: none
}
3)Now you can edit. I tested it with this my small test (actually I need all this stuff to edit short pieces of text like like captions, news subjects etc)
4)Before you use the content -- obious -- remoe that div.
5)When you want to return to editing -- insert it again.
Some bits of code from working (finally! ))) project:
//adds hidden div to all editable regions 'editables'
//the parameter is for speeding the thins up -- I'm often working with all or a lot of editable regions
function editAddMozillaHack(editables) {
if (!editables) {
editables = editGetEditables();
}
$("." + adminOptions["admin_loader"]).remove();
editables.each(function() {
$(this).prepend('<div class="edit_text_mozilla_hack"></div>')
});
}
//removes the hack from all regions
function editRemoveMozillaHack() {
$(".edit_text_mozilla_hack").remove();
}
//just returns all the editable regions -- my project often requires them all
function editGetEditables() {
return $("[contenteditable=\"true\"]");
}
of course -- testing pending.
I would like to hear from you ;)
regards.
I had the similar problem, when select all in contenteditable area with mouse or use CTRL-A there and then press CTRL+B for example, Firefox put style to the contenteditable container instead it's content.
<div contenteditable="true" style="font-weight: bold;"><p>..content..</p></div>
Same applyed for italic, font size, font-family and other inline styles.
I wrote a function which fixing that issue. It creates new element below the content and changes selected range till that element:
function checkSelectAll (container, cmd, args) {
if(document.getSelection) {
var cn = container.childNodes,
s = document.getSelection(),
r = s.getRangeAt(0);
if(r.startContainer == container && r.endContainer == container){
var endMarker = document.createElement('SPAN')
container.appendChild(endMarker);
r.setEndBefore(endMarker);
s.removeAllRanges();
s.addRange(r);
document.execCommand(cmd,false,args);
container.removeChild(endMarker);
} else {
document.execCommand(cmd,false,args);
}
} else {
document.execCommand(cmd,false,args);
}
};
this code affects only FF, for other browsers it will just apply execCommand