Problem with the line break

jalape · November 2018

Good morning
In Datatable by default, the text that we write in a text with paragraph breaks, is shown in the table continuously. In the Database, PhpMyAdmin is written correctly, but there is no problem with the editor. There is a way to change this property and to show it as it is written.
In the example:
This is an example.
Second line.
Third line
Appears
This is an example. Second line. Third line
Thank you

rf1234 · November 2018

Just use HTML <br> to get a line break when rendering like here:

columns: [            
    {   data: "creditor.name",
        render: function ( data, type, row ) {
            return row.creditor.name + '<br>(' + row.creditor.city + ')';
        }
    },

This returns e.g.:
"That Bank
(SomeCity)"

jalape · November 2018

Thanks for answering rf1234,
I'm afraid I have not explained myself well. My intention is not to join two fields of the table.
I only have one field "tb_media.detalle", that when writing with the editor, with a textarea, write:
A line
Two lines
Three lines
And in the table it shows:
One line Two lines Three lines

I need you to keep the separation between the lines.

Thank you

kthorngren · November 2018

Sounds like you might want to use one of the WYSIWYG plugins for Datatables:
https://editor.datatables.net/plug-ins/field-type/

I've had the best luck with Quill.

Kevin

rf1234 · November 2018

then you need to save the HTML line break in your database field. Otherwise it won't work. Whether or not PHPMyAdmin shows line breaks in its display is irrelevant.

so tb_media.detalle should contain: "line one<br>line two<br>line three".

Just saw Kevin's comment above: Yes, you might also use something like Quill for example. Quill will generate the required HTML for you based on what you are typing on the screen. This is then saved to the database. In this case you don't have to insert line breaks etc. programmatically yourself before making the insert into the database.

rf1234 · November 2018

Here is an example: I entered this text into a Quill window which is part of my Data Table / Editor:

And this is the content of the field in the database:

<div>This is  a sample comment consisting 
of three lines:</div>
<div>line one</div><div>line two</div>
<div>line three</div>
<div>and a couple of more bullets</div>
<ul><li>a</li><li>b</li><li>c</li></ul>

Please note: The line breaks I made in the code field above are arbitrary! They are irrelevant for rendering. Only the HTML matters for rendering.

jalape · November 2018

I will try with Quill, I hope to know how to integrate it.
Thanks for the answers.

jalape · November 2018

I have managed to incorporate Quill in my editor of Datatable, it seems very interesting. I have used the information that appears at this address:
https://editor.datatables.net/plug-ins/field-type/editor.quill
In the text window I can give all kinds of format to the text, but when I update and close the editor box, the design is lost and it is not saved in the database. Is it necessary for the field to have a certain configuration?

rf1234 · November 2018

Hi, this is my Editor instance for my contract description. Works fine:

var contractDescriptionEditor = new $.fn.dataTable.Editor({
    ajax: {
        url: 'actions.php?action=tblContractCred'
    },
    table: "#tblContract",
    fields: [{
            name: "contract.description",
            type: "quill",
            toolbar: quillToolbar,
            link: quillLink
//                ,
//                opts: {
//                    placeholder: 'Please enter your description',
//                    theme: 'snow'
//                }
        }
    ]
});

The variable "quillToolbar" is either set to true (boolean) in case user language is English. Or it contains complete toolbar definitions in different user languages.

"quillLink" contains either the word "default" (string) in case of English. For other languages it contains a complete link definition in the respective language

In php it is really simple. You just need to add the field instance:

Field::inst( 'contract.description' ),

In mySql I defined the field as MEDIUMTEXT.

Please check whether you have both things installed:
a) the Quill field type plugin (Javascript and CSS)
b) Quill itself (Javascript and CSS)

jalape · November 2018

Thanks for your time.
I am using the basic example of the Datatable editor, before incorporating it into my project. I have tried to follow your instructions, but the problem continues.

In the database, I have a "datatables_demo" table with an "office" type field mediumtext

