2

我正在使用CKEditor，我只想缩进段落的第一行。我之前所做的是单击“Source”并编辑<p>要包含的样式text-indent:12.7mm;，但是当我再次单击“Source”以返回普通编辑器时，我的更改消失了，我不知道为什么。

我的偏好是创建一个自定义工具栏按钮，但我不确定如何这样做或在哪里编辑，以便单击自定义按钮将<p>使用我希望它具有的样式属性进行编辑。

4

2 回答 2

4

根据您使用的 CKE 版本，您的更改很可能会消失，因为内容中不允许使用style属性或样式。text-indent这是由于 CKEditor 的允许内容过滤器功能，请在此处阅读更多信息：http ://docs.ckeditor.com/#!/guide/dev_advanced_content_filter

就像 Ervald 在评论中所说，您也可以使用 CSS 来执行此操作而无需手动添加代码 - 但是，您的定位选项是有限的。您必须针对所有段落或将 id 或 class 属性添加到您的段落并将其定位。或者，如果您使用选择器，例如:first-child您被限制为始终仅缩进第一个元素（这可能是您想要的，我不知道：D）。

要像这样使用 CSS，您必须将相关代码添加到contents.css编辑器内容中使用的 CSS 文件，并且您必须在输出编辑器内容的任何位置包含它。

在我看来，最好的解决方案确实是制作一个插件，在工具栏上放置一个图标，并且单击该按钮时，会在当前活动段落中添加或删除诸如“indentMePlease”之类的类。开发所说的插件非常简单且有据可查，请参阅http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1上的优秀示例- 如果您需要更多信息或对此有疑问，请在评论中提问 :)

如果你这样做，你再次需要在 contents.css 和输出页面中添加“indentMePlease”样式实现。

于 2014-08-25T09:09:34.523 回答
0

我有一种方法可以在不使用样式的情况下缩进第一行，因为我使用 iReport 来生成自动报告。Jasper 不懂风格。因此，我通过 jQuery 为 CKEditor 4.6 的主 iframe 分配了一个 onkeydown 方法，并检查了 TAB 和 Shift 键来执行和撤消第一行缩进。

// TAB
    $(document).ready(function(){
        startTab();
    });

    function startTab() {
        setTimeout(function(){
            var $iframe_document;
            var $iframe;
            $iframe_document = $('.cke_wysiwyg_frame').contents();
            $iframe = $iframe_document.find('body');

            $iframe.keydown(function(e){
                event_onkeydown(e);
            });

        },300); 
    }

    function event_onkeydown(event){
        if(event.keyCode===9) { // key tab
            event.preventDefault();
            setTimeout(function(){
                var editor = CKEDITOR.instances['editor1'], //get your CKEDITOR instance here
                    range = editor.getSelection().getRanges()[0],
                    startNode = range.startContainer,
                    element = startNode.$,
                    parent;

                if(element.parentNode.tagName != 'BODY') // If you take an inner element of the paragraph, get the parentNode (P)
                    parent = element.parentNode;
                else // If it takes BODY as parentNode, it updates the inner element
                    parent = element;

                if(event.shiftKey) { // reverse tab
                    var res = parent.innerHTML.toString().split('&nbsp;');
                    var aux = [];
                    var count_space = 0;

                    for(var i=0;i<res.length;i++) {
                        // console.log(res[i]);
                        if(res[i] == "")
                            count_space++;
                        if(count_space > 8 || res[i] != "") {
                            if(!count_space > 8)
                                count_space = 9;
                            aux.push(res[i]);
                        }
                    }
                    parent.innerHTML = aux.join('&nbsp;');
                }
                else { // tab
                    var spaces = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                    parent.innerHTML = spaces + parent.innerHTML;
                }
            },200);
        }
    }
于 2017-03-31T17:14:11.620 回答