将文本拖放到 RadEditor

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 以捕获放置事件，然后处理数据适当。棘手的部分是保持光标定位，因为一旦 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);
}