单击按钮使CKEditor可见

Question

嗨，通常我会在这里找到我所有问题的答案，但是这次我不得不问一个...;）

我正在一个网页上工作，我想用ckeditor使文本可编辑，而到目前为止，我要做的就是单击文本并单击它，ckeditor将出现，您可以编辑该文本。 但是现在我想要的是单击我放置在文本顶部的按钮（显示小铅笔），如果ckeditor出现，则可以编辑该文本。

我是Java语言的新手，所以真的需要您的帮助。 将不胜感激:)

HTML代码：

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

只需将整个内容包装在div中，然后hide/show

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


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

Answer 2

evtl eineLösungDem div eine ID geben。 Im Button die id zb im valuetag verstecken

单击按钮，单击“更改”，然后单击“更改”。

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

这是一个小的HTML代码示例

<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代码

$( 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();
});

对于您的Web应用程序，请使用CKEditor替换textarea。

小提琴

Answer 4

伙计们，我解决了。 这比我想的容易。 我不需要任何额外的javascript函数，我只在按钮<div class="full editable" id="DivToedit"> <p>" TEXT TO EDIT"</p></div>");使用了onclick函数<div class="full editable" id="DivToedit"> <p>" TEXT TO EDIT"</p></div>");
<input onclick=\\"$('#DivToedit').click();\\" type=\\"button\\" name=\\"button\\" class=\\"editText\\" value=\\"DivToEdit\\">感谢您的帮助:)