2

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

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

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

有人可以帮忙吗？

谢谢

4

1 回答 1

3

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

这里有两种方法。

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

他在这里演示了如何使用它来显示另一个编辑器的内容<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);
};
于 2012-07-18T12:31:23.100 回答