javascript 动态文本区域和 nicedit-6ren

javascript 动态文本区域和 nicedit

转载作者：行者123 更新时间：2023-11-28 09:18:25

25

4

在这里几个人的大力帮助下，我成功创建了一个页面，可以动态创建动态可调整大小/可拖动的文本区域。我现在正在尝试将 nicedit 集成到这些文本区域中。它的工作到了一定程度。双击后，文本区域将成为 nicedit 区域，但不幸的是，可拖动事件甚至覆盖了 nicedit，因此我无法编辑文本区域。

我的javascript是有限的，所以我希望有人能指出我的方法的错误

提前致谢。

这里是 jsfiddle 链接 http://jsfiddle.net/JVhpJ/9/

这是代码

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">       
    <script src = "http://js.nicedit.com/nicEdit-latest.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />  
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>   
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>  
    <script>
        window.onload = function () {
            var body = document.body;
            // The magic
            body.addEventListener ("dblclick", 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);
        }
    var i=0;    
    var p=25;   
    function creatediv1(id)
    {   
        id=id+i;
        var xp=xp+i;
        var newdiv = document.createElement('div');
        newdiv.setAttribute('id', id);
        newdiv.setAttribute('class', 'dragbox');
        newdiv.setAttribute('iterate',i);
        newdiv.style.position = "relative";
        newdiv.style.top = p;
        newdiv.style.left = p;
        newdiv.style.cursor='move';
        newdiv.innerHTML = "<div id='handle'>Drag me into position</div></div><br><textarea id="+i +" name='textarea["+i +"]' class='textarea1' width='300' style='position:absolute; top:0px;left:0px;overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here</textarea>";
        newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='300' name='width["+i+"]' id='width"+i+"'><br><input type='hidden' value='300' name='height["+i+"]' id='height"+i+"'>";               
        newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='0' name='left["+i+"]' id='left"+i+"'><br><input type='hidden' value='0' name='top["+i+"]' id='top"+i+"'>";           

        document.getElementById("frmMain").appendChild(newdiv);
        $(function()
        {

            $("#"+i).resizable(
            {
                stop: function(event, ui)
                {
                    var width = ui.size.width;
                    var height = ui.size.height;
                   // alert("width="+width+"height="+height);
                    ValProportions(width,height,ui.element.context.id);           
                }
            });

            $( "#"+id ).draggable(
            {
                stop: function(event, ui)
                {
                    Stoppos = $(this).position();
                   $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
                       // alert("left="+Stoppos.left+"top="+Stoppos.top);
                    ValPostion(Stoppos.left,Stoppos.top,$(this).attr('iterate'));   
                }
            }); 
             $("#"+i).draggable({handle:"#handle"});  
        });  

        function ValProportions(defaultwidth, defaultheight,id)  { 
            $('#width'+id).val(defaultwidth);
            $('#height'+id).val(defaultheight);
            }
        function ValPostion(defaultleft,defaulttop,id)  {  
            $('#left'+id).val(defaultleft);
            $('#top'+id).val(defaulttop);
            }
        i++;
        p=p+25; 

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

<body>
   <form id="frmMain" name="frmMain" enctype="multipart/form-data" action="test.php" method="post">
    <input id="btn1" type="button" value="Add New textbox" onclick="creatediv1('draggable');" />             
    <input type="submit" value="Submit"  >
   </form>
</body>

最佳答案

我设法通过在 div 的 mousedown 事件上使用 stoppropagation() 来解决此问题，这使我能够编辑文本，而无需可拖动覆盖编辑功能

关于javascript 动态文本区域和 nicedit，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15334557/

25

4

0

文章推荐： html - 如何修复导航和全屏 div 之间的差距？

文章推荐： javascript - 自动为绝对子元素的父元素设置高度

文章推荐： html - 使用 HTML/CSS 删除边距问题

javascript - nicEdit 文本区域名称进行检查
我想检查我的文本区域，如果用户没有填写消息，它会提示一条警报消息。然而我的文本区域似乎被 nicEdit 文本区域取代。 HTML 部分 bkLib.onDomLoaded(function()
javascript - nicEdit 面板不出现
我正在使用 nicEdit 作为本地站点的记事本编辑器。我使用复选框来调用 nicEdit 函数(注释)，但面板根本不显示。甚至警报也没有出现。还有其他三个函数可以使用 cookie 保存笔记: /
javascript - NicEdit textarea如何添加滚动条？
我在我的应用程序中使用 NicEdit 编辑器，但是当我在文本区域中写入文本时，它会增加大小而不是向 textarea 添加滚动条。请帮助解决如何将滚动条添加到 nicEdit 编辑器文本区域滚动条。
php - NicEdit 与代码
我正在为我的一个项目使用 NicEdit WYSIWYG 编辑器。 http://nicedit.com 我遇到的问题是 NicEdit 想要让我将任何代码(HTML、CSS、PHP 等)发布到 my
javascript - nicedit 如何在提交时从文本区域中删除数据
$('#update').val(); 不工作怎么办？thk 我想在提交时删除文本区域中的数据 bkLib.onDomLoaded(function() { nicEditors.allT
javascript - nicedit 中的第一行问题？
你好，我的 nicedit 编辑器有一个小问题问题是第一行不受影响! 示例: 我在文本区域框的第一行写了(asdad) 我标记了它并单击(居中对齐) 它应该位于盒子的中心看这张图这个问题只出现
javascript 动态文本区域和 nicedit
在这里几个人的大力帮助下，我成功创建了一个页面，可以动态创建动态可调整大小/可拖动的文本区域。我现在正在尝试将 nicedit 集成到这些文本区域中。它的工作到了一定程度。双击后，文本区域将成为 ni
javascript - nicEdit 字体大小和字体系列不起作用
我在我的网站上使用 nicEdit 作为文本编辑器。我包括这个: 除字体大小和字体系列外，所有按钮均有效，所选文本不会更改为我选择的字体大小和字体系列。怎么了？最佳答案我可以看看你的代码(css
php - Nicedit 本地上传图片失败
我是这样称呼编辑器的: new nicEditor({ buttonList : ['bold','italic','underline','upload'],
php - nicEdit 文本区域的默认值
代码如下 //
drop-down-menu - nicEdit 不显示选定的字体大小和系列
我已将 nicEdit 添加到我的代码中，但不知何故，当我选择字体大小和系列时，nicEdit 不显示所做的选择。有什么出路和可能的解决方案吗？最佳答案好吧，我稍微调整了 js 文件以获得 ans
jquery - 限制所见即所得编辑器 (NicEdit) 中的字符数
我有这个 jQuery 代码: var char = 60; $("#counter").append("You have " + char + " char."); $("#Stat
javascript - 如何使 Nicedit 只影响页面上的一个文本区域而不是页面上的每个文本区域
我一直在尝试在我的网站表单上使用 nicedit (http://nicedit.com/)(我用它来提交短篇小说)。该表单包括几个文本区域()。其中之一是关于短篇小说的内容，我想在其中使用 nice
javascript - 如何在 NicEdit 中设置在新窗口中打开链接的默认值
使用 NicEdit 时，可以使用编辑器中的“添加链接”按钮突出显示文本，以便可以对其进行超链接。单击“添加链接”按钮时，会出现一个弹出窗口，您可以在其中指定链接是应在新窗口中打开还是在当前窗口中打
javascript - 占位符在 NicEdit 中不起作用
我正在使用 NicEdit Inline WYSIWYG 并尝试了解如何使用占位符。我创建了一个带有属性占位符的 div，但是当 NicEdit 激活它时，显示没有占位符的空白文本区域。也许有一些
javascript - Ajax 提交 nicEdit
我在我的一个项目中使用 nicEditor，我想使用插件中的 jQuery 提交内容。这是我的代码 bkLib.onDomLoaded(function() { new nicEditor().pa
javascript - 如何删除 nicEdit 文本编辑器中的上传按钮
我的网站 nicedit 的所有按钮都很好。但我想在我的网站之一中删除编辑器的上传按钮。我有一个按钮列表选项，但我正在搜索如下设置: fullPanel: true, hideButton: '上传'
javascript - 如何在 NicEdit 中添加字体？
我的网站允许用户写短篇小说。我希望他们可以自由设置文本的格式和样式，所以我安装了 NicEdit要做到这一点。但是 NicEdit 只有 9 个默认字体；如何添加更多？这是我的编辑器。它使用具有完整
php - 防止 nicEdit 创建外部标签
我正在使用 nicEdit 将内容发布到我的数据库中。但我发现，当我发布内容时，它会为每个创建的段落创建一堆标签，例如 div、p、标签。当我将内容加载到网站上时，这会导致我的网站扭曲。为什么 ni
jquery - tinyMCE 与 nicEdit？
有人试过吗？我从 nicEditor 开始，但正在考虑切换到 TinyMCE，因为: nicEditor 不再处于开发阶段，因此可能与 future 的 CSS/HTML/jQuery 版本存在不兼

首页

博学

6Ren·AI

商城

javascript 动态文本区域和 nicedit