Question

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

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

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

有人可以帮忙吗？

由于

Answer 1

没有设置或快速代码修改来执行此操作。

以下是两种方法。

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

他演示了如何使用它来显示另一个<div>中的编辑器内容：
pass Ckeditor value to div text without html tags?

安装插件后，您可以执行以下操作：

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

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

1 个答案: