5

I am using CkEditor.So I set up a4 size for textarea.

CKEDITOR.editorConfig = function( config ) {
    config.height = '842px';
    config.width = '595px';
};

HTML:

<textarea name="Editor" class="ckeditor" id="aboutme"></textarea>

Javascript:

 var editor = CKEDITOR.instances.aboutme;
 var edata = editor.getData();
 var replaced_text = edata.replace(/(\[##.+?##\])/g, '<span style="background-color:yellow"><strong>$1</strong></span>');
 editor.setData(replaced_text);

My question:

If textarea has 2 a4 paper, I want to add red underline between first and second a4 paper in textarea.

I tried to replace to do this however I don't have any idea about a4 paper for ckeditor in javascript .

I want to put red underline after 842px(a4 paper size)

How can I put red underline after 842px in javascript ?

Any help will be appreciated.

Thank you.

Mukesh Ram
  • 6,248
  • 4
  • 19
  • 37
user3722851
  • 147
  • 4
  • 13
  • 2
    I'd be surprised if you can do this with CKEditor... it's not exactly what it was designed for. Not saying it can't be done (hence this is a comment rather than an answer) but I can't think how you'd do it – freefaller Jul 03 '14 at 08:56
  • it is impossible to put red line if more than 842 px ? because if i can do this it is ok for me thanks – user3722851 Jul 03 '14 at 09:01
  • You could add a floating div to the content at 842px, but that would become editable to the user, and would be saved with the content when saving (unless removed). Something like `
     
    `     – freefaller Jul 03 '14 at 09:11
  • 7
    A4 is defined to be an exact number of mms, not pixels, if you're working off pixels and someone has a different dpi setting to you(either for screen or printing) it could appear differently. Your best bet is to use a real world measurement for this. – scragar Jul 03 '14 at 09:12
  • @scragar is correct about using real-world measurements. Have you looked to see if anybody has [written a plugin](http://ckeditor.com/addons/plugins/all) for this? – freefaller Jul 03 '14 at 09:16
  • It seems not to be easy: http://ckeditor.com/comment/123434#comment-123434 Maybe this helps: http://ckeditor.com/comment/132430#comment-132430 – AbcAeffchen Jul 03 '14 at 13:37
  • This may help you http://stackoverflow.com/questions/16649943/css-to-set-a4-paper-size, http://ckeditor.com/addon/pagebreak – oleq Jul 04 '14 at 08:41
  • 1
    Did you ever solve this issue? I'm guessing that a workaround is the only option but I'm interested in knowing. – Joel Peltonen Sep 17 '14 at 05:34

1 Answers1

1

Try this example using ckeditor + sharedspace + fake paper with A4 Size.:

http://jsbin.com/nokalosuwi/edit?html,output

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
          rel="stylesheet">

    <link type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/blue/pace-theme-loading-bar.css"
          rel="stylesheet">


    <style>
        .body {
            background: rgb(204, 204, 204);
        }

        .maindiv {
            /*
            the content is hidden by default,
            and will be shown only after
            completed page load and
            finalized ckeditor startup
            */
            display: none;
        }

        .content-section {
            margin-bottom: 100px;
        }

        article {
            background: white;
            width: 21cm;
            height: 29.7cm;
            display: block;
            margin: 0 auto 0.5cm;
            box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
            padding: 30px;
            font-size: 11pt;
            line-height: 22pt;
        }

        article form {
            height: 100%;
        }

        @media print {
            body, article[size="A4"] {
                margin: 0;
                box-shadow: 0;
                background: transparent;
            }

            .cke_pagebreak {
                display: block;
                page-break-before: always;
            }

            .content-section {
                margin-bottom: 0;
                padding-top: 0;
            }

            .no-print {
                display: none;
            }

        }


    </style>
</head>

<body class="body">

<div class="maindiv">
    <div id="top-bar" class="navbar-fixed-top no-print">
        <div id="top-ck-toolbar">
            <!-- ckeditor top toolbar is rendered here -->
        </div>
    </div>

    <div id="content-section" class="content-section">
        <article>

            <form id="myform" method="post">
                <textarea id="mytextarea1" data-ckenable="true"></textarea>
                <textarea id="mytextarea2" data-ckenable="true"></textarea>
                <textarea id="mytextarea3" data-ckenable="true"></textarea>
            </form>

        </article>
    </div>

    <div id="bottom-bar" class="navbar-fixed-bottom no-print">
        <div id="bottom-ck-toolbar">
            <!-- ckeditor bottom toolbar is rendered here -->
        </div>
    </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.2/full-all/ckeditor.js"></script>

<script>

    //get the id's of elements that contains "data-ckenable" attribute
    function get_ckenable_element_ids() {
        return $("[data-ckenable]").map(function () {
            return this.id;
        }).get();
    }

    var ckenable_element_ids_list = get_ckenable_element_ids();

    var ckeditor_config = {
        extraPlugins: [
            "sharedspace",

        ].join(),
        sharedSpaces: {
            top: "top-ck-toolbar",
            bottom: "bottom-ck-toolbar"
        }
    };

    //start ckeditor
    ckenable_element_ids_list.map(function (id_element) {
        CKEDITOR.replace(id_element, ckeditor_config);
    });


    function fix_content_padding() {
        var top_menu = $('#top-ck-toolbar');
        var content_div = $('#content-section');
        var current_top_menu_height = parseInt(top_menu.css('height').replace(/[^-\d\.]/g, ''));
        var new_padding_value_to_content = "".concat(current_top_menu_height + 130).concat("px");
        content_div.css('padding-top', new_padding_value_to_content);
        console.log("fixxxx: ", new_padding_value_to_content);
    }

    window.addEventListener('resize.fix_content_padding', fix_content_padding, false);

    var paceOptions = {
        "ajax": false,
        "restartOnRequestAfter": false,
        "document": false
    };

    window.paceOptions = paceOptions;
    Pace.on('hide', function () {

        $(".maindiv").fadeIn("fast");
        fix_content_padding();
    });

</script>
</body>
</html>

source: https://gist.github.com/luzfcb/bab605975396bccd4aa3

celsowm
  • 846
  • 9
  • 34
  • 59