Question

在CKEditor中的自定义样式中，我创建了一个＆＃34;提示＆＃34;我希望跨越一个或多个段落的块元素。但是，当我编辑我的文本时（使用内联编辑器），我无法让块样式跨多个段落工作。

我的风格如下：

CKEDITOR.stylesSet.add('authorStyles', [
// Block-level styles
{
    name: 'Yellow Tip',
    element: 'p',
    styles: {
        margin: '1em 0',
        padding: '20px 20px 4px',
        border: '1px solid',
        'border-radius': '15px',
        'background-color': '#FFC',
        'border-color': '#CC9'
    }
}
]);

在config.js中，我添加了一行来连接自定义样式

// custom styles
config.stylesSet = 'authorStyles:../authorStyle.js';

这是我的HTML：

<div class="section right" contenteditable="true" id="contentToSubmit">
        <p>Here we have some addtional content that is also editable as well in addition to being just some text on its own right.</p>
        <p>Here we have some addtional content that is also editable as well in addition to being just some text on its own right.</p>
        <p>Here we have some addtional content that is also editable as well in addition to being just some text on its own right.</p>
        <p>Here we have some addtional content that is also editable as well in addition to being just some text on its own right.</p>
</div>

不幸的是，当我选择要包含在我的div中的两个段落时，它们都显示为自己的块，而不是两个<p>标记都在我的自定义<div>中。

Paragraphs not displaying properly inside custom block style div

我尝试重置默认的回车键行为（通过enterkey额外插件），但我唯一能做的就是将回车键行为设置为换行符（<br/>），这不是合乎需要的。

我在这个特定问题上寻求帮助，但似乎无法找到解决此问题的文章。谁能帮我？我们正在努力确定ckeditor是否足以满足我们的需求，但这对我们的内容编辑来说是一个很大的障碍。

Answer 1

简短的回答是：

将您的样式定义为div样式，因为您希望它适用于div而不是p，对吗？所以你应该：element: 'div'。
不是通过样式组合应用样式，而是用div替换段落，使用“Div”按钮打开“创建Div容器”对话框并在对话框中选择样式。

CKEditor嵌套段落问题内部自定义块样式div无法正确显示

1 个答案: