如何在点击中打开编辑器

时间:2009-10-27 10:25:49

标签: asp.net jquery

我有5个div的页面,我想点击选中的div打开编辑器。

div内容将进入编辑器,我将为此做些什么。

是否有任何j查询。

3 个答案:

答案 0 :(得分:1)

查看NicEdit或TinyMCE。两者都可以配置为编辑div或任何其他元素中的内容。

答案 1 :(得分:1)

您要编辑内容吗?你看过Jeditable插件了吗?

答案 2 :(得分:0)

    CSS:
    .hidden{
       display:none;
    }

    <div id="container">
      <div id="div1" class="edit-div"><div class="editor hidden"></div><div class="content"></div></div>
      <div id="div2" class="edit-div"><div class="editor hidden"></div><div class="content"></div></div>
      <div id="div3" class="edit-div"><div class="editor hidden"></div><div class="content"></div></div>
      <div id="div4" class="edit-div"><div class="editor hidden"></div><div class="content"></div></div>
      <div id="div5" class="edit-div"><div class="editor hidden"></div><div class="content"></div></div>
    </div>

var xeditorChange = function(el)
{
  if ($(el).length>0)
  {
     $(el).find(".content")
          .empty()
          .html(editor.getText())
          .removeClass("hidden");

     $(el).find(".editor")
         .empty()
         .addClass("hidden");
  }
};

$(function(){
  $(".edit-div").click(function()
{
    xeditorChange( $("#container").find(".editing") );

    editor.addText($(this).find(".content").html());
    $(this).find(".content").addClass("hidden");
    $(this).find(".editor").removeClass("hidden");

    //show editor in  $(this).find(".editor")
});

  //on save text in editor add the html with reverse function

});