Question

我需要创建一个由文本构成的面板，例如

MY PANEL

    Drag any of the items below into the editor:

    CUSTOMER
    BUSINESS_PHONE
    BUSINESS_ADDRESS

因此，当将其拖入编辑器时，它将按以下方式添加

This is an example of how [[CUSTOMER]] has improved his business. 
You may contact them directly by dialing [[BUSINESS_PHONE]].

就像创建模板一样。我只是不确定如何使用它来工作..我们正在使用RadEditor。任何建议将不胜感激，请注意我们无法更改编辑器，因为我们在许多地方使用解决方案，如果有任何必须与编辑器集成。

非常感谢

Answer 1

我已经做了类似于你想要实现的东西，你将不得不向radEditor的那个实例添加一些代码，特别是在你的OnClientLoad函数中添加一些Javascript以捕获drop事件然后处理数据恰当。棘手的部分是维护游标定位，因为一旦丢弃HTML，你将不得不解析HTML。

我真的建议尽可能使用插入按钮和可以选择的列表/对象，单击按钮并将其插入光标，这样更容易实现。

然而，这里的代码没有解析我如何将drop事件附加到编辑器，我正在使用RadPanelBar来拖放。这甚至会在任何拖放到编辑器中的情况下触发，我还建议使用某种标记，例如<span class="dragableItem">BusinessPhone</span>，您可以在解析内容时查找。

如果你可以简单地[[BusinessPhone]]制作你的清单并将其拖放到那里显然是最简单的解决方案，虽然不是很优雅。

function OnClientLoad(editor)
{

    var element = document.all ? editor.get_document().body : editor.get_document();
    //var eventHandler  = document.all ? "drop" : "dragdrop";
    var eventHandler = "drop";
    $telerik.addExternalHandler(element, eventHandler, function(e) {
        setTimeout(function() {
            contentDropped(editor);
        }, 300);
    });
//....
}


function contentDropped(editor)
{
    var content = editor.get_html();
    //parse the content of the editor  
    editor.set_html(content);
}

将文本拖拽到RadEditor

1 个答案: