Question

我使用CKEditor并且我想缩进该段落的第一行。我之前所做的就是点击＆＃34;来源＆＃34;并修改<p>样式以包含text-indent:12.7mm;，但是当我点击＆＃34;来源＆＃34;再次回到正常的编辑器，我的变化消失了，我不明白为什么。

我的偏好是创建自定义工具栏按钮，但我不确定如何操作或在哪里编辑，以便点击自定义按钮会使用我想要的样式属性编辑<p>它有。

Answer 1

根据您使用的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文件，并且您必须在输出编辑器内容的任何位置包含它。

在我看来，最好的解决方案确实是制作一个插件，在工具栏上放置一个图标，当点击该按钮时，会添加或删除类似于＆＃34; indentMePlease＆＃34;到目前有效的段落。开发所述插件非常简单且文档齐全，请参阅http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1的优秀示例 - 如果您需要更多信息或对此有疑问，请在评论中提问：）

如果你这样做，你又需要添加＆＃34; indentMePlease＆＃34; content.css中的样式实现和输出页面。

Answer 2

我有办法在不使用样式的情况下缩进第一行，因为我使用iReport生成自动报告。贾斯珀不懂风格。所以我通过jQuery将一个onkeydown方法分配给CKEditor 4.6的主iframe，并检查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);
        }
    }

如何在CKEditor中缩进段落的第一行

2 个答案: