With CKEDITOR, when I use JS to get the contents of the Text Editor, I'm getting back:
<p>\u000a\u0009 ad adad ad asd</p>\u000a
When I should have gotten:
<p>ad adad ad asd</p>
Any idea what's going on here?
The only difference that could be the cause is that I'm dynamically created textareas on load, and using a class to find the editor:
$('.guideItem-textarea').each(function(index, value){
// ID of the textarea
var targeteditor = $(this).attr('id');
var targeteditorID = $(this).attr('id').replace('noteguide','');
// Contents in the editor
textareacontents = CKEDITOR.instances[targeteditor].getData();
});
Any ideas?
Those strange characters are unicode control characters. The first one is a line feed, the seond is a tab. is the data in your example really the values in your question? Perhaps your prepopulated the text from some other source?
Suggested reading after you figure this out though:
http://www.joelonsoftware.com/articles/Unicode.html
Related
I am trying to copy an image taken from browser,from another web page.
When i paste it into the field (Edit Form), i have the same photo pasted two times in the area,so the same photo duplicated in the field.
Doing a check, i have noticed from the browser (Chrome v. 79.0.3945.117 ) that after doing the paste action,in the field i have:
<p>
<img data-cke-saved-src="data:image/png;base64,XXXXX" src="data:image/png;base64,XXXXX">
<img src="data:image/png;base64,XXXXX"><br>
</p>
where xxxxx is the base64 string.
How can i remove duplicate image?
Thanks a lot for any suggestion.
perhaps i have found a solution (i will monitor the behaviour of the library).
Adding:
ev.editor.on('paste', function (ev) {
console.log('some stuff');
});
i 've realized that the paste event arises for two times ( it is an unespected behaviour of ckEditor?) when i make the paste action with mouse or ctrl-v.
Anyway adding:
ev.data.html = ev.data.html.replace(/<imgimg data-cke-saved-src( [^>]*)?>/gi, '');
i have removed the first image apparently generated by CKeditor.
My company has a license for one of the older Telerik packages. They would like me to place an RTF textbox in place of the normal Textbox on one of our screens. I have the extant code for the text box and I have another page used in our application which ostensibly works with the RTF editor (it's a part of functionality which is inaccessible to me at my privilege level). The original code was as follows:
#Html.TextAreaFor(m => m.LogEntry.Description,
new { #id = "logDescription", #class = "dirtyField",
style = "width: 400px; height: 100px;" })
The RTF code I'm patterning my code off of is as follows:
#(Html.Telerik().EditorFor(m => m.MessageContent)
.Name("msgEditor")
.HtmlAttributes(new { style = "width: 600px; height:250px; padding-top:0px; padding-bottom:0px;" })
.Tools(tools => tools
.Clear()
.Bold().Italic().Underline().Strikethrough()
.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
.InsertUnorderedList().InsertOrderedList()
.Outdent().Indent()
.CreateLink().Unlink()
.Subscript()
.Superscript()
.FontName()
.FontSize()
.FontColor().BackColor()
)
)
I have the Editor control displaying, using our LogEntry.Description string instead of the above MessageContent. I can input text into it. I can load text into it. But when I try to save the entry off of a procedure called by a button in the dialog, the text of Description has been set to NULL. What am I doing wrong? I'm a newbie when it comes to web development, so I'm sort of grasping at straws.
I've looked at the answer at Telerik Editor doesn't work, but we have a ScriptRegistrar set up. The tutorials I can find on the Telerik site are all for the Kendo editor. This page seems more applicable, but, as far as I can tell, I'm doing all of the same things as they are. I tried to figure out if there was a place I needed to insert a call to HTMLEncode or HTMLDecode, but I've yet to find where the value is getting changed to NULL so as to catch it before then. Unfortunately, company code and all of that, I can only post so much of it, although I'll do my best to post sanitized specifics as necessary.
For the sake of future people who have this issue, I hashed it out with one of the programmers here who had access to some additional code that had been published, but not added to our source code. I had to add code similar to the following inside the code run for the Javascript code associated with the Save button:
var editor = $("#descriptionEditor").data("tEditor");
var message = editor.value();
$("#logentry-encoded-message-content").val(message);
Within the CSHTML file, had to add the following element:
#Html.HiddenFor(m => m.LogEntry.EncodedDescription, new { #id = "logentry-encoded-message-content" })
Then, in the code involving processing the form, I assigned the contents of EncodedDescription to Description. Rather annoyingly, I have yet to find a way to just use one variable here. I did also have to add a modifier of [AllowHtml] to the EncodedDescription property to avoid the error message that there is potentially dangerous HTML being posted (since I know exactly what is being posted, and I know that it will be decoded and encoded for the control).
My question is related to set focus on ace editor
This time I want to delete the content whenever there is a validation error.
I have the used the pattern like
/^[0-4]$/ and /^([1-9][0-9]{0,3}|[1-5][0-9]{4}|60000)$/;
to check the value between 0-4 and 1-60000 respectively. When user provides invalid data my text area is cleared but not the ace editor. I also tried
$scope.close = function () {
rowObj.entity.value = editor.getValue();
editor.setValue("",0);
};
but that is not working.
to clear editor simply call editor.setValue("")
I've been working on a custom field, which contains a list.
I have to be able to edit the selected item on the list in a richtext editor. (this is the only missing part).
I've read the topic on opening from c# code Opening Rich Text Editor in custom field of Sitecore Content Editor .
This works nice for the "add" button, since i have to open the RTE empty(with default text...), but not for the Edit button.
My aproaches are:
Somehow in the Edit button's message field list:edit(id=$Target) pass the selected index (like list:edit(id=$Target,index=$SelectedIndex), but i don't know how to populate $SelectedIndex
Somehow in the overridden HandleMessage method get the list's selected index. I'm able to get the selected value Sitecore.Context.ClientPage.ClientRequest.Form[ID of list], but thats alone not much of a help, since i won't be able to decide which one to edit if two listitem equals.
Do the richtext editor opening and handling fully in javascript. As i saw at some script in content editor, i tried to do that, but i can't understand it clearly:
richtext editor url:
var page = "/sitecore/shell/Controls/Rich Text Editor/EditorPage.aspx";
some params :
var params = "?da=core&id&ed=" + id + "&vs=1&la=en&fld=" + id + "&so&di=0&hdl=H14074466&us=sitecore%5cadmin&mo";
and the part where i'm not sure:
var result = scForm.browser.showModalDialog(page + params, new Array(window), "dialogHeight:650px; dialogWidth:900px;");
This way the RTE opens as expected (i guess i could get the selected index from javascript and pass it as a parameter later). However when i click ok, i get exception from EditorPage.js saveRichText function: Cannot read property 'ownerDocument' of null. Am i missing some parameter?
Either of the three aproaches is fine for me(also i'm open for new better ones) as soon as i'm able to do it.
Thanks in advance!
Tamas
I was able to enter some javascript into the message:
list:Edit(id=$Target,index='+document.getElementById(ID of the select using $Target ).selectedIndex+')
this way i got the index in HandleMessage.
I'm waiting for better solutions now.
I inherited a web app that uses Dojo 1.5 and the template toolkit. I am enjoying learning dojo but it's at a slow pace.
Initially when bringing up our web form, we'll have a list of files on the right side of the page like so....
AAA_text
BBB_text_1
BBB_text_2
CCC_text
....
....
On the left side we have a search box that asks for the subset of file to use. Normally we would just type in "AAA" and then the div on the right side would find those files that match and display them after you press the "Search" key below the box.
What we are looking to do is to eliminate the "Search box" and have the list of files matching "AAA" to come up in the right side div as "AAA" is being typed, (or "BBB" or "CCC", etc).
I suppose in a nutshell it's the equivalent having the "Search" button pressed after every key is typed in the Search box.
Does this sound like a realistic goal or even possible? The code itself uses a ton of Template Tookit so I'm not looking to do any major rewrite.
If I am not making myself clear, let me know. I can elaborate for clarity. Many many thanks! Janie
EDIT: OK, I have solved a good deal of my problem so far and as it turns out, as so many of these things have a propensity to do, that what I am really needing is to get clear on how to make autocomplete work. Which is to say that I have a data source for my text box but not really sure how to tie it to the text box. I have a dojo.xhrPost routine that can handle grabbing the values.
It looks like this....
dijit.byId('files_matching').getValue(),
Googling dojo autocomplete examples gives me a zillion links and none of which are proving helpful. So I suppose my questions have transitioned to....
1. Can you even use autocomplete on a mere text box (I've seen links that say that you can only use it on combo boxes)
2. Is there a link out there somewhere that describes/shows in detail how to tie a dojo text box to a data source using dojo.xhrPost.
I am so close to solving this and I still seem to have a gaping chasm in front of me.
It's difficult to say for sure without seeing your code but if you don't have one already, I would recommend to create an ItemFileReadStore or something similar to start with. That way you can query that store locally on the client without having server requests after every key stroke.
It could look something like this:
var file_store = new dojo.data.ItemFileReadStore({ data: {
items: [{ name:"AAA_text" },
{ name:"AAA_text_1" },
{ name:"BBB_text_2" }]
}});
When you have that in place you can call a function from your text input's onChange event:
<input type="text" onchange="query_store(this.value);" />
And then you handle to actual query from the function called from the onchange event:
var query_store = function(search_for) {
var my_query = { name: search_for+"*" }; // * for wildcard match
completed = function(items, result){
for(var i = 0; i < items.length; i++){
var value = file_store.getValue(items[i], "name");
alert(value); // Instead of alert, you can save the values to your div.
}
};
file_store.fetch({ query: my_query, onComplete: completed });
}
A lot of good information about this can be found here
Hope this is at least a little helpful.