javascript - JQuery 文本编辑器 - 在工具栏中添加附加下拉列表

Question

我已经在我的应用程序中实现了 JQueryTE。除了 JQueryTE 必须提供的常用工具之外，我还想包含一个下拉选择器，其中包含一个充当占位符的预定义字段列表，例如 [[Title]]、[[FirstName]] 等。我知道它是可能的CKEditor 使用占位符插件，但可以使用 JQueryTE 完成吗？

我想到的最明显的方法是尝试向工具栏添加/附加一个选项菜单，这将触发一些添加字段名称的代码，但运气不佳。

有人可以看一下我的 jsfiddle 吗？ jsfiddle http://jsfiddle.net/jalz/hou94u8a/2/

$('.jqte-primary').jqte( 
            { 
                title: true,
                format: true,
                fsize: true,
                color: true,                    
                b: true,
                i: true,
                u: true,
                ol: true,
                ul: true,
                sub: true,
                sup: true,
                outdent: true,
                indent: true,
                left: true,
                center: true,
                right: true,
                strike: true,
                link: true,
                unlink: true,
                remove: true,
                rule: true,
                source: false           
            } 
        );
$( ".jqte_toolbar" ).append( "<span style=\"margin-left: 12px; padding-top: 6px; vertical-align: middle;\"><a href=\"\" class=\"save_link\">Save</a></span>" );


/* this is the one that does not work - this control does not display in JQueryTE and then figure out how to fire the value chosen in the appropriate place */
selectValues = { "1": "test 1", "2": "test 2" };

$.each(selectValues, function(key, value) {
$('.jqte_toolbar').append($("<option/>", {
    value: key,
    text: value
}));
});


$( ".jqte_toolbar" ).append( "<span style=\"margin-left: 12px; padding-top: 6px; vertical-align: middle;\"><a href=\"\" class=\"field_list\">End</a></span>" );


$(".field_list").click( function () {

        /* Insert the value into */
alert('insert value');

    } )

非常感谢

Answer 1

希望这对任何需要做类似事情的人有所帮助。我使用的是 JQTE v 1.4 和 JQuery 3.4 以及 JQuery-ui 1.12。我所做的是模仿已经具有所需行为的文本格式组合框。

在此示例中，列表是通过 AJAX 调用动态填充的，这就是我使用动态元素的 Id 的原因；最重要的是，我需要根据参数将具有不同内容的相同组合框放置一次，因为有许多 jqte 动态添加到我的页面中。鉴于这种情况，主入口:

$("div[id^=\"jqteContainer_\"]").each(function(){
  let currParamId = $(this).attr("id").split("_")[1]; //Obtain the id which have the param to know which combo belongs to which jqte toolbar
  let currentCombo = $(this);
  $.ajax("getData.[php/jsp/asp/aspx]",{ // The AJAX call to get the information for the options
    data: { id: currParamId  },
    success: function(dataResponse){
      let data = dataResponse.data; //Assuming data is an array with the information
      let newOptions = "";
      for(let i=0; i<data.length; i++){ //Mimicking the HTML and CSS of jqte format combo box for each option
        newOptions += "<a class=\"jqte_format jqte_format_0 unselectable optMyClass\" data-myid=\"" + data[i].myId + "\" data-otherid=\"" + data[i].otherId + "\" role=\"menuitem\" unselectable=\"on\" style=\"user-select: none;\">" + data[i].name + "</a>";
      }
 // Mimicking the HTML and CSS of the combo box container as jqte format combo box container
      currentCombo.children("div.jqte").children("div.jqte_toolbar").append("<div class=\"jqte_tool jqte_tool_1 unselectable\" role=\"button\" style=\"user-select: none;width:15%\" unselectable=\"on\"><a id=\"myCustomCombo_" + currParamId + "\" data-myid=\"" + currParamId +"\" class=\"jqte_tool_label unselectable myCustomCombo\" unselectable=\"on\" style=\"user-select: none;width:95%\"><span class=\"jqte_tool_text unselectable nowrap\" unselectable=\"on\" style=\"user-select: none;\">My Combo Label</span><span class=\"jqte_tool_icon unselectable\" unselectable=\"on\" style=\"user-select: none;\"></span></a><div id=\"myComboOptions_" + currParamId + "\" class=\"jqte_formats unselectable\" unselectable=\"on\" style=\"user-select: none; display: none;\">" + newOptions + "</div></div>");
    },
    error: showResult,
    method: "POST"
  });
});

$("body").on("click", ".myCustomCombo", function( event ) {
  event.preventDefault();
  $("#myComboOptions_"+$(this).attr("data-myid")).css("display","block");
});

$("body").on("click", ".optMyClass", function( event ) {
  event.preventDefault();
  // Your code per option. you can use the data-xxxx to differentiate
});

首先，我必须在页面中的每个 jqte 中添加组合框。就我而言，我有很多 jqte-s。但是，如果您只有一个 ID，则只需设置您的 ID 即可避免这种情况。

接下来是模仿 jqte 的格式组合框，用于列出文本格式。第一部分是添加选项，它们是一堆 anchor (标签)，其中包含代码所需的信息，以便区分每个 anchor 和组合框(如果需要)。在本例中，选项来自 AJAX 调用，但它可以替换为模仿此处显示的 HTML 的任何静态 HTML。

实现我们的选项后，它们被添加到相应的 jqte 工具栏，它是 jqte 容器的孙子(通常是一个 div，如我的例子，其中 jqte 文本区域是直接子项)，并添加其余的 HTML 和 CSS模仿 jqte 的格式组合框。请注意此处添加的自定义类(.myCustomCombo)，因为它是显示/隐藏选项的方法。

最后是 JavaScript 代码，非常简单。第一个只是显示下拉组合框的选项，下一个是在选择选项后执行我们需要的任何操作。请注意它的完成方式，因为由于组合框是动态生成的，因此使用通常的 $(".myCustomCombo").click(...) 将不起作用。如果它已经在页面中(静态定义)，则定义此事件的通常方法应该有效；这同样适用于选项。

希望这个例子有用。祝您度过愉快的一天。