DJANGO-CMS PlaholderFields CKEDITOR TEXT_HTML_SANITIZE - ckeditor

I've implemented a PlaceholderField outside my CMS and it works fine but Text copied from MS-Word keeps all dirty markup (like <font face="Times New Roman, serif"><font size="3">) which I want to get rid of. When I copy the same Text in a normal CKEditor field it works as explained in djangocms-text-ckeditor source (settings.TEXT_HTML_SANITIZE using html5lib).
Is there a parameter I can add to settings.CMS_PLACEHOLDER_CONF in order to make it work? Or any idea to implement it?
You may ask "Why not using directly HTMLField with djangocms-text-ckeditor?" Because I want to have access to Filer-File and Filer-Image plugins available in PlaceholderField.

The following setting is not part of the placeholder config, they are separate settings in the settings.py file:
TEXT_HTML_SANITIZE = True
CKEDITOR_SETTINGS = {
...
'basicEntities': True,
'entities': True,
...
}
Taken from: https://github.com/django-cms/djangocms-text-ckeditor#configurable-sanitizer

Related

Use of older Telerik RTF/HTML editor

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).

Inserting a link into CKEditor

I'm trying to insert a link into an instance of CKEditor using the following line: -
CKEDITOR.instances.CKInstance.insertHtml('My Text');
All that happens though is that 'MyText' is inserted without the link. Anyone know how to insert the link properly?
PS. I know that CKEditor comes with a plugin to insert links but I'm doing my own one
Thanks
Shazoo
I guess that you're using CKEditor 4.1 or newer. And since you don't use the official link plugin, your editor discards all <a> tags. You need to properly configure Allowed Content Filter so your editor accepts <a> tags back again.
You can do it when defining your command, like this:
// Assuming you want a dialog-driven command...
editor.addCommand( 'yourCommand', new CKEDITOR.dialogCommand( 'link', {
allowedContent: 'a[!href]', // Allow <a> in the editor with mandatory href attr.
requiredContent: 'a[href]' // This command requires <a> with href to be enabled.
} ) );
Or in editor's config with config.extraAllowedContent = 'a[!href]'. This is not recommended though as you develop a plugin (right?), which should bring a custom command.

wysihtml5 - setting a value won't work, because 'sandbox iframe isn't loaded yet'

I'm just working on a little webservice. Therefore I am using an AJAX call and append my data to a table on my website. Here I can read and update already existing entries or write new entries. Everything works fine.
I want to have the possibility to update already existing with the wysihtml5 editor. I already integrated this editor on my website and I can use it on new entries. That works, too.
But now there's the problem with existing data. When it comes to the form to update data, I want the existing data being displayed as the value. Everything works fine on all inputs, just the wysihtml5 don't work.
I already know that there's an iframe and that's why I can't set the value of the textarea. I searched for a solution and found the following code (last line):
var editor = new wysihtml5.Editor("textareaid", { // id of textarea element
toolbar: "wysihtml5-toolbar", // id of toolbar element
parserRules: wysihtml5ParserRules, // defined in parser rules set
});
editor.setValue('Here's the content', true);
Usually this should work, but no content appears and the console just tells me:
Error: wysihtml5.Sandbox: Sandbox iframe isn't loaded yet
I tried it with a timeout-function but nothing works. Searching on the internet it also seems that there is noone else with that problem. I hope you can help me out, would be great!
Is there a way to set the value?
This code work for me
$("#product_details").data("wysihtml5").editor.getValue();// to get the value
$("#product_details").data("wysihtml5").editor.setValue('new content')// to set the value
I got the solutions, below code worked for me
$('#id ~ iframe').contents().find('.wysihtml5-editor').html(my_html);
This work for me
$('.wysihtml5-sandbox').contents().find('.wysihtml5-editor').html(my_html);
the ".wysihtml5-sandbox" is a class name of iframe, create by wysihtml5 by default.
I finally got it working by myself. I just change the second parameter of setValue to false. I don't know why, but it works then.
this code worked for me :
var wysihtml5Editor = $('#text_editor').data("wysihtml5").editor;
wysihtml5Editor.setValue("<p>foobar</p>", true);
console.log(wysihtml5Editor.getValue());

Prefill jqGrid Advanced Search filters?

In the search_config documentation page, I see that there's something that looks like it would allow me to specify a default value (defaultValue) to populate the search field with, but I can't get it to work. I specified a default value, but when I pull up the search box, nothing is filled. Also, I'm using multipleGroup: true, so it's the advanced advanced search module, if that makes any difference.
I figured this out by looking through the source code, and since I can't seem to find the feature documented on the wiki or anywhere else, I'll answer my own question. jqGrid DOES have a way of creating default search templates to use, and it's pretty useful. Hopefully my explanation will be useful for someone else.
When creating the searchGrid part of jqGrid $('#gridDiv').jqGrid('searchGrid', options); (or in the searchGrid options section when creating the navGrid part $('#gridDiv').jqGrid('navGrid', '#navDiv', {}, {}, {}, {}, searchOptions); ) there are two options that we care about, tmplNames and tmplFilters.
tmplNames is simply an array of strings of what the template names should be. These will appear as the text in the template select box that will show up. Something like ["Bob's Template", "Joe's Template"].
tmplFilters is also an array of strings, but these strings are the JSON encoded string that jqGrid sends to the php script when searching for something. (tmplFilters may also work as an array of the objects themselves, but I haven't tried) So something like this.
{
"groupOp":"AND",
"rules":
[
{"field":"comnumber","op":"ge","data":"19000"},
{"field":"expStatus.expStatID","op":"eq","data":"4"}
]
}
So all of this is pretty easy actually, except that this still doesn't cover setting a default template. This is only good for setting additional templates to choose from. jqGrid has a predefined default template, which is what appears when you initially open the search. To change this, after creating the jqGrid, you need to use setGridParam and change the postdata property
$('#jqGrid').setGridParam({
postData: {
filters: defaultFilter
}
});
where defaultFilter is the same type of JSON'ed query string as before. Additionally, if the 'reset' button is clicked, this default template goes away, so you'll need to set it again when this happens, which is easy enough to accomplish by adding an onReset function to the initial jqGrid call:
onReset: function () {
$('#jqGrid').setGridParam({
postData: {
filters: defaultFilter
}
});
}
And that's it! With some use of AJAX and some new buttons, I was also able to read templates from a local file rather than having them defined in the javascript and was also able to take the current query and create/overwrite templates in the file. Then they became really useful.

ck editor forcefully removing my html and body tags

I am trying to edit an entire html using fck editor. So that should contain tags like html, body ,DOCTYPE etc. But my problem is when I submit the data, fckeditor forcefully remove the above tags from the content. I want to avoid this. Is there any configuration issue there.
-Arun
look at this config option. CKEDITOR.config.fullPage. I believe it will permit you to edit the full page (and will preserve the contents) (i haven't used it.)
'ckEditor' (as it's now known) shouldn't allow html/script tags directly within the content. However if you have the latest version there is a 'source' view which allows all the source to be edited directly and may give you what you want.
Arun User this one .This is best solution for you.
var CKcontent = false ;
$(document).ready(function(){
// setup ckeditor and its configurtion
CKEDITOR.replace( 'content1',
{
//fullPage : true,
customConfig : 'config.js' ,
toolbar : 'BasicToolbar' ,
height : "300"
});
});
Set only fullpage : false if not show HTML content otherwise set true
Note: it implemented by me in our development

Resources