Get text without mark up from kendo editor - javascript

I am using kendo editor in my application to capture some information. One of the requirements is to save the text entered in the same without any markup. I understand that the piece of code:
$("#editor").data("kendoEditor").value();
will give me the text entered in the control with the markup. But is there any way to retrieve only the text entered? I even wanted the number of lines in the text area that the content occupies.

You can use
var text = $("<div/>").html($("#editor").data("kendoEditor").value()).text();

Try the following code :
try {
var value = $("#editor").data("kendoEditor").value();
var text = value.replace(/(<([^>]+)>)/ig,"");
alert(text);
}
catch (e) { }

Related

Recover text from select()

I want to recover the text from the select function instead of show an alert in a variable. #article is the id of my text area.
If you have another technique i will take it.
function getText() {
$('#article').select(function() {
alert("Hello");
});
}
From comments:
The purpose is to format the selection as BOLD.
This is not possible with a text area, so it's necessary to look into making an editor, possibly using a contentEditable div.
If you're inside the select function try
this.value
With the idea of #RoryMcCrossan and #chrisz i use an WYSIWYG editor (ckeditor for my part). It works pretty good and it's really easy to install.
you can get the value of the select field using val().
function getText() {
$('#article').select(function() {
var selectedText = $(this).val();
});
}
selectedText will be your value i.e option which they selected

open website with drop into textbox HTML

I have made A user-script ( DOM Javascript) which included a text-box. I want the text-box to open up a google search of the input when an item is dropped. For example, if I select the word "Javascript" and drag it into the text-box, it will open up a Google search of "Javascript".
This is the code I have:
//only Javascript
var input2=document.createElement("input");
input2.type="text";
input2.id="Word_search";
input2.addEventListener("drop", GoogleWord);
document.body.appendChild(input2);
function GoogleWord(){
console.log("hi");
var text = document.getElementById("Word_search").value;
alert(text);
window.open('https://www.google.com/search?q=' + text,'_blank');
}
(I could not use a snippet because It does not seem to work inside the snippet)
The Main problem is that the function runs before the text is inserted into the textbox, and therefore, will do a blank Google search.
So, I only need the text to be inside the text-box when the function runs.
The drop event apparently occurs before the input is updated with the dropped text. The way to get the dropped text is with event.dataTransfer.getData(mimetype).
function GoogleWord(event){
console.log("hi");
var text = event.dataTransfer.getData('text/plain');
alert(text);
window.open('https://www.google.com/search?q=' + text,'_blank');
}
FIDDLE
Try this,
function GoogleWord(e){
console.log("hi");
var text = e.target.value;
alert(text);
window.open('https://www.google.com/search?q=' + text,'_blank');
}

Making a FormBody Shrink and Expand Using JQuery and SharePoint

I am creating a form in sharepoint. I have an ms-FormBody for a text box. I would like for the user to be able to double click the box in order to expand the box and if they double click again, it will shrink back up. Again this is in SharePoint.
EDIT: Thanks to some help from #Thriggle I am very close to the goal I wanted with this project. The problem now is that Whatever you type will only stay on one line (t ext wrapping maybe?). Also The text box doesn't actually take up less space (This is not a big deal but if you can think of anyway to make the rest of the boxes move as this box resizes) and I was wondering if there is a way that the box will be small when program launches.
Based on your screenshots, I'm assuming that you're using Nintex Forms.
For Plain Text Multi-Line Fields
The following will work for plain text multiline fields, but not for rich text or enhanced rich text fields (neither of which are represented by an ordinary textarea element).
In your form settings, in the Custom JavaScript section, you can add the following code:
ExecuteOrDelayUntilScriptLoaded(function(){setTimeout(checkFieldExists,1000);},"sp.js");
function checkFieldExists(){
// Nintex forms load slowly; we'll hold off on running the code
// until we're able to access the element through the DOM.
var field = document.getElementById(DescriptionID);
if(field){
// The field exists, time to attach an event listener.
addExpansionToggleEvent(field);
}else{
// Wait a second, then check again.
setTimeout(checkFieldExists,1000);
}
}
function addExpansionToggleEvent(field){
field.style.height = ""; // remove the default height=100%
field.ondblclick = function(){
var rows = field.getAttribute("rows");
field.setAttribute("rows",+rows < 10 ? 10 : 1);
};
}
This is assuming you added a client ID of DescriptionID to the plain text multiline field that you want to toggle, as shown in your screenshot.
For Rich Text Multi-Line Fields
Rich text fields are (bizarrely) represented by iframes instead of textarea elements.
The following code can be added to your Custom JavaScript section to provide expand/shrink behavior upon double-clicking a rich text field, but note that this does not readjust the way other controls are laid out on the form to account for the field's new size... so it's not especially useful.
ExecuteOrDelayUntilScriptLoaded(function(){setTimeout(checkFieldExists,1000);},"sp.js");
function checkFieldExists(){
var iframes = document.querySelectorAll("iframe[title=\"Rich Text Editor\"]");
if(iframes.length > 0){
addExpansionToggleEvent(iframes);
}else{
setTimeout(checkFieldExists,1000);
}
}
function addExpansionToggleEvent(iframes){
for(var i = 0, len = iframes.length; i < len; i++){
var body = iframes[i].contentDocument.querySelector("body");
(function(container){
body.ondblclick = function(){
container.height = +(container.height) < 140 ? 140 : 30;
};
})(iframes[i]);
}
}
Again, this code is specifically targeted toward rich text field, and will not work for plain text or enhanced rich text fields.

How to check if selected text contains content control or not in word 2016 using word Javascript api

I have created a task pane for word 2016 which has two buttons such as 'addcontentcontrol' and 'retrievecontentcontrol' . Adding a content control in document works fine.When i select that content control's text and hit 'retrievecontentcontrol',it returns text. However, I want to check whether the selected text contains content control or plain text. Thanks a lot in advance.
I think you are asking about two things. If you are selecting a content control's text, and want to return the content control, then you'll want to do the following:
You'll want to check the range.parentContentControl property to check whether the selected text is within a content control. If the returned value is not null, then you may want to compare the text value of the content control and the text value of the selected range to make sure they are equivalent.
var contentControl = context.document.getSelection().parentContentControl;
But if you want to check whether some arbitrary text from a selection contains a content control, then you'll want to check the content control collection on the range.
var contentControlCollection = context.document.getSelection().contentControlCollection;
Maybe that happens because you are not loading the content control before calling context.sync()? ... try this code it must work (note that we get a GeneralException if there is no content control in the selection). Note that This sample assumes that if there is a content control it has a title on it :)
function insideOfContentControlCheck() {
Word.run(function (ctx) {
var myCC = ctx.document.getSelection().parentContentControl;
ctx.load(myCC); // I think this is the part you are missing!
return ctx.sync()
.then(function () {
console.log(myCC.title);// if there is a content control we'll show the title
});
}).catch(function (e) {
//there is no ContentControl.
console.log("Error", e.message);
});
}

How to lock the first word of a textarea?

Basically I need to create a textarea that is character limited, but will have a single word at the beginning, that they can't change.
It needs to be a part of the textarea, but I don't want users to be able to remove it or edit it.
I was thinking I could create a JQuery function using blur() to prevent the user from backspacing, but I also need to prevent them from selecting that word and deleting it.
UPDATE
I wrote this JQuery which seems to work great! However I like the solution below as it requires no Javascript.
<script type="text/javascript">
var $el = $("textarea#message_create_body");
$el.data('oldVal', $el.val());
$el.bind('keydown keyup keypress', function () {
var header = "Header: ";
var $this = $(this);
$this.data('newVal', $this.val());
var newValue = $this.data("newVal");
var oldValue = $this.data("oldVal");
// Check to make sure header not removed
if (!(newValue.substr(0, header.length) === header)) {
$(this).val(oldValue);
} else {
$(this).data('oldVal', $(this).val());
}
});
</script>
If you just want the textarea to show a prefix, you can use a label, change the position, and indent the textarea content. User will not notice the difference.
You can see how it works here: http://jsfiddle.net/FLEA3/.
How about just putting this word as a label next to the textbox? It may be confusing for the users not to be able to edit part of the text in the textbox.
Wouldn't it be better if you just alert the user that whatever he inputs in the textarea will be submitted with a "prefix" and then
show the prefix as a label before the textarea
add the prefix to the inputted text before submitting

Categories