I´m using TinyMCE v4.7.9
When working with templates (https://www.tinymce.com/docs/plugins/template/)
I would like to insert the templates last in content editor, not where i stand, is there some hack to do that? Can i add a button "insert after" on dialog?
Now i'm stuck in some other P tag and my templates are DIVs.
Regards
After some trial and error and no way to find an answer to this, i found a work around.
I start the templates with <div data-insertafter
in setup on event "BeforeSetContent":
editor.on('BeforeSetContent', function (e) {
if (e.content.indexOf("<div data-insertafter") === 0) { //okej, insert after
editor.setContent(editor.getContent() + '<div class="row"></div>');//add an element to in the end
editor.selection.select(editor.getBody(), true);//select al
editor.selection.collapse(false);//set focus on that last div by inverting selection
e.content = e.content.replace("data-insertafter", "");//remove
}
});
You can certainly modify the template plugin to do that...each plugin ships in a minified and non-minified version so you can just modify the non-minified version to address this need.
Related
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'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 am using CKEditor as a back end editor on my website. It is driving me round the bend though as it seems to want to change the code to how it sees fit whenever I press the source button. For example if I hit source and create a <div>...
<div class="myclass">some content</div>
It then for no apparent reason strips the class from the <div>, so when I hit source again it has been changed to...
<div>some content</div>
I presume this irritating behaviour can be turned off in the config.js, but I have been digging and cant find anything in documentation to turn it off.
Disabling content filtering
The easiest solution is going to the config.js and setting:
config.allowedContent = true;
(Remember to clear browser's cache). Then CKEditor stops filtering the inputted content at all. However, this will totally disable content filtering which is one of the most important CKEditor features.
Configuring content filtering
You can also configure CKEditor's content filter more precisely to allow only these element, classes, styles and attributes which you need. This solution is much better, because CKEditor will still remove a lot of crappy HTML which browsers produce when copying and pasting content, but it will not strip the content you want.
For example, you can extend the default CKEditor's configuration to accept all div classes:
config.extraAllowedContent = 'div(*)';
Or some Bootstrap stuff:
config.extraAllowedContent = 'div(col-md-*,container-fluid,row)';
Or you can allow description lists with optional dir attributes for dt and dd elements:
config.extraAllowedContent = 'dl; dt dd[dir]';
These were just very basic examples. You can write all kind of rules - requiring attributes, classes or styles, matching only special elements, matching all elements. You can also disallow stuff and totally redefine CKEditor's rules.
Read more about:
Content filtering in CKEditor – why do you need content filter.
Advanced Content Filter – in deep description of the filtering mechanism.
Allowed content rules – how to write allowed content rules.
I found a solution.
This turns off the filtering, it's working, but not a good idea...
config.allowedContent = true;
To play with a content string works fine for id, etc, but not for the class and style attributes, because you have () and {} for class and style filtering.
So my bet is for allowing any class in the editor is:
config.extraAllowedContent = '*(*)';
This allows any class and any inline style.
config.extraAllowedContent = '*(*);*{*}';
To allow only class="asdf1" and class="asdf2" for any tag:
config.extraAllowedContent = '*(asdf1,asdf2)';
(so you have to specify the classnames)
To allow only class="asdf" only for p tag:
config.extraAllowedContent = 'p(asdf)';
To allow id attribute for any tag:
config.extraAllowedContent = '*[id]';
etc etc
To allow style tag (<style type="text/css">...</style>):
config.extraAllowedContent = 'style';
To be a bit more complex:
config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';
Hope it's a better solution...
Edit: this answer is for those who use ckeditor module in drupal.
I found a solution which doesn't require modifying ckeditor js file.
this answer is copied from here. all credits should goes to original author.
Go to "Admin >> Configuration >> CKEditor"; under Profiles, choose your profile (e.g. Full).
Edit that profile, and on "Advanced Options >> Custom JavaScript configuration" add config.allowedContent = true;.
Don't forget to flush the cache under "Performance tab."
Since CKEditor v4.1, you can do this in config.js of CKEditor:
CKEDITOR.editorConfig = function( config ) {
config.extraAllowedContent = '*[id](*)'; // remove '[id]', if you don't want IDs for HTML tags
}
You can refer to the official documentation for the detailed syntax of Allowed Content Rules
if you're using ckeditor 4.x you can try
config.allowedContent = true;
if you're using ckeditor 3.x you may be having this issue.
try putting the following line in config.js
config.ignoreEmptyParagraph = false;
This is called ACF(Automatic Content Filter) in ckeditor.It remove all unnessary tag's What we are using in text content.Using this command in your config.js file should be turn off this ACK.
config.allowedContent = true;
Please refer to the official Advanced Content Filter guide and plugin integration tutorial.
You'll find much more than this about this powerful feature. Also see config.extraAllowedContent that seems suitable for your needs.
Following is the complete example for CKEDITOR 4.x :
HTML
<textarea name="post_content" id="post_content" class="form-control"></textarea>
SCRIPT
CKEDITOR.replace('post_content', {
allowedContent:true,
});
The above code will allow all tags in the editor.
For more Detail : CK EDITOR Allowed Content Rules
If you use Drupal AND the module called "WYSIWYG" with the CKEditor library, then the following workaround could be a solution. For me it works like a charm. I use CKEditor 4.4.5 and WYSIWYG 2.2 in Drupal 7.33. I found this workaround here: https://www.drupal.org/node/1956778.
Here it is:
I create a custom module and put the following code in the ".module" file:
<?php
/**
* Implements hook_wysiwyg_editor_settings_alter().
*/
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
if ($context['profile']->editor == 'ckeditor') {
$settings['allowedContent'] = TRUE;
}
}
?>
I hope this help other Drupal users.
I found that switching to use full html instead of filtered html (below the editor in the Text Format dropdown box) is what fixed this problem for me. Otherwise the style would disappear.
I would like to add this config.allowedContent = true; needs to be added to the ckeditor.config.js file not the config.js, config.js did nothing for me but adding it to the top area of ckeditor.config.js kept my div classes
Another option if using drupal is simply to add the css style that you want to use. that way it does not strip out the style or class name.
so in my case under the css tab in drupal 7 simply add something like
facebook=span.icon-facebook2
also check that font-styles button is enabled
I face same problem on chrome with ckeditor 4.7.1. Just disable pasteFilter on ckeditor instanceReady.This property disable all filter options of Advance Content Filter(ACF).
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.pasteFilter.disabled = true;
});
I want to add a new attribute to *tt_news* link, such as an id, class or onclick function.
How can I do this?
unfortunately, there is no typoscript solution to add more attributes to the "more"-link in tt_news displayList and displayLatest views. you would have to hack the extension - wich is not a good idea (*).
if you only need it to call a javascript function, then the easy solution is to use jQuery or another framework to add click-listeners to the a tags. an example in jQuery:
$('div.news-msg a').click(function(e){
e.preventDefault(); //prevent link from opening
var newsurl = $(this).attr('href');
//...do more stuff...
});
(*) don't take my word for it - see the following discussions (in german):
http://www.typo3.net/forum/beitraege/thema/27238/ or http://www.typo3.net/forum/beitraege/thema/67165/
I would like to set an own table style as default style within the TinyMCE editor (version 3.4.9 within Moodle 2.2.3).
Right now, my new styles are shown in the dropdown, but I cannot manage to get one as the default table style. The default value is always "-- not set --", which means that no table style will be used.
This is how it looks at the moment:
https://img.skitch.com/20111226-f4wgp8kudx45t6e2s17yse4cq6.jpg
This is how it should look like at the end ("Tircia Style" should be default):
https://img.skitch.com/20111226-dcf3t3w7qxagst1xgr2ieas26b.jpg
Pictures are from the TinyMCEforum.
When you initialize tinymce please add the path to a new css file which will define the styles used within the editor.
tinymce.init({
content_css: [
'/css/innerLayout.css'
]
});
Some sample styles for innerLayout.css for tables -
.mce-content-body table{width:100%;border-spacing:0;border-collapse:separate;border:0}
.mce-content-body table tr:nth-child(even){background:#FAFAFA}
.mce-content-body table caption,.mce-content-body table td,.mce-content-body table th{padding:15px 7px;border:0;font:inherit}
.mce-content-body table th{font-weight:400;color:#6E6E6E;border-bottom:2px solid #B9B9B9!important;
Other styles can be found here - link
Don't modify core files. I realize there previously wasn't a choice, but in TinyMCE 4.x there is now a way to set default table styles with table_default_styles.
http://fiddle.tinymce.com/iUeaab
in tables.js add the following code:
function init() {
settings = tinyMCE.settings;
settings["table_styles"] = "default1=red;default2=blue;" + settings["table_styles"];
tinyMCE.settings["table_styles"] = settings["table_styles"];
I had the same issue and I tried to solve it by passing Configuration or changing library JavaScript files. I started doing reverse engineering of table.js (/tiny_mce/plugins/table/js/table.js). But, no luck.
So, I went to table.htm (/tiny_mce/plugins/table/table.htm) which is template file for table plugin's modal dialog box. Commented out preset option {#not_set} form the select control.
<tr id="styleSelectRow">
<td><label id="classlabel" for="class">{#class_name}</label></td>
<td colspan="3">
<select id="class" name="class" class="mceEditableSelect">
<!--<option value="" selected="selected">{#not_set}</option>-->
</select>
</td>
</tr>
Now, you should pass table_styles always to the initial configuration when we initiate TinyMCE.
var varTimyMCE = $("textarea").tinymce({
table_styles : "Custom 1=classTable1",
});
This is not the ideal solution but it works for now. I hope TinyMCE developer will give configuration options to control select control in the future releases.
You can edit the plugin.js(\tinymce\js\tinymce\plugins\table\plugin.js) if you are using the unminified tinyMCE.js. On the current version it is line 1872. I added to make the default table styling responsive.
html = '<div class="table-responsive"><table class="table"><tbody>'; // line 1882 or 1916
html += '</tbody></table></div>'; // line 1884 or 1928