I've been searching for quite a while but neither solution worked.
I have created a backend module which shall display orders in a table. I achieved creating a table containing the wanted information BUT I need some more functionality and I thought there would be an easy way.
The table should be sortable, filterable and searchable - functions that TYPO3 uses for displaying datasets in the backend already.
I have tried to make use of the DataTables which are already included by the core of TYPO3 and should be easily accessible according to the following links:
https://forum.typo3.org/index.php/t/210780/
https://typo3.com/blog/how-to-use-javascript-in-typo3s-backend/
TYPO3 backend modul DataTable is no function
I added a js-file according to the answer from Philipp Wrann in the first link:
/Resources/Public/JavaScript/OrderingTables.js:
define('TYPO3/CMS/GiPdShop', ['jquery', 'datatables'], function($) {
var OrderingTables = {};
// Initialize dataTables
OrderingTables.initializeDataTables = function() {
$('#orders-table').DataTable();
};
$(document).ready(function() {
// Initialize the view
OrderingTables.initializeDataTables();
});
});
As there are no errors and the file is included if I check in the dev-tools I believe this is not a bad approach. To use the file I added the following to the <f:be.container> in the template:
includeRequireJsModules="{0: 'TYPO3/CMS/GiPdShop/OrderingTables'}"
Yet it doesn't create a DataTable, no added classes to the rows or cells of the table and thus I assume that there is some kind of error, maybe a missing configuration, maybe another option I missed out somehow.
The only other solutions I found so far seem rather complicated and I would love to keep it as simple as possible (I am not a professional in TYPO3 (yet) and the module should already be functional).
Can someone see a mistake I haven't found? Is it even possible to add the wanted functionality in such an easy way?
Any help would be highly appreciated.
It's really a stupid little thing I was missing.
The path 'TYPO3/CMS/GiPdShop' in the definition was missing the module.
So the correct path would be 'TYPO3/CMS/GiPdShop/OrderingTables', the same I have added in the template.
Really stupid but maybe this helps someone someday who gets stuck as well...
#PaulBeck thanks again!
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/
What is the recommended way to stick Extjs elements in your html?
At the moment I have
<div><script type='text/javascript'>
Ext.onReady(function(){
new Ext.grid.Panel({params...}).show();
})
</script></div>
But this feels very awkward ( Embedding script tags all over the place rankles my soul )
Components have a renderTo, but if the html element doesn't exist, - I think? ( not too sure about that ) - that the component still gets created.
It depends entirely on what you want to do, check out the learning centre on Sencha:
http://www.sencha.com/learn/
http://www.sencha.com/learn/components/
Usually you use a complete layout system, though if you want to attach to an existing element, such as a div you'll need something like renderTo.
I got the problem that the HTMLWorker.ParseToList function will throw an exception ( 404 - not found ) when a tag like:
<img alt="none" src="/image.jpg" />
Has a deadlink in the src.I'd like it to just not load the image and go on.
Does anyone now a way to configure this or has similar solution in mind?
The path must be absolute ex: c:\images\image.jpg
You can do it with
Server.MapPath(relativeUrl)
You can extend HTMLWorker to include a filter to remove (or substitute) whichever HTML elements you want before passing your HTML to your extended HTMLWorker's ParseToList() method.
look into this thread
http://www.draggerco.com/node/2
works great for me...
i just replaced
string siteUrl = HttpContext.Current.Request.Url.AbsoluteUri.Replace(HttpContext.Current.Request.Url.AbsolutePath, "");
with
string siteUrl = HttpContext.Current.Server.MapPath([your_path_for_images_in_string]);
** Note: for this, use HtmlWorker.Parse() method
I'am fixed. But This;
c:\images\image.jpg as localhost:3524\images\image.jpg
<img alt="none" src="http://localhost:3524/image.jpg" />
Create your host configuration.
html = html.Replace("img src=\"", "img src=\"http://localhost:3524");
it's worded.