Question

我正在尝试解决问题。我有一个CMS，我正在使用CKEditor用WYSIWYG编辑器创建我的HTML。

我想在我的HTML中插入一些组件（javascript）：CKeditor当然无法管理这些组件所以我创建了一个插件来创建一个占位符。

结果是这样的HTML：

<p>sample text</p>
<p><widget data_id="2" data_type="gallery"></widget></p>
<p>sample text</p>

现在我需要在页面加载<widget>标记期间替换我的小部件。我有一些api可以打电话，所以我可以返回一个图库或html代码段。

我不想使用iFrame，我认为使用vuejs来渲染我的组件，但我从不使用它。还有其他想法吗？ Ajax的？

Answer 1

您可以使用

www.myapp-blog.com

Answer 2

这样的事情

＆＃13;

window.addEventListener("load", function(){

  var widgets = document.querySelectorAll(`widget`);

  for( index=0; index < widgets.length; index++ ) {
    
    var id = widgets[index].getAttribute("data_id");

    switch (widgets[index].getAttribute("data_type")) {

      case "gallery":
        // make a httprequest (ajax), read a json file, ...
        widgets[index].innerHTML = "your gallery id: " + id;
        break;

      case "notes":
        // make a httprequest (ajax), read a json file, ...
        widgets[index].innerHTML = "your notes id: " + id;
        break;

    }

  }

});

＆＃13;

<p>sample text</p>
<p><widget data_id="2" data_type="gallery"></widget></p>
<p>sample text</p>
<p><widget data_id="3" data_type="notes"></widget></p>

＆＃13;

Answer 3

当页面加载时，您可以使用ajax

执行以下操作

$(function() {
  $('widget').each(function() {
    var $widget = $(this),
      widgetData = {
        id: $widget.attr('data_id'),
        type: $widget.attr('data_type')
      };   

    $.get(url, widgetData, function(response) {
      var $newElement = $(response)
      $widget.replaceWith($newELement);
      // run any script associated with widget
      $newElement.doSomething();
    });
  });
});

如果小部件不涉及任何返回的html，您也可以使用$.getScript()

Answer 4

假设你有客户端小部件（如果需要，小部件可以自己对数据进行ajax请求）：

var widgets = {
    gallery: function(id)
    {
        ...
        return content;
    },
    ......
}

然后在文档就绪上调用它将使用小部件替换占位符（<widget data-id="2" data-type="gallery"></widget>）：

$(function(){
    $.each('widget'), function () {
        var jq = $(this);
        var opts = jq.data();
        jq.replaceWith(new widgets[opts.type](opts.id));
    });
});

如何在DOM创建期间用js脚本替换HTML标记

4 个答案: