I ran into an irritating feature of using ckeditor.
When you upload an image, in between your text content or wherever, ckeditor automatically fills in the width and height input fields as a default, which causes an html tag with width and height set in the style attribute:
<img alt="" src="/uploads/ckeditor/pictures/196/content_David_Leo006.jpg" style="width: 2000px; height: 669px;">
But if you delete the values in the input fields and then submit, the width and height is not set:
<img alt="" src="/uploads/ckeditor/pictures/196/content_David_Leo006.jpg">
Now like any normal, bright healthy web developer from the 21st century, I have a responsive design that takes care of these things, so I want the tags to always be generated like the latter. How can I hide and disable the input fields for width/height altogether?
CK editor's documentation is horribly chaotic
I did something similar with Tables. I didn't want the end user putting in silly values as we were forcing responsive styling and width.
Maybe this code will help you:
CKEDITOR.on( 'dialogDefinition', function( ev )
{
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'table') {
// Get the advanced tab reference
var infoTab2 = dialogDefinition.getContents('advanced');
//Set the default
// Remove the 'Advanced' tab completely
dialogDefinition.removeContents('advanced');
// Get the properties tab reference
var infoTab = dialogDefinition.getContents('info');
// Remove unnecessary bits from this tab
infoTab.remove('txtBorder');
infoTab.remove('cmbAlign');
infoTab.remove('txtWidth');
infoTab.remove('txtHeight');
infoTab.remove('txtCellSpace');
infoTab.remove('txtCellPad');
infoTab.remove('txtCaption');
infoTab.remove('txtSummary');
}
});
CKEditor 4.5 now has a image_prefillDimensions config, which can be set to false to disable this auto-filling feature. See: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-image_prefillDimensions
Related
I'm working on a web app and users sometimes paste in things they've copy/pasted from other places and that input may come with the character (0xAD). I don't want to filter it out, I simply need the user to see that there is an invisible character there, so they have no surprises later.
Does anyone know a way to make the always be visible? To show a hyphen, rather than remain hidden? I suspect a custom web font might be needed, if so, does anyone know of a pre-existing one?
You would need to either use JavaScript or a custom typeface that has a visible glyph for the soft-hyphen character. Given the impracticalities of working with typefaces for the web (and burdening the user with an additional hundred-kilobyte download) I think the JavaScript approach is best, like so:
document.addEventListener("DOMContentLoaded", function(domReadyEvent) {
var textBoxes = document.querySelectorAll("input[type=text]");
for(var i=0;i<textBoxes.length;i++) {
textBoxes[i].addEventListener("paste", function(pasteEvent) {
var textBox = pasteEvent.target;
textBox.value = textBox.value.replace( "\xAD", "-" );
} );
}
} );
Using Ctrl-F in most browsers will allow you to search for text, but only in only the text areas. I would like to search for text in what should be accessible areas that are not necessarily text rendered areas such as <map ...><area title="searchable text" /></map> and <img alt="searchable text" />. Is there a browser or addon that will do what I'm asking for? This stuff is here for accessibility, but it doesn't seem to be really all that accessible (except by mouse hover, which again isn't all that accessible).
NOTE
An answer that is required, does not use something that is decoupled from the view. I.e. searching through the source code isn't an option as this is largely difficult to read (esp on complex pages) and doesn't show where the information is located on the rendered page.
Is there a browser or addon that will do what I'm asking for?
Oh yes. Lynx browser does it.
But I guess it's not a solution ;-)
If your question is so, there is no way to override what CTRL+F is doing in your browser.
You can design a custom plugin inside your website, or an addon for your browser. This would be quite easy... but will require other shortcut.
If your main problem is to locate tags based on their alt or title attributes content, this is quite easy in javascript:
var search='enter image';
var nodes=document.querySelectorAll("[alt*='"+search+"'],[title*='"+search+"']");
You can then highlight the matching nodes using jquery or what you want.
for (i in nodes) {
nodes[i].className+=' resultHighlighted';
}
and scroll to the first result:
nodes[0].scrollIntoView();
If you intend to create a browser plugin, you can create your custom a bookmarklet or a custom plugin, and associate a shortcut to this bookmark (see https://github.com/iSunilSV/Chrome-Bookmark-Shortcut)
A simple bookmarklet to find the first match by title or alt attribute and scroll to it will be something like that:
javascript:text=prompt("search inside alt or title attribute");
document.querySelector("[alt*='"+text+"'],[title*='"+text+"']").scrollIntoView();
In your browser, use the "View Source" or "Source Code" function, and then within that window that pops up, use the Ctrl-F for Find.
You can also use the "Inspect Element" directly on an element to split the screen into two windows- one for code and one that's rendered.
For more information, here's a sample article for Chrome:
https://support.google.com/adsense/answer/181951?hl=en
Would something like the Web Developer browser plugin work? It's available for Chrome, FF and Opera. There are a few features that toggle the display of various attributes such as title, alt and even ARIA roles. This injects the attribute text inline with the element.
In my opinion, it's not a bug; they were just not designed for this use.
As I'm sure you are aware, the alt attribute replaces the image when it's not available. So how could you scroll to something that is not always displayed? Whereas you seem to be after a permanent description; a figcaption would be more appropriate for this.
As for the title attribute, it was intended to merely clarify the purpose of a link. There should not be any new information to the user in the title; therefore I think it would be redundant to have two lots of the same information highlighted in one place.
The purpose of searching is to find text on screen, seeing as neither title or alt are always displayed I think the user would be more confused by the fact that nothing is highlighted, and that they are just taken to an image or random link/area. If the image has a figcaption that becomes highlighted, then it would make sense to them. Besides, how are they going to search for the title if they don't know what to search for? Title and alt do not come up in text displayed by search engines; the user will never know about it unless they've been to your site before, in which case they'll know where to look.
Also you state the following:
This stuff is here for accessibility, but it doesn't seem to be really all that accessible
Which, understandably, seems true to you as you probably do not need it. However alt and title are read out to those who use screen readers so isn't entirely useless.
Idea 1
I assume you have Windows and Firefox installed
I have my Firefox installed with 2 add-ons.
Install a add-on called Tile Tabs, it make it possible for example left side is web view and the same page on right side with source code.
Install add-on called Web page to source code & viceversa that make it possible to toggle between view and source code by pressing on CTRL+SHIFT+S
Since what you required is not a default thing in all nowadays browses as far as I know.
Screen shot of the solution:
Idea 2
Install FireBug, you can view/edit/debug source codes and view HTML live and what you highlight on the code will be also highlighted on the view.
Screen shot:
Note: Btw idea 1 is not only good for view / source code but it is also good to compare two views or read article to the right and answer question to the left.
You can use the search funktion in Chrome's developer tools "Elements" Tab (Press F12 -> Tab "Elements" -> Press CTRL + F) and use XPath on your searches. Example:
//*[#title="Google"]
Matches will be shown with a yellow background in the code and when you hover it, its position will be hightlited in the view.
Dev Tools "Element" Search with XPath
It is coupled with the view, allows you to see the element's position and it's also an out-of-the-box solution in Chrome (tested in Chromium 45 for Ubuntu).
Hope it helps!
Regards
EDIT
Forgot - If you want to use wildcards on your searches, you can also do it like this:
//*[contains(#title, 'Google')]
EDIT 2
For the posterity! Further research shows that your goal might be possible to achieve using the Firefox-Addon Greasemonkey, which allows you to customize the way a web page displays or behaves, by using small bits of JavaScript.
I performed several tests with this addon and could achieve a nice effect with simple images (display the ALT attribute as a DIV overlapping the image), but with area sections the thing gets a lot more complicated, as area regions can be squares, circles, and polygons with infinite coordinates plus retrieving the exact positioning of the area itself can be a bit tricky but maybe gives you or someone else a start point.
Based on the ALT Tooltips Script (http://greasemonkey-user-scripts.arantius.com/alt-tooltips-for-firefox), I created the following script and defined it in Greasemonkey:
// ==UserScript==
// #name Alt Tooltips 2
// #namespace http://www.biterion.com
// #description Alt Tooltips 2
// #include *
// #grant all
// ==/UserScript==
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while(element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
function getAreaPosition(element) {
var position = element.coords.split(',');
xPosition = position[0];
yPosition = position[1];
return { x: xPosition, y: yPosition}
}
var res = document.evaluate("//img",document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
var i, el;
for (i=0; el=res.snapshotItem(i); i++) {
if(el.alt) {
alternate = el.alt
} else {
alternate = "No alt text";
}
position = getPosition(el);
var newDIV = document.createElement ('div');
newDIV.innerHTML = "<div style='position:absolute;background:yellow;color:black;top:" + position["y"] + ";left:" + position["x"] + "' id=" + i + ">" + alternate + "</div>";
document.body.appendChild(newDIV);
}
var res2 = document.evaluate("//area",document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
var i2, el2;
for (i2=0; el2=res2.snapshotItem(i2); i2++) {
if(el2.alt) {
alternate2 = el2.alt
} else {
alternate2 = "No alt text";
}
position2 = getAreaPosition(el2);
var newDIV2 = document.createElement('div');
newDIV2.innerHTML = "<div style='position:absolute;background:yellow;color:black;top:" + position2["y"] + ";left:" + position2["x"] + "' id=" + i2 + ">" + alternate2 + "</div>";
document.body.appendChild(newDIV2);
}
As you can see, the script firstly detects all "img" and "area" elements, extracts its positioning and creates a new DIV element containing the "alt" attribute, which is then positioned on the upper left corner of the image.
As stated, the problem with areas is, that the positioning should be relative to the parent image and not absolute like in the script, plus the coordinates should be extracted accordingly to the type of area shape (currently only extracting the two first coordinates of each area, which will work for squares but will surely fail for other shapes).
Hope this will help someone :-D
Regards
I am using twitter bootstrap-switch plugin in to show a checkbox with two options. It works well for checkboxes with small label text like "yes/no". However, when it comes to bigger label text like "Normal/Abnormal", then part of text is not visible to the user.
I tried to use the data_size attribute:
#Html.CheckBoxFor(model => Model.keyitems[i].Status,
new { #checked = "checked",
#data_on_text = "Normal",
#data_off_text = "Abnormal",
#data_size = "switch-large" })
But it didn't work.
How can I make the plugin support longer text as well?
First of all, the data attributes use hyphens (-), not underscores (_).
Also "switch-large" is not a permissible value for the size option, which takes the following values:
null, 'mini', 'small', 'normal', 'large'
More importantly, a large control doesn't actually do that much to change the allowable size. You'll have to override the control width like this:
.bootstrap-switch-large{
width: 200px;
}
All the control widths are based off of percents of their parent, so everything else should still render fine.
<input type="checkbox" class="switch"
data-on-text="normal"
data-off-text="abnormal"
data-size="large" />
Demo in jsFiddle
Something else to potentially check is jQuery version. I inherited a site that was running an older version and my button sizes were all too small, cutting off the text. Once I used a current version everything started working as it should.
Accepted answer is great, i just want to add a reference to a plugin here. I have used it in similar cases. It is BootStrapSwitch. It supports callbacks which is a real perk.
On InternetExplorer, a contentEditable DIV creates a new paragraph (<p></p>) each time you press Enter whereas Firefox creates a <br/> tag.
Is it possible to force IE to insert a <br/> instead of a new paragraph ?
Here's a solution (uses jQuery). After you click on the 'Change to BR' button, the <br> tag will be inserted instead of the <p></p> tag.
Html:
<div id='editable' contentEditable="true">
This is a division that is content editable. You can position the cursor
within the text, move the cursor with the arrow keys, and use the keyboard
to enter or delete text at the cursor position.
</div>
<button type="button" onclick='InsertBR()'>Change to BR</button>
<button type="button" onclick='ViewSource()'>View Div source</button>
Javascript:
function InsertBR()
{
$("#editable").keypress(function(e) {
if (e.which == 13)
{
e.preventDefault();
document.selection.createRange().pasteHTML("<br/>")
}
});
}
function ViewSource()
{
var div = document.getElementById('editable');
alert('div.innerHTML = ' + div.innerHTML);
}
These links helped.
Working example here.
Yes it is possible to avoid the insertion of paragraphs by stopping the keydown event first (window.event.stopPropagation();) and then inserting the string by using insert HTML command.
However, IE depends on this divs for setting styles etc. and you will get into trouble using <br>s.
I suggest you using a project like TinyMCE or other editors and search for an editor which behaves the way you would like, since they have all kinds of workarounds for different browser issues. Perhaps you can find an editor which uses <br>s...
You can always learn to use SHIFT + ENTER for single line returns and ENTER for paragraph returns. IE behaves like MS Word in this respect.
Changing the line-height of the <p> inside the editable <div> works:
#editable_div p
{
line-height: 0px;
}
If you can use it, FCKEditor has a setting for this
Is there a possibility to turn off the automatic enclosing of all written content within <p></p> in CKEditor 3.x?
I tried
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
but this just changes the inline linebreaks to <br /> while leaving the enclosing paragraph.
Currently writing "Test" produces this output
<p>
Test</p>
but I want it to be simply
Test
Is there a configuration property for this or would another inline editor to be better suited for this?
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR; - this works perfectly for me.
Have you tried clearing your browser cache - this is an issue sometimes.
You can also check it out with the jQuery adapter:
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#your_textarea').ckeditor({
toolbar: 'Full',
enterMode : CKEDITOR.ENTER_BR,
shiftEnterMode: CKEDITOR.ENTER_P
});
});
</script>
UPDATE according to #Tomkay's comment:
Since version 3.6 of CKEditor you can configure if you want inline content to be automatically wrapped with tags like <p></p>. This is the correct setting:
CKEDITOR.config.autoParagraph = false;
Source:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.autoParagraph
Across the internet, people have noticed that setting config.enterMode to CKEDITOR.ENTER_BR removes the wrapping paragraph tags from CKEditor. It's worth noting that the setting changes the behavior of the enter key to insert line breaks rather than paragraphs, which is not desirable.
See: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.enterMode "It is recommended to use the CKEDITOR.ENTER_P setting because of its semantic value and correctness."
However, the setting that is designed to remove that initial paragraph, config.autoParagraph, isn't advisable either, as it introduces "unpredictable usability issues" because the editor really wants a top-level block element.
See: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.autoParagraph
The magic happens on wysiwygarea/plugin.js, line 410, where the editor selects the default block element based on config.enterMode. A config option to change the default block element would allow us to start with a div, but we'd continue getting more divs with every enter press, unless we changed the paragraph format via the menu.
See: http://docs.cksource.com/ckeditor_api/symbols/src/plugins_wysiwygarea_plugin.js.html
It would be possible to remove the wrapping paragraph tag with post-processing (either on the server or in CKEditor's getData event), but that leads us into the same problem as disabling autoParagraph: there's no top-level block.
I would rather say that there's not a good solution, but rather a handful of half-solutions, than to accept changing config.enterMode as the canonical solution.
Try this in config.js
CKEDITOR.editorConfig = function( config )
{
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_BR;
};
Found it!
ckeditor.js line #91 ... search for
B.config.enterMode==3?'div':'p'
change to
B.config.enterMode==3?'div':'' (NO P!)
Dump your cache and BAM!
MAKE THIS YOUR config.js file code
CKEDITOR.editorConfig = function( config ) {
// config.enterMode = 2; //disabled <p> completely
config.enterMode = CKEDITOR.ENTER_BR; // pressing the ENTER KEY input <br/>
config.shiftEnterMode = CKEDITOR.ENTER_P; //pressing the SHIFT + ENTER KEYS input <p>
config.autoParagraph = false; // stops automatic insertion of <p> on focus
};
I'm doing something I'm not proud of as workaround. In my Python servlet that actually saves to the database, I do:
if description.startswith('<p>') and description.endswith('</p>'):
description = description[3:-4]
Edit the source (or turn off rich text) and replace the p tag with a div. Then style the div any which way you want.
ckEditor won't add any wrapper element on the next submit as you've got the div in there.
(This solved my issue, I'm using Drupal and need small snippets of html which the editor always added the extra, but the rest of the time I want the wrapping p tag).
if (substr_count($this->content,'<p>') == 1)
{
$this->content = preg_replace('/<\/?p>/i', '', $this->content);
}
MAKE THIS YOUR config.js file code
CKEDITOR.editorConfig = function( config ) {
// config.enterMode = 2; //disabled <p> completely
config.enterMode = CKEDITOR.ENTER_BR // pressing the ENTER KEY input <br/>
config.shiftEnterMode = CKEDITOR.ENTER_P; //pressing the SHIFT + ENTER KEYS input <p>
config.autoParagraph = false; // stops automatic insertion of <p> on focus
};
Set such config:
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR
CKEDITOR.config.forcePasteAsPlainText = true
Well, with me in laravel, with using ckeditor, it work using simple strip_tags($var) function for output like below:
Sending value to like this to the other page: {!! strip_tags($six_answer) !!}
And/Or when outputting use the same code: {!! strip_tags($six_answer) !!}.
the result is below without any <p> tags.
In VS2015, this worked to turn the Enter key into <br>
myCKEControl.EnterMode = CKEditor.NET.EnterMode.BR
Personally, I don't care if my resulting text only has <br> and not <p>. It renders perfectly fine and it looks the way I want it to. In the end, it works.