ckeditor更改生成了段落元素的输出

Question

我们的应用程序使用ckeditor生成用户友好的电子邮件内容，以便向客户发送电子邮件。电子邮件内容是由商务人员准备的，所以他们根本不知道任何html。

因此，我希望ckeditor自动为段落（<p>元素）添加内联样式，如<p style="line-height:20px;">，而不仅仅是生成<p>。

由于生成的输出是通过电子邮件发送的，所以我没有任何机会使用CSS文件。我试图将<p>元素包装在<table>中，但我无法以这种方式更改"行高"属性，因为像gmail、yahoo这样的电子邮件网站已经有了自己的<p>元素样式。我认为每个<p>元素都必须使用内联样式，但我不知道如何实现这一点。

有人能帮忙吗？

感谢

Answer 1

没有设置或快速修改代码来做到这一点。

这里有两种方法。

如果您想惹恼您的用户，请执行以下操作（请参阅AlfonsoML的评论）：
如果您希望在编辑器中更新内容时能够灵活地进行<p>样式之外的操作，那么最好的方法可能是使用@AlfonsoML创建的"onchange"插件。您可以在此处下载：
on CKEditor 的更改事件

他演示了如何使用它在另一个<div>中显示编辑器内容：
将Ckeditor值传递给没有html标记的div文本？

---

安装插件后，你可以这样做：

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);
    });
});

---

更好的方法：
如果您只想进行<p>样式设置，并且希望避免每次内容更改时运行该函数的开销，则可以通过以下配置设置加载样式表，将样式应用于编辑器中的<p>元素：

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

然后在表单中使用onsubmit函数

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

功能：

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