Even I set forceParse option to false, when I paste a text into the input box, it auto set to today.
For typing, I can type in any letters, but for the pasting (ctrl + v) is not working, if the pasting text is not in the correct format then.
How can I disable(ignore) the paste auto-collect action so that I can paste any letter into the input box? I do formatting manually when blurring from the input box.
$('#yourcalenderid').datepicker({
forceParse: false
});
http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#forceparse
As commented, in bootstrap-datepicker.js line 508 change it to the following
paste: function(e){
/* var dateString;
if (e.originalEvent.clipboardData && e.originalEvent.clipboardData.types
&& $.inArray('text/plain', e.originalEvent.clipboardData.types) !== -1) {
dateString = e.originalEvent.clipboardData.getData('text/plain');
} else
if (window.clipboardData) {
dateString = window.clipboardData.getData('Text');
} else {
return;
}
this.setDate(dateString);
this.update();
e.preventDefault(); */
},
Related
I'm using TinyMCE text editor and I would like to upload an image by clicking on a toolbar button. But when the popup window was opened..:
I can't select the input element.
I can't type any image URL into the input field.
You can access my code from this link. Please take a look at the screenshot below.
What should I do in this situation?
I've solved my issue by using the following code. I hope it helps someone else who stuck with this kind of issue
openAddCommentDialog: function(oEvent,args) {
var _this = this;
if(sap.ui.getCore().byId("codeEditorContainer")){
sap.ui.getCore().byId("codeEditorContainer").removeAllItems();
}
var commentEditor = new RTE({
editorType: sap.ui.richtexteditor.EditorType.TinyMCE4,
width:'100%',
height:'100%',
customToolbar: false,
showGroupFont: true,
showGroupLink: true,
showGroupInsert: true,
beforeEditorInit:function(oEvent){
var config = oEvent.getParameter("configuration");
config["setup"] = function(editor){
editor.on('init', function(){
if(args && args.commentMessage){
editor.setContent(args.commentMessage);
oModel.setProperty("/TicketItemModel/CommentTitle",args.commentTitle);
}
else{
if(args && args.commentTitle){
oModel.setProperty("/TicketItemModel/CommentTitle",args.commentTitle);
editor.setContent(args.commentMessage);
}
else{
oModel.setProperty("/TicketItemModel/CommentTitle","");
editor.setContent("");
}
}
})
}
}
});
if (!this._oDialogAddCommentWindow) {
this._oDialogAddCommentWindow = sap.ui.xmlfragment("BnetPortal.Application.ToDo.fragments.addComment",this);
}
sap.ui.getCore().byId("codeEditorContainer").addItem(commentEditor);
this._oDialogAddCommentWindow.open();
},
I'm trying to write my own CodeMirror mode as documented here.
My objective is to change the color of specific keywords. For example, any "aaa" word needs to be red and any "bbb" word needs to be blue. Any other words need to have the default color.
This is my unsuccessful attempt (see jsfiddle). How to make this work?
HTML:
<textarea rows="4" cols="30" id="cm" name="cm">aaa bbb ccc</textarea>
CSS:
.style1 { color: red; }
.style2 { color: blue; }
Javascript:
CodeMirror.defineMode("mymode", function() {
return {
token: function(stream,state) {
if (stream.match("aaa") ) {
console.log("aaa found");
while ((ch = stream.next()) != null)
if (ch == " " && stream.next() == " ") break;
return "style1";
}
else if (stream.match("bbb") ) {
console.log("bbb found");
while ((ch = stream.next()) != null)
if (ch == " " && stream.next() == " ") break;
return "style2";
}
else
return null;
}
};
});
var editor = CodeMirror.fromTextArea(document.getElementById('cm'), {
mode: "mymode",
lineNumbers: true
});
You had two problems.
CodeMirror prefixed cm- to classes used to style tokens. The styles in your CSS have to account for that.
You were skipping the rest of the line after finding "aaa" or "bbb", althrough your description of your goal sounds like you didn't want to do that.
I've fixed both in the jsfiddle. You may also want to only match full words (currently fooaaabar also has aaa highlighted). To do that, first have your tokenizer read a whole word (stream.eatWhile(/\w/)), and then see if the resulting word is one of the words you are looking for (stream.current() == "aaa").
So I have an editable line of text on my website. Whenever the text is changed and is above a certain length, I truncate the text.
Simplified jsfiddle here - http://jsfiddle.net/3kwCr/1/
On subsequent clicks on the text to edit, the truncated value with ellipsis is picked up. How do I get jEditable to pick up the actual value which is present as an attribute in the div?
data: function() { $('.editable-value').attr('value') }
will not work as I have several of these editable lines of text
I need something like
data: function() { this.attr('value') }
where this would the div object to which .editable has been applied to.
Just wrap this into jQuery object so you can use jQuery methods on it. Below is updated code. I also updated the example jsFiddle.
$('.editable').editable(function(value, settings) {
$(this).attr('value', value);
if (value.length > 10) {
return(value.slice(0,10)) + '...';
} else {
return(value);
}
}, {
data : function(value) { return($(this).attr('value')); },
type : 'text',
submit : 'OK'
});
Good morning people, hope y'all are having a good time, first and foremost i want to thank y'all for your speedy response to my questions, a while ago i need a word counter for tinymce and i got some good response, this time i want when a user cut and paste into the counter it should also count the words and restrict them accordingly, here is the code to the onkey press counter
tinyMCE.init({
mode : "textareas",
elements : "teaser,headline",
setup: function(ed) {
var text = '';
var span = document.getElementById('word-count');
if(span)
{
var wordlimit = span.innerHTML;
ed.onKeyDown.add(function(ed, e) {
text = ed.getContent().replace(/(< ([^>]+)<)/g, '').replace(/\s+/g, ' ');
text = text.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
wordcount = wordlimit - (text.split(' ').length);
span.innerHTML = wordcount;
if(wordcount <= 0 && e.keyCode != 8)
{
return tinymce.dom.Event.cancel(e);
}
});
}
}
})
please can you help modify it for me to also watch for on paste. Thank you.
#cyberomin.
That is pretty forward:
ed.onPaste.add(function(ed, e) {
text = ed.getContent().replace(/(< ([^>]+)<)/g, '').replace(/\s+/g, ' ');
text = text.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
wordcount = wordlimit - (text.split(' ').length);
span.innerHTML = wordcount;
if(wordcount <= 0 && e.keyCode != 8)
{
return tinymce.dom.Event.cancel(e);
}
});
I'm using tiny mce, but I found it adds multiple spans with inline styles to the content for any applied style. Inline styles are not W3c Compliant, so must avoid inline css. Is it possible to create css class on the fly and apply to the selection, while editing content in tiny mce ?
Yes that is possible, but it took me some effort. What needs to be done is to write the class into the head of the editors iframe. Here is some example code which should work for IE,FF, Safari and point you into the right direction:
fonturl = "http://myfonts.com/arial.ttf"
csstext_to_add = '#font-face {font-family: "ownfont";src: url("'+fonturl+'");}'; // example
iframe_id = ed.id;
with(document.getElementById(iframe_id).contentWindow){
var h=document.getElementsByTagName("head");
if (!h.length) {
return;
}
var newStyleSheet=document.createElement("style");
newStyleSheet.type="text/css";
h[0].appendChild(newStyleSheet);
try{
if (typeof newStyleSheet.styleSheet !== "undefined") {
newStyleSheet.styleSheet.cssText = csstext_to_add;
}
else {
newStyleSheet.appendChild(document.createTextNode(csstext_to_add));
newStyleSheet.innerHTML=csstext_to_add;
}
}
catch(e){}
}
It is also possible to add that class as option into a dropdown (what takes some effort).
Thariama's answer was perfect. I'm using the tinyMCE jQuery connector for some of my pages and I have multiple instances of tinyMCE on the page. I made some modifications, but essentially its the same thing. I've created a text area field on the page that people can provide their own CSS. Also, I needed to change some CSS rules on the fly...
// function to change tinyMCE css on the fly
function checkCustomCSS() {
var $css = $('#page_css'),
newcss;
if ($css.val().length > 0) {
// since front end, we are wrapping their HTML in a wrapper and
// the tinyMCE edit iFrame is just using <body>, we need to change
// some rules so they can see the changes
newcss = $css.val().replace('#content_wrapper', 'body');
// loop through each tinyMCE editor and apply the code changes
// You could check the editor.id to make sure that the correct
// editor gets the appropriate changes.
$.each(tinyMCE.editors, function() {
var $this = $(this),
editorID = $this[0].id,
$ifrm = $('#' + editorID+ '_ifr'),
cwin, head, sheet;
if ($ifrm.length > 0 /* && editorID === 'OUR_EDITOR_ID_NAME' */) {
cwin = $ifrm[0].contentWindow;
head = cwin.document.getElementsByTagName("head");
if (!head.length) {
return;
}
sheet = cwin.document.createElement("style");
sheet.type = "text/css";
head[0].appendChild(sheet);
try {
if (typeof sheet.styleSheet !== "undefined") {
sheet.styleSheet.cssText = newcss;
} else {
sheet.appendChild(cwin.document.createTextNode(newcss));
sheet.innerHTML = newcss;
}
} catch (e) {}
}
});
}
}
Then in the tinyMCE init call I added and onInit call to setup changes to the #page_css , like this:
oninit: function() {
$('#page_css').on('change', function() {
checkCustomCSS();
});
}
Works like a charm.