1

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

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。任何建议将不胜感激，请注意我们无法更改编辑器，因为我们在许多地方使用该解决方案，如果有任何必须与编辑器集成。

非常感谢你

4

1 回答 1

2

我已经完成了与您尝试实现的类似的操作，您必须向 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);
}
于 2012-04-13T13:39:21.357 回答