In staff.php the field appears as:
Field::inst( 'office' ),

The quill files used are the following:
CSS
<link rel="stylesheet" type="text/css" href="quill.snow.css">
<link rel="stylesheet" type="text/css" href="editor.quill.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
JS

editor = new $.fn.dataTable.Editor( {
    ajax: "controllers/staff.php?action=example",
    table: "#example",
    fields: [
        {
            label: "Office:",
            name: "office",
                type: "quill",
                        toolbar: "quillToolbar",
                        link: "quillLink"
        },
        ]

jalape · November 2018

JS
code.jquery.com/jquery-3.3.1.js
quill.min.js
1.10.19/js/jquery.dataTables.min.js

kthorngren · November 2018

Looks like you might be missing editor.quill.js.

Kevin

rf1234 · November 2018

Sorry but passing strings that contain variable names will not work:

toolbar: "quillToolbar",
link: "quillLink"

You either define individual variables (as described above) and pass them or you pass nothing or you just pass the defaults for English like this:

toolbar: true,
link: 'default'

In your css the base css for quill is missing. I use an older version of quill - so that would need to be adjusted of course in your css:

<!-- Quill: plugin and field type for Editor-->        
<link rel="stylesheet" type="text/css" href="DataTables/Quill-0.20.1/quill.base.min.css"/>
<link rel="stylesheet" type="text/css" href="DataTables/Quill-0.20.1/quill.snow.min.css"/>
<link rel="stylesheet" type="text/css" href="DataTables/FieldType-Quill-1.5.6/editor.quill.min.css"/>

In your JS - as Kevin pointed out - your editor.quill.js (or as in here: editor.quill.mins.js) is missing as well:

<!-- Quill: plugin and field type for Editor-->    
<script type="text/javascript" src="DataTables/Quill-0.20.1/quill.min.js"></script>
<script type="text/javascript" src="DataTables/FieldType-Quill-1.5.6/editor.quill.min.js"></script>

So you have one css and one js file missing while you mention the standard dataTables css and js files which are of course relevant for using data tables in general but not specifically for using quill.

jalape · November 2018

In the following link the solution appears:
https://datatables.net/forums/discussion/40824/quill-saving-the-formatted-text
It is about editing the editor.quill.js file by changing these lines.
get: function ( conf ) {
return conf._quill.root.innerHTML;
},

set: function ( conf, val ) {
conf._quill.root.innerHTML = val !== null ? val : '';
},

But Quill's performance is disappointing. The first time we format, the box appears only with the text we write. The problem is when we do a second edition. In the Quill box, the text written with the html tags appears. If we update creates new labels, with which the table shows the first ones as text.

kthorngren · November 2018

I use the following:

    get: function ( conf ) {
        return conf._quill.getText();
    },
  
    set: function ( conf, val ) {
        conf._quill.setText( val !== null ? val : '' );
    },

I use this for both plain text (YAML format) pages and pages with HTML markup. Not sure if it will help with your solution.

The Quill solution doesn't work for everyone. I also tried CKEditor and TinyMCE, found here:
https://editor.datatables.net/plug-ins/field-type/

Quill worked best for my needs, took a bit of fiddling to figure it out. I also tried the other two but they didn't work well for me. Others on the forum found opted for one of the others over Quill. I suggest trying all 3 and seeing which one works for you.

Kevin

rf1234 · November 2018

Thanks for sharing, Kevin. Now I remember why I never upgraded my Quill and Plugin versions ... Because the newer versions had issues for me.
If you want to use Quill 0.20.1 you would also need an old version of the plugin.

jalape · November 2018

I tried the ckeditor4 plug-in:
https://editor.datatables.net/plug-ins/field-type/editor.ckeditor4
and it worked for me the first time. Version 5 does not, we'll have to give it time.
Thank you all for the contributions.

Problem with the line break

Problem with the line break

Replies

Howdy, Stranger!

Categories

DataTables

Problem with the line break

Problem with the line break

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables