Question

Our application uses ckeditor to generate user friendly email content to send email to clients. Email content is prepared by business people so they don’t know any html at all.

So I want ckeditor to add inline style to paragraphs(<p> elements) such as <p style="line-height:20px;"> automatically instead of just generating <p>.

Since the generated output is emailed I don’t have any chance to use CSS file.
I tried to wrap <p> elements within <table> but I couldn’t change “line-height” property in that way, since email sites like gmail, yahoo have already their own styling for <p> elements. I must use inline style for each <p> element I think and I don’t know how to achieve this.

Can anybody help?

Thanks

Answer 1

There isn’t a setting or quick code modification to do this.

Here are Two approaches.

If you would like to annoy your users do this (see AlfonsoML’s comment):
If you would like the flexibility to do more than the <p> styling as the content is updated in the editor, the best approach would likely be to use the “onchange” plugin created by @AlfonsoML. You can download it here:
onChange event for CKEditor

He demonstrates how to use it to show the editor content in another <div> here:
pass Ckeditor value to div text without html tags?

---

After installing the plugin, you could do something like this:

CKEDITOR.on('instanceCreated', function (e) {
    e.editor.on('change', function () {
        var editorContent = CKEDITOR.instances['TextAreaID'].getData();
        editorContent.replace('<p>', '<p style="line-height:20px;">');
        CKEDITOR.instances['TextAreaID'].setData(editorContent);
    });
});

---

Better Approach:
If you only want to do the <p> styling and prefer to avoid the overhead of running that function every time the content changes, you could load a stylesheet to apply the style to the <p> elements within the editor with this config setting:

config.contentsCss = '/css/mysitestyles.css';

Then use an onsubmit function with your form. Something like this:

<form name="ff" id="ff" action="xx" method="POST" onsubmit="return doSubmit();">

The function:

function doSubmit() {
    var emailContent = $('textarea#TextAreaID').val();        
    emailContent.replace('<p>', '<p style="line-height:20px;">');
    $('textarea#TextAreaID').val(editorContent);
};