In CKEDITOR 4 I'm using the inline mode
I have a BulletedList with <ul contenteditable="true">
and when I press ENTER I can't not create a new LI with a <P contentenditable="true"> children to have the toolbar for format text options.
Here the JSFIDDLE
And here the list plugin source
You cannot build your editor on <ul> element because CKEditor wasn't designed to work like that. You can find the list of editable elements by calling CKEDITOR.dtd.$editable in your console:
CKEDITOR.dtd.$editable
>>> Object {address: 1, article: 1, aside: 1, blockquote: 1, body: 1…}
You can wrap your list in div element, make it editable and strip out when retrieving data. There's a simple example of how to modify elements on editor output. You'll need to return false when your div is processed. This is it.
You can also do this with RegExp but I don't find it gentle ;)
Related
Bottom of page imperiyanews
Where is div and table with dinamical id
Them look like <div id="ZzRwXzE3NzMwXzE1MzY5NDQ0MDA" data-ids="1587700,1586609,1586068,1587550,1587700,1586609,1587550,1586068,1586068,1588089,1588041,1587131"><table id="ZzRwXzE3NzMwXzE1MzY5NDQ0MDA_table_17730"
I tried to filter them out by rules like
www.imperiyanews.ru##table[id$="A_table_17730"]
www.imperiyanews.ru##[class^="Z"]
www.imperiyanews.ru##[id^="Z"]
www.imperiyanews.ru##.b-block.block > div > div:nth-of-type(3)
But rules didnt work for me.
In element picker mode - these rules hilighted right element, but after reload page - element not filtered
When I use an empty span, let's say
<span class="anchor" id="jumptome"></span>
ckeditor removes it.
To the config.js of ckeditor I added
CKEDITOR.editorConfig = function( config ) {
config.IgnoreEmptyParagraphValue = true;
};
CKEDITOR.dtd.$removeEmpty.span = 0;
Now ckeditor does not remove the spans, but they are wrapped in p's like
<p><span class="anchor" id="jumptome"></span></p>
Is there any configuration to remove the p's (I need the paragraphs for other elements, just want to avoid them for the spans).
Thanks in advance!
Why would you need the spans? If you need an anchor, why not use for example a DIV which can be styled to be a visible block in the Editor but an invisible ... anchor in the output content? I do this in my CKE app. Although I use widgets for anchors but same princible anyway.
I'm guessing the reason is because of caret positioning and user targeting - how would the user target that anchor? If it can't be targeted - why do you need it in the contents? Why not something targetable?
The excellent dropdown jQuery UI Multiselect widget that supports styling via jQuery UI Themeroller still doesn't have support for including images within the drop down rows.
I didn't see any answers to this problem within Stackoverflow yet it seems to be asked regularly in various areas of the internet, so I am giving the answer to this question below..
(ALSO See my FIDDLE Example to see this in action,)
The following is based on an initial idea by 'pdlove' for introducing the use of images within this excellent UI Multiselect for jQuery.
Adding Image support for line items in check box text area is achieved by setting out the selector option rows html like this:
<option value="somevalue" image="yourimage.jpg" class="multSelktrImg">
normal visible text
</option>
I would also add a class control to your style sheet css file to set the image size being rendered in the option line items of the drop down, along with a couple of position settings for the image, label and span text.
In this example I use the class name 'multSelktrImg', so within the css file it would look something like this:
.multSelktrImg span{position: relative;top: 10px;vertical-align: middle;
display: inline-flex;}
.multSelktrImg input {vertical-align: -2px;}
.multSelktrImg img {position: relative;height: 30px;margin: 2px 6px;top: -10px;}
Now for the change in the src/jquery.multiselect.js file
Search for the following matching code around line 130 (depending on what version id of the script you are using):
// build items
el.find('option').each(function( i ){
var $this = $(this),
parent = this.parentNode,
title = this.innerHTML,
description = this.title,
....
ADD the following line above "title = this.innerHTML,":
image = this.getAttribute("image");
so that it looks like this:
// build items
el.find('option').each(function( i ){
var $this = $(this),
parent = this.parentNode,
image = this.getAttribute("image");
title = this.innerHTML,
description = this.title,
Now Search for the following matching code around line 180:
// add the title and close everything off
html += ' /><span>' + title + '</span></label></li>';
....
Replace the code line with the following to allow for rendering of your images:
// add the title and close everything off
html += ' /><span>';
if (image != null) {
html += '<img src="'+image+'" class="multSelktrImg">';
}
html += title + '</span></label></li>';
save the new version of the script src/jquery.multiselect.js file and now the images will appear in the multiselect drop down. Use the 'multSelktrImg' class value to control the size of the image displayed by altering the pixel size for the class in your css file.
In the FIDDLE version, I have altered the minimized version of the jQuery script, and created an initialisation of the Select object.
I am getting a w3c validation error here as
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
This is my source code
<ul class="link">
<li><span>1<div class="clr"> </div><label>Vul Postcode in </label></span></li>
<li><span>2<div class="clr"> </div><label>Restaurants </label></span></li>
<li><span>3<div class="clr"> </div><label>Menukaart</label></span></li>
<li><span>4<div class="clr"> </div><label>Afrekenen</label></span></li>
</ul>
Please help me to find out the issue,
Thanks
Pallavi
You have a block element (div) inside of an inline element (span). This is not allowed.
Solution 1: Change span to div:
<div>2<div class="clr"> </div><span class="label">Restaurants </span></div>
(You have to use HTML5 (<!DOCTYPE html>), otherwise block elements wouldn’t be allowed inside of a elements.)
Solution 2: Change div to span:
<span>2<span class="clr"> </span><span class="label">Restaurants </span></span>
Note that you can’t have label inside of an a element (I changed the label to span here). Use the label element only when you have a form.
I'm trying to find the best way to render a li-element :
I've read that i should never replace this.el
So it seems that i have to unwrap my template in my LiView render() function :
// replace element content with html generated from template
var $rendered = $.tmpl(this.template, this.model.toJSON());
this.el.html($rendered.unwrap().html());
I just get the contents inside the $rendered li, since i should not replace it.
But how should i transfer attributes ?
I tried :
this.el.attr('class', $rendered.attr('class'));
this.el.attr('title', $rendered.attr('title'));
But it replaces attributes... And some (like jQuery ui ui-draggable) could be lost.
All this seems a bit clunky...
Thanks !
I'm not sure I fully grasp what you're trying to do Olouv, but I'll have a stab at answering your question regardless :)
You have an liView that corresponds to an li dom element
So you need to specify
el: "li"
Do not have an li in your template. Then the result of your render will be
<li>
contents of template
</li>
Now you want to add attributes to this li element?
Class names are pretty simple, just add the className attribute to your view
className: "ui-draggable myGreatClass ui-corner-all"
If you need to add additional attributes to your root (li) element
$(el).attr("title","your title")
If that doesn't work for you, and you want to put the li attributes in your template perhaps consider some form of the following:
Tolerating HTML of the form:
Instead of an liView (list item view), just have a ulView (List view), and put a loop construct in your template