单击按钮使CKEditor可见

Question

Hi usually i find answer of my every question here but this time i have to ask one... ;)

I am working on a web page and I want to make a text editable with ckeditor and what i have achieved till now is when you go on the text and click on it ckeditor will appear and you can edit the text. But Now I want that is on clicking a button(showing small pencil) which I placed on the top of text should ckeditor appear to edit that text.

I am new to Javascript so really need your help. Would appreciate it :)

HTML Code:

echo ("<hr><h4>" . PROCESS_VIEW_DESCRIPTION . "</h4><button id=\"edit_img\"><img src=\"../data/image/button/edit_page.png\"/></button>
            <div class=\"full editable\">
            <p>" HERE IS THIS LONG TEXT "</p>
            </div>");

JAVASCRIPT:

$(function(){
$('.editable').each(function(){
    var id = $(this).attr('id');
    if(id == undefined || id == ''){
        id = 'content_'+Math.floor(Math.random() * 99999999);
        $(this).attr('id',id);
    }

    // default
    $('#'+id+'.editable:not(.simple,.full)').ckeip({
        e_url: $(this).data('handler'), // action file which handle $_POST['content']
        e_hover_color: '#ffa07a',
        ckeditor_config : {
            width:'100%',
            toolbar:
            [
                ['Bold','Italic','Underline','Strike','Subscript','Superscript'],
                ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                ['NumberedList','BulletedList'],
                ['TextColor','BGColor' ],
                ['RemoveFormat' ],'/',
                [ 'Format','Font','FontSize' ],
                ['Outdent','Indent'],
                [ 'Link','Unlink','-','ShowBlocks'],'/',
                ['NewPage'],
                ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar' ],
                ['Cut','Copy','Paste','PasteText','PasteFromWord'],
                ['Undo','Redo','-','Source','-','Maximize']
            ],
        }
    });

    $('#'+id+'.full.editable').ckeip({
        e_url: $(this).data('handler'), // action file which handle $_POST['content']
        ckeditor_config : {
            width:'100%'

        }
    });

    $('#'+id+'.simple.editable').ckeip({
        e_url: $(this).data('handler'), // action file which handle $_POST['content']
        ckeditor_config : {
            width:'100%',
            toolbar:
            [
                ['Bold','Italic','Underline'],
                ['Maximize']
            ]
        }
    });

});

});

Answer 1

Just wrap the entire thing in a div and hide/show that

<div class="hideableTextEditor" style="display: none">
    // CKEditor
</div>


$("#edit_img").click(function(){
    $(".hideableTextEditor").show();
});

Answer 2

evtl eine Lösung Dem div eine ID geben. Im Button die id zb im valuetag verstecken

Mit dem Button Click übergibst du dann die ID von dem div welches du bearbeiten willst.

HTML:

<input type="button" class="editText" name="button" value="DivToEdit">
<div class=\"full editable\" id="DivToEdit">
    <p>" HERE IS THIS LONG TEXT "</p>
</div>

Javascript:

....
$('.editText').each(function() {
    $(this).click( function() { 
         var idToEdit = $(this).val();

         ....

     });
});
...

Answer 3

Here is a small example HTML code

<input type="button" value="Edit" id="show">
<input type="button" value="Done" id="hide"><br/>
<div id="txt">text to edit</div><br/>
<textarea id="txtarea"> </textarea>

Javascript Code

$( document ).ready(function() {
    $('#txtarea').hide();
});

$( "#show" ).click(function() {
    var value=$("#txt").text();
    $( "#txtarea" ).val(value);
    $('#txtarea').show();
    $('#txt').hide();
});
$( "#hide" ).click(function() {
    var value=$( "#txtarea" ).val();
    $( "#txt").html(value);
    $('#txt').show();
    $('#txtarea').hide();
});

for your web application replace the textarea with CKEditor.

Fiddle

Answer 4

So guys i solved it. It was easier than i thoght. I dont need any extra javascript function i just used onclick function in button <div class="full editable" id="DivToedit"> <p>" TEXT TO EDIT"</p></div>");
<input onclick=\\"$('#DivToedit').click();\\" type=\\"button\\" name=\\"button\\" class=\\"editText\\" value=\\"DivToEdit\\"> anyways Thanx for your help :)