Javascript: проблема с переключением между html textarea и nicedit - PullRequest
Новая
       0

Javascript: проблема с переключением между html textarea и nicedit

2 голосов
/ 31 января 2011

Я использую nicedit (http://nicedit.com/index.php).

Я пытался создать текстовое поле html по умолчанию, которое при нажатии на него превращалось в текстовое поле nicedit. Я хочу, чтобы он вернулся к простой текстовой области HTML, когда он теряет фокус. Я смог сделать это успешно, используя только одну текстовую область, однако, когда я использую две текстовые области, происходят странные вещи (в Firefox). Я использую следующий скрипт: 

<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script> <script type="text/javascript"> 

function fieldname_1()
{
   area = new nicEditor({fullPanel : true}).panelInstance('fieldname');
   area.addEvent('blur', function() 
   {
      area.removeInstance('fieldname');
      area = null;
      document.getElementById("fieldname").onclick=function(){fieldname_2()}
   });
}

function fieldname_2()
{
   area = new nicEditor({fullPanel : true}).panelInstance('fieldname');
   area.addEvent('blur', function() 
   {
      area.removeInstance('fieldname');
      area = null;
      document.getElementById("fieldname").onclick=function(){fieldname_1()}
   });
}

function fieldname2_1()
{
   area = new nicEditor({fullPanel : true}).panelInstance('fieldname2');
   area.addEvent('blur', function() 
   {
      area.removeInstance('fieldname2');
      area = null;
      document.getElementById("fieldname2").onclick=function(){fieldname2_2()}
   });
}

function fieldname2_2()
{
   area = new nicEditor({fullPanel : true}).panelInstance('fieldname2');
   area.addEvent('blur', function() 
   {
      area.removeInstance('fieldname2');
      area = null;
      document.getElementById("fieldname2").onclick=function(){fieldname2_1()}
   });
}

</script>

<TEXTAREA id="fieldname" cols="35" onclick="fieldname_1();" ></TEXTAREA>
<br><br><br>
<TEXTAREA id="fieldname2" cols="35" onclick="fieldname2_1();" >Test text</TEXTAREA>

Первая текстовая область, на которую вы щелкаете и не фокусируете, работает отлично, однако вторая текстовая область, на которую вы нажимаете, не исчезает при попытке сфокусироваться. Что я делаю не так?

Ответы [ 2 ]

5 голосов
/ 01 февраля 2011

Вы не можете сделать трюк с более чем одной текстовой областью, как насчет 1000? 

<!DOCTYPE html>

<html>
    <head>
        <meta charset = "utf-8">

        <title></title>

        <script src = "http://js.nicedit.com/nicEdit-latest.js"></script>

        <script>
            window.onload = function () {
                var body = document.body;
                var limit = 1000;

                for (var i = 0; i < limit; i ++) {
                    var textarea = document.createElement ("textarea");
                        textarea.style.height = "100px";
                        textarea.style.width = "100%";

                    body.appendChild (textarea);
                }

                // The magic
                body.addEventListener ("click", function (event) {
                    var target = event.target;

                    if (target.nodeName === "TEXTAREA") {
                        var area = new nicEditor ({fullPanel : true}).panelInstance (target);

                        area.addEvent ("blur", function () {
                            this.removeInstance (target);
                        });
                    }
                }, false);
            }
        </script>

        <style>
            textarea {
                height: 100px;
                margin-bottom: 20px;
                width: 1000px;
            }
        </style>
    </head>

    <body>
        <!-- Create any textarea you want -->
    </body>
</html>

enter image description here

0 голосов
/ 01 февраля 2011

Это делает то, что вы хотите: 

<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script> 

<script type="text/javascript"> 

/*
 * Replace the textarea with the given id with an instance of niceEdit.
 * Attach an 'onblur' event to the editor that removes the niceEditor when 
 * the editor loses focus, and add the onclick function to the restored textarea
 */
function toggleEditor(id){
    new nicEditor({ fullPanel: true }).panelInstance(id).addEvent('blur', function() {
        this.removeInstance(id);
        document.getElementById(id).onclick=function(){
            toggleEditor(id)
        };
    });
};

</script>

<textarea id="fieldname" cols="35" onclick="toggleEditor(this.id);">Text text</textarea>
<br><br><br>
<textarea id="fieldname2" cols="35" onclick="toggleEditor(this.id);" >Test text</textarea>
...