I use tinymce on my website and I always run into this annoying j is null.
In my template file I originally had the init method out in the open like in the example...
<script type="text/javascript" >
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</script>
But in the error console of Firefox I see something that says "j is null" and the reference is somewhere within the tiny_mce.js file.
Any help is appreciated. Thanks so much.
It's a tinymce bug. Internally, the tinymce code uses a <span id="mce_marker"></span> to remember the caret-position when pasting. when validating the resulting fragment, after the paste, the span is deemed invalid and removed, thus breaking the code by removing the marker.
This issue will be fixed in the next official tinymce minor release. There are some workarounds for this kind of issue. One is to add to add id and mce-data-type attribute to spans as valid elements (init setting). Example:
// The valid_elements option defines which elements will remain in the edited text when the editor saves.
valid_elements: "#[id|class|title|style]," +
"a[name|href|target|title]," +
"#p,-ol,-ul,-li,br,img[src],-sub,-sup,-b,-i,-u" +
"-span[data-mce-type]",
Related
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.
I need to do the following whith TinyMCE:
extended_valid_elements: a[href|onclick=window.open(this.href,'_system','location=no');return false;]
When doing this the character "," causes me problems and does not appear the default "onclick".
You can't put full code in extended_valid_elements - per the documentation (https://www.tinymce.com/docs/configure/content-filtering/#extended_valid_elements) its expecting attributes and (optionally) their default text. The JavaScript is not allowed and is messing up the parsing algorithm.
In extended_valid_elements you can reference onclick but you can't put the actual JavaScript in there.
If all you want is to allow JavaScript in your href values the allow_script_urls setting may do what you need without modifying extended_valid_elements:
https://www.tinymce.com/docs/configure/url-handling/#allow_script_urls
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 currently have my extended_valid_elements set up as follows.
using EPiServer.Editor.TinyMCE;
namespace Customer.Web.Templates.Plugins.TinyMCE
{
[TinyMCEPluginNonVisual(AlwaysEnabled = true, EditorInitConfigurationOptions = "{ extended_valid_elements: 'iframe[*]' }")]
public class ExtendedValidElements
{
}
}
However, I need to add the ability to enter an extra entry next to a link, as the tinyMCE is currently stripping it out.
I cant seem to get the syntax right without crashing the edit mode of the site... my logic would suggest 'iframe[*]','a[data-lightbox]' }")] should do the trick, but it doesn't. I just get an error.
Any ideas? Many Thanks.
Marc.
According to the TinyMCE documentation,
When adding a new attribute by specifying an existing element rule
(e.g. img), the entire rule for that element is over-ridden so be sure
to include all valid attributes not just the one you wish to add.
So try
EditorInitConfigurationOptions = "{ extended_valid_elements: 'iframe[*], a[name|href|target|title|data-lightbox]' }")]
I would consider using an asterisk in place of the word 'lightbox' to allow any data attribute to be used.
if that doesn't work, you can find more information at about valid_elements and extended_valid_elements on the TinyMCE site.
Hope this helps
I'm working on a site in EPiServer, and whenever I create a page property with the type set to "XHTML string" (which uses the WYSIWYG content editor in Edit mode), it wraps all content in <p> tags.
Is there any way to prevent this from happening? I can't remove the paragraph margins universally through my CSS (e.g. p {margin: 0 !important;}) since I do need the margins for actual paragraphs of text. I've even tried going to the HTML source view in the editor and manually deleting the <p> tags that it generates, but it immediately adds them back in when I save!
It doesn't happen when the property type is either a long or short string, but that's not always an option since the content might contain images, dynamic controls, etc.
This is becoming a real nuisance since it's very hard to achieve the layout I need when basically every element on the page has extra margins applied to it.
As Johan is saying, they are there for a reason - see more info here. That being said, it's not impossible to remove them. It can be done in one of two ways (taken from world.episerver.com:
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
myEditor.InitOptions["force_p_newlines"] = "false";
}
or
<script type="text/javascript">
tinyMCE.init({
force_p_newlines: false
});
</script>
You can add your own custom TinyMCE-config that removes P-elements or strip them out using regular expressions either when saving the page or when rendering the property/page.
I think it's a bad idea though. P-elements are what the editors generate the most and in most cases their content is also semantically correct. Better to wrap your property in a div with a class and adjust margins using CSS like you mention.
If you're using a version of EPiServer with TinyMCE editors, you can insert <br /> elements instead of <p> elements if you type shift-enter instead of enter. This should eliminate your margin problems.
More info at the link below:
http://www.tinymce.com/wiki.php/TinyMCE_FAQ#TinyMCE_produce_P_elements_on_enter.2Freturn_instead_of_BR_elements.3F
EDIT: My comment below answers his question better.
I discovered that while I can't remove the <p> tags from the source view (because it adds them back in automatically), if I replace them with <div> tags, it'll leave things alone. It does mean that I've got an extra <div> wrapping some elements that I don't really need, but at least a <div> doesn't add margins like a <p> does, so...good enough!