I am trying to divide my CKEditor 5 toolbar in two pieces, far apart from each other. Here's my actual toolbar :
With the following html rendered code :
What I would like to is something like this :
toolbar: [
'heading',
'bold',
'italic',
'underline',
'=', // this is the delimiter
'alignment:left',
'alignment:right',
'alignment:center'
],
And I want to generate this code based on that delimiter :
<div style="display: flex; flex-direction: row; justify-content: space-between;">
<div>
<!-- part 1 before the = -->
</div>
<div>
<!-- part 2 after the = -->
</div>
</div>
I can't figure out how to achieve this. Anyone has an idea ?
The current ToolbarView doesn't support splitting into multiple lines.
I can think of two quite straightforward choices:
Extend ToolbarView so it can do something like this and either use it directly in your own Editor class or inject it instead of the original ToolarView just like you can inject your own icons.
Fill two separate toolbar instances and use them in your own editor class.
BTW, the simplest editor implementation you can use as a base is the DecoupledEditor which you can for instance see here: https://docs.ckeditor.com/ckeditor5/latest/examples/builds/document-editor.html
This issue is tracked in https://github.com/ckeditor/ckeditor5/issues/6146 add thumbs up to the ticket if you would like this feature to be implemented.
Related
I have tried a lot to keep a span valign middle. At the moment it looks like:
But I want that:
Here you can play around: Link
.wrapper{
display:table-row;
}
.image-left{
width:50px;
height:50px;
background-color:grey;
}
.text-block{
display:table-cell;
vertical-align:middle;
}
<div class="wrapper">
<div class="image-left">
</div>
<div class="text-block">
<span>One does not simply css.</span>
</div>
</div>
Whenever I need to align text, I tend to use display: table-cell with vertical-align:middle on the parent element of the span or the div where the text is inside.
But there are literally tons of ways to achieve this. I suggest you google a bit and see which one fits best in your situation. I just prefer table-cells since they auto adjust to all content in the row, and look clean.
Detailed info: http://phrogz.net/css/vertical-align/
Your link didnt work btw.
I'm using Algolia instantsearch.js for search, and to display my result page, I'm using Bootstrap 3, and I'd like hits to be displayed in 3 columns:
qry | hit1 | hit2
| hit3 | hit4
| hit5 | hit6
(where qry = the search query input widget)
etc..
If it's mobile, it should display as:
qry
hit1
hit2
hit3
etc.
Can someone help me with the html/css I can use to implement this?
Thanks!
Basically, you want to use bootstrap rows and grid layout col-{xs,sm,md,lg}-X (More info about the grid layout here).
One interesting property with bootstrap is that if you declare a block as being col-YY-X, if the screen width is under the dimensions YY is associated with, it automatically expands to the full width.
instantsearch.js's widgets expose a cssClasses parameter that allows you to customize the classes of the underlying markup.
To easily do two columns, all you need to do is declare the root element of the cssClasses as being a .row, and each result as a .col-sm-6 (or .col-md-6 or .col-lg-6 depending on which screen size you want it to apply).
By combining them, you can have some really interesting layouts.
See this JSFiddle
Here, I've extended a bit the idea. Try to resize the view, and you'll see that it automatically picks a number of results to display per line depending on the width by combining multiple col-YY-X classes on the hit widget.
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
empty: 'No results',
item: '<div class="hit">{{title}}</div>'
},
hitsPerPage: 6,
cssClasses: {
root: 'row',
item: 'col-lg-3 col-md-4 col-sm-6'
}
})
);
As you can see, I've also added an inner class to the item template to be able to use the item as a wrapper with padding inside to avoid having the hits glued to each other. I apply the border to the inner element, because adding margins to bootstrap grid elements is not the right solution.
The layout itself is really simple, you can just nest rows together:
<div class="container-fluid">
<div id="search" class="row">
<div class="col-sm-4">
<div id="input"></div>
</div>
<div class="col-sm-8">
<div id="hits" class="row">
</div>
</div>
</div>
</div>
How can I edit my Header info fluidcontent_core Extension. I use it instead of the 'normal' CSS_Styled_Content with FLUIDPAGES 3.1.2, FLUX 7.1.2, FLUIDCONTENT 4.1.2, FLUIDCONTENT_CORE 4.1.1 and VHS 2.1.4 - the latest versions of FLuidTYPO3.
For example, I need an additional <div class="text-center">|</div> for my <h1> Header, like this
<div class="text-center">
<h1>{textBla}</h1>
</div>
How can I add additional HTML-Code for h1 - h6 or change the labels 1,2,3,4,5,6 to Text Strings!?
In further projects I use lib.stdheader / tt_content for this case. But now it's all about FLUID. I've read the Dok, but I'm still helpless .. Thanks for your help.
the templates of content_core are all in the Private dir of the ext. itself.
If you take a look at them, you will see that the headers are rendered from a comma separated string set in the setup.ts and deflated as an array.
You can make your ow array or create your own dropdown with whatever data you like. It is flux based so almost limitless.
Thanks for your help, rob-ot! I think I've got it.
setup.ts
plugin.tx_fluidcontentcore {
settings {
header {
classNames = testheader, blatest
}
container {
classNames = hello
}
}
}
I leave the header level at constants types = 1,2,3,4,5,6 and add new classNames. For my case I add also a new container className, so my output is like:
<div class="hello">
<h1 class="blatest">
Header only level 1
</h1>
</div>
Thanks!
Below is a snippet from a sample tab control from here: http://layout.jquery-dev.net/demos/tabs.html
Those tabs inside those splitter panes are exactly what I need. But I need the tabs to be dynamically added and removed based on user interaction. Thought I could do it with composite or collection views in backbone marionette - add/remove things from the underlying collection and tabs appear and disappear in the UI.
Conceptually this shouldn't hard. But the difficulty comes in with the the dreaded extra wrapping div problem that is so discussed in various threads over the years.
Extra divs in itemviews and layouts in Backbone.Marionette
In my case, each li in my ul comes up wrapped in a it's own div. That messes up the CSS in the code snippet below. It breaks some of it, so things look weird. If I could just produce the output below, things wouldn't look weird.
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all ui-sortable" role="tablist">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-west-1" aria-labelledby="ui-id-1" aria-selected="true">
Nunc tincidunt
</li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-west-2" aria-labelledby="ui-id-2" aria-selected="false">
Proin dolor
</li>
</ul>
The output above has complex li's rendered directly in the ul container which is also complex. Why can't I make that output happen?
This extra wrapping div seems to be the default behavior of backbone marionette when itemView's are rendered. Many answers in these threads center on setting the tagName property to li. Problem is that produces a blank, generic li. Look at the li's in the snippet above. They have lots of properties.
My li's will need to have unique id's and styling and other attributes like those above. Making your item view's tagName an li just produces a simple li in your output. How do I get my dynamic id's and styling classes and such in there?
My first attempt to fix this was to pull the li code into my handlebars template so I could encode it with the dynamic data I needed:
var TabItemView = Marionette.ItemView.extend({
template: Handlebars.compile(
'<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-{{id}}" aria-labelledby="ui-id-{{id}}" aria-selected="true">' +
'{{tabName}}' +
'</li>'
),
});
But that now wraps each li in my list in it's own container div. Every combination of using el, tagName, appendHtml override produces either a wrapping element or incorrect results - like appendHtml override causes each new tab to simply replace existing tabs - so I only ever have one tab, the latest one added.
What am I missing here? Why can't I define a template for an li containing dynamic data in it and render it DIRECTLY to my ul WITHOUT an extra wrapping div around each list element? I guess another way to phrase the question is I am working with an existing template that REQUIRES complex li's. How do I produce them in a composite or collection view WITHOUT the extra wrapping container around them?
Backbone and Marionette seem to offer the promise of being able to do things like this in a way more manageable than doing it in straight jQuery. I'm not having that experience. What am I not seeing?
I don't use Marionette, but I don't see why it would override Backbone's default behavior. This should give you an idea:
var TabView = Marionette.ItemView.extend({
tagName: 'ul',
className: 'ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all ui-sortable" role="tablist',
render: function() {
//something like this
var _this = this;
this.collection.each(function(item){
var view = new TabItemView({
model: item
});
_this.$el.append(view.render().el)
})
}
});
var TabItemView = Marionette.ItemView.extend({
tagName: 'li',
className: 'ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tablist',
template: Handlebars.compile(
'{{tabName}}'
),
});
Regarding managing views and data to produce specific HTML output, I suggest you take a look at my blog post here: http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/
That should get you to structure the views so they render properly. Then, you can add http://backbonejs.org/#View-attributes to the mix to get your complex attributes (for which there aren't existing Backbone attributes such as className).
I have a templated custom widget that inherits from dijit.layout._LayoutWidget, dijit._Container, and dijit._Templated which gives my widget native Widget support for resizing, etc. All I need is a TabContainer, which is sized to the size of widget. Here is my widget.
<div dojoAttachPoint="containerNode">
<div dojoType="dijit.layout.TabContainer" tabPosition="top" style="width:100%;height:100%" >
<div dojoType="dijit.layout.ContentPane" title="tab" selected="true">
hello
</div>
</div>
</div>
Everything looks fine but I get a weird TabList.
I looked into the problem. All the pieces of the widget and TabContainer have the correct width and height values. Only The tablist has a loooong width (50'000 something pixels wide): I have read about similar issues such as this one: http://bugs.dojotoolkit.org/ticket/10495, but in my case all the elements have correct width and length. I have no idea how does tablist get this long width.
I have also tried many ways of adding and removing style="width:100%;height:100;" for the parent container and its parents. But none of the configurations fixed the problem.
Is there a way to fix this problem?
Just in case someone is looking for the solution, I had the same problem, and came to this question. Though I looked at the bug reports, it didn't apply in my case, I was not embedding tabcontainer inside table or setting doLayout to false. I tried setting tabcontroller but that didn't work either. Finally after debuggin, turns out you have to provide 'resize' method in your widget and resize tabcontainer inside it in the following way
widgetTemplate = '... ' + //Our tabcontainer declaration
'<div dojoAttachPoint="containerNode">' +
'<div dojoAttachPoint="widgetTab" dojoType="dijit.layout.TabContainer"' + 'style="width:100%;height:100%" >' +
'<div dojoType="dijit.layout.ContentPane" title="tab" selected="true">hello</div></div></div>' +
'...' //Rest Of template declaration
//Since we are embedding widget inside template we need _WidgetsInTemplateMixin
dojo.declare("MyWidget", [dijit._Widget, dijit._TemplatedMixin,dijit._WidgetsInTemplateMixin], {
templateString: widgetTemplate,
.... //Rest of functions
resize: function(){
this.containerNode.widgetTab.resize() //Resize tabcontainer
}
});
Hope this helps
Try to add attribute to your TabContainer:
<div dojoType="dijit.layout.TabContainer" controllerWidget="dijit.layout.TabController" ... >
http://bugs.dojotoolkit.org/ticket/10113#comment:11
Just rewrite your css like this:
div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
height: 30px !important;
}
#-moz-document url-prefix() {
div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
height: 31px !important;
}
}
If you want to remove the first one : "useMenu : false"
If you want to remove the second and the third : "useSlider : false"