I have an tinymce editor in admin area where I want to use script tag. With using follows, I am able to use tag and save it. After that I can see it in database as saved. But the problem is that when I edit the same page again and the editor preloaded with content then it stripped the tag somehow. So I can not see it and edit it again.
valid_children : '+body[style],+body[script]',
extended_valid_elements : '*[*]',
So please let me know if there is any way I can stop these script tag stripping off. I have tried to consol log the editor.getContent() but it also show content without tag whereas I can see it in DB and frontend source.
Thanks
You are likely getting tripped up by trying to load the closing script tag as part of a string in JavaScript itself.
If you have a closing script (</script>) tag in a JavaScript string the interpreter is likely interpreting that as the closing of your script block and not part of the content in the string. In many cases this will simply break the page's JavaScript completely.
Here is an example in TinyMCE Fiddle that shows the correct way to pass a </script> tag in a string: http://fiddle.tinymce.com/Fvhaab
For example:
tinymce.editors[0].setContent(`
<p>This is NEW content in TinyMCE!</p>
<script>
var x = "test";
var y = 10;
</script>
`);
...will not work. If you use this attempt for the closing script tag you will see the editor does not appear at all as that closing script tag prematurely ends the entire section of JavaScript.
Instead you can escape the / in the closing script tag:
tinymce.editors[0].setContent(`
<p>This is NEW content in TinyMCE!</p>
<script>
var x = "test";
var y = 10;
<\/script>
`);
...and you will see that the script is loaded into TinyMCE as you would expect.
Related
I have a richtext component, I gave input as "foo" to richtext component, and it generated
<p>foo</p>, I'm trying to pass this generated content from JSP to JS using the following code.
<script>
var jsvariable = '<%=jspvariable%>'
</script>
the above line throws "unterminated string literal" error, as the JS variable contains
ptagstarts foo ptagends
I'm using the value in JS as I need this variable in other pages as well.
May I know how we to remove this error.
From what you wrote, seems, that you have in your jspvariable string </script>. Html parser treats it as ending of the script block, and you getting invalid script block.
You can check source of your page to be sure, that I am right.
As Thomas suggested, you can escape your content. But as long as this content is provided by user, I would use XssApi, to prevent xss attack as well.
So it would be something like:
var jsvariable = '<%=xssApi.encodeForJSString(jspvariable)%>'
Or:
var jsvariable = '<%=xssApi.filterHTML(jspvariable)%>'
In first case you will get that <script> block from richtext component into your js variable. It will be encoded, and you will not get this error, but I think you do not need it.
In second case, you, should get only text value from you component.
UPDATE 1
Also, as I wrote you in comments, It would be nice to see the way you extract content from your richtext component, because I think, there is a better way of doing this, so you will get only text without anything else.
I'm trying to allow javascript in rich text editor inputs in my Umbraco setup. I'm using Umbraco 7.2. I've enabled the script tag in tinyMceConfig.config so the editor no longer eats my script tags. The problem now is that my content is cut off.
For example, in my RTE I put:
<p>before</p>
<script>
alert('blam');
</script>
<p>after</p>
This get's transformed by TinyMCE to:
<p>before</p>
<script>// <![CDATA[
alert('blam');
// ]]></script>
<p>after</p>
The problem is the value of Umbraco.Field("myRte") ends up being:
<p>before</p>
<script>// <![CDATA[
alert('blam');
// ]]
It seems related to CDATA. Does anyone else have javascript in RTE working in Umbraco 7?
A possible workaround would be to create a macro that would allow you to insert a script into the RTE. The macro would have a single Textarea parameter where you would paste in your script tag, and you would simply render the parameter value as raw Html. However, it might be a good idea to check that the input is valid html before you attempt to render it on the page.
If you use a razor macro the partial view could look like this:
#inherits Umbraco.Web.Macros.PartialViewMacroPage
#{
var script = Model.MacroParameters["script"].ToString();
}
#if (!script.IsNullOrWhiteSpace())
{
#Html.ValidateHtml(script)
}
Where ValidateHtml is an extension method to the Mvc HtmlHelper:
public static IHtmlString ValidateHtml(this HtmlHelper helper, string input)
{
if (!string.IsNullOrEmpty(input))
{
var htmlDoc = new HtmlDocument();
htmlDoc.LoadHtml(input);
if (htmlDoc.ParseErrors.Count() == 0)
{
return new MvcHtmlString(input);
}
}
return null;
}
The helper method uses the Html Agility Pack and I got the code from an answer posted to another SO question.
I've tested this on an Umbraco 7.2.1 install and it works fine even if you select the "Render in rich text editor and the grid" option.
My solution is not write direct script in editor, write it in a test.js file after that include
<script src="https:/....test.js></script>
In tiniMceConfig.config file (config folder)
validElements tag, add this
,script[type|src|language]
so it will look like this
<![CDATA[+a[id|style|rel
.....
,bdo,button,script[type|src|language]]]>
Test and work on Umbraco 4.7.x. I'm not test on umbraco 7
I was trying to type the few lines in firefox and expect to use getContent{format: text} to only fetch the content.
Here is the content: (I have three lines and each start with the leftmost postion)
"text me if
there is
a chance"
It works in chrome that it gives the following format when running getContent.
...
<body>
text me if
there is
a chance
</body>
...
However in firefox I got:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
text me ifthere isa chance
</body>
</html>
It seems to strip off the line break. Could someone help on this?
In TinyMCE 4+ there is no option to disable stripping off line breaks. For me a littly dirty hack worked - just replace line breaks with <br> tags before initializing TinyMCE:
//imagine that your textarea is called textarea#message
var a = $("textarea#message").val();
a = a.replace(/\n/g, '<br />');
$("textarea#message").val(a);
If you need afterwards text without <br> but with line breaks, just apply the same transformation vise versa:
var a = $("textarea#message").val();
a = a.replace(/<br\s*[\/]?>/gi, "\n");
$("textarea#message").val(a);
Maybe a bit late to the party, but it just happened to me to walk into the same problem. It seems firefox has some issues with linebreaks in text that gets inserted into a textarea. My solution was something like this:
var text = text.replace("\r\n", "\\r\\n");
I guess FireFox is just a great fan of Slash(es)...
For the full solution I used the following code, which does not use the format: text, but format: html which get parsed by the DOMParser first:
var text = editor.getContent({ format: 'html' });
var doc = new DOMParser().parseFromString(text, 'text/html');
text = doc.body.textContent.replace("\r\n", "\\r\\n");
In case you still want to have tags within the code to display aswell as the link as the text within the tag add this line before the DOMParser:
text = text.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, ' $2: $1 ');
Which will change:
Go to some page
to this:
Go to some page: //some.link
Cheers!
To make sure things like this don't happen you should use a <br> tag instead of a regular line brea (ctrl+return). This is the default procedure in html code.
I got around it by using DOMParser().
tinymceContextValue = tinymce.get('abstract1').getContent({format: 'html'});
var doc = new DOMParser().parseFromString(tinymceContextValue ,'text/html');
tinymceContextValue = doc.body.textContent;
In this case, we could still preserve the line break. But be noted that do not change the tinymce configuration to enable . It will not work with it.
I'm trying to find a solution to avoid CKEditor, but also the older FCKeditor strips out any
<i> tag from previously inserted content to the db.
Case:
I insert html content to the db, some content contain the <i> elements.
I do this with the CKEditor.
Everything works perfect and the content shows up on the webpage.
But when i want to edit the previously inserted content, the <i> elements are missing.
In my specific case i use:
<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i>
Of course if i disable the editor, the content shows up just fine in the textarea.
When the protectedSource solution is used, i tags are no longer stripped, but img tags stop showing up in the WYSIWIG mode of CKEditor (I'm using 4.3.1). The solution that worked better for me is to disable removing empty i tags using CKEDITOR.dtd.$removeEmpty
For example, I added the following to the config.js
// allow i tags to be empty (for font awesome)
CKEDITOR.dtd.$removeEmpty['i'] = false;
Note: This should be placed outside the CKEDITOR.editorConfig = function( config ) function.
I found the solution for this specific problem i ran into with the <i> tag
The original answer i got from drupal forum
The fix or tweak (you name it) for it is to set the following into the ckeditors config.js:
// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><\/i>/g);
Thanks to Spasticdonkey for pointing me to the link.
Here is what works for me
add the 3 lines of code below in the same order in the drupal ckeditor profile setting
admin/config/content/ckeditor/edit/Full
ADVANCED OPTIONS >> Custom JavaScript configuration
config.allowedContent = true;
config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
First line is pretty much turning off the advanced filtering
Second line is allowing ALL class (), any style {} and any attribute [*] for the p,div, li and ul.
The last line is for the empty tag...this line works with images...I have found that if you use
config.protectedSource.push(/]*></i>/g);
it strips out the tag while editing.
for 4.3 version ckeditor
in config.js (after config section) paste
CKEDITOR.dtd.$removeEmpty['b'] = false;
and write widget with code
CKEDITOR.plugins.add( 'bwcaret', {
requires: ['widget'/*, 'richcombo'*/],
icons: 'bwcaret',
init: function( editor ) {
editor.widgets.add( 'bwcaret', {
button: 'Create a caret',
template: '<b class="caret"></b>',
allowedContent: 'b(!caret)',
requiredContent: 'b(!caret)',
upcast: function( element ) {
return element.name == 'b' && element.hasClass( 'caret' );
},
});
}
});
There are two possible problems:
Read about Advanced Content Filter. CKEditor is removing elements which are not allowed, but you can extend filter's rules.
However, if the problem is that CKEditor removes empty <i> elements, then you need to find other way of using it. CKEditor is not a WYSIWYG website builder. It is a document editor, so the loaded content must have a meaning. Empty inline element does not have any meaning, therefore it is removed, because otherwise editor would not know what to do with it.
One of the possible solutions in the (near) future, will be to use Widgets system, to handle those empty elements. But for now I advice you to check the CKEDITOR.htmlDataProcessor and short guide how to use it.
i found a permanent solution for it.actually what happened ckeditor removing only blank tag.whatever the tag is, may b <i> tag or <span> tag
if you are using any icon like font-awesome,maeterlize icon etc ...
you can stop it by using below code in your config.js file
CKEDITOR.dtd.$removeEmpty.span = false;
CKEDITOR.dtd.$removeEmpty.i = false;
if you are using more blank tag then you need to add the tag name after $removeEmpty
CKEditor 4 removes emtpy tags, so here you can do trick without changing any config settings.
Replace
<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i>
With
<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"> </i>
Now <i></i> tag have content i.e. so CKEditor will not remove that tag.
I'm trying to set the value of a textfield using the following code:
if (ie.TextField(Find.ById("testField")).Exists)
ie.TextField(Find.ById("testField")).Value = "Test";
The code passes without raising an error, however the textfield is not filled with the value.
I get an exception when I execute the following line:
ie.TextField(Find.ById("testField")).Focus()
The textarea is a tiny_mce editor and one of the html attributes is: style="display: none;"...
Any ideas how I can modify the value of such a field using Watin?
Thanks.
First tinymce is not a textarea. tinymce hides your textarea on initialization and creates a contenteditable iframe which is then used to allow text editing, styling aso...
Second if you want to write the editors content back to the hidden textarea you may do this using
tinymce.get('testField').triggerSave();.
Another way to set the value of your textarea is:
tinymce.get('testField').getDocumentById('testField').value = 'new value';
In case you want to write content directly to your tinymce editor you may choose on of the following
tinymce.get('testField').setContent('my_new_content'); // replaces the editors content
or
tinymce.get('testField').execCommand('mceInsertContent',false, 'my_content_to_be_added'); // adds the content at the carat postion
Here is a simple way to handle this using the Watin Eval function:
var js = "tinyMCE.get('body').setContent('" + bodyCont + "')";
var s = ie.Eval(js);
'body' needs to replaced with the id of the textarea that is hidden by tinymce - do a "view source" in your browser window to find this id.