JQuery 文本编辑器 - 在工具栏中添加额外的下拉列表

Question

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

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

有人可以看看我的 jsfiddle 吗？ jsfiddlehttp://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

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

在本例中，列表是通过 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 就可以避免这种情况。

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

在实现我们的选项后，它们被添加到相应的 jqte 工具栏，它是 jqte 容器的孙子（通常是一个 div，在我的情况下 jqte textarea 是一个直接子容器），并添加其余的 HTML 和 CSS模仿 jqte 的格式组合框。注意这里添加的自定义类（.myCustomCombo），因为它是显示/隐藏选项的方式。

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

希望这个例子有用。玩得开心，度过美好的一天。