Question

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

我正在开发一个网页，我想用ckeditor编辑一个文本，到目前为止我所取得的成就是当你继续文本并点击它时，ckeditor会出现，你可以编辑文本。但是现在我想要点击一个按钮（显示小铅笔），我放在文本的顶部，ckeditor似乎会编辑该文本。

我是Javascript的新手，所以真的需要你的帮助。会很感激：）

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

evtleineLösung Dem div eine ID geben。 Im Button die id z.b. im valuetag verstecken

Mit dem Button点击übergibstdudann 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

这是一个小例子 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。

Fiddle

Answer 4

所以我解决了这个问题。这比我想象的容易。我不需要任何额外的javascript功能，我只是在按钮<div class="full editable" id="DivToedit"> <p>" TEXT TO EDIT"</p></div>");中使用onclick功能 <input onclick=\"$('#DivToedit').click();\" type=\"button\" name=\"button\" class=\"editText\" value=\"DivToEdit\">无论如何感谢您的帮助:)）

单击按钮使CKEditor可见

4 个答案: