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的格式组合框，该组合框用于列出文本格式。第一部分是添加选项，这些选项是一堆锚（标记），其中包含代码所需的信息，以便区分每个选项和组合框（如果需要）。在这种情况下，这些选项来自AJAX调用，但可以替换为模拟此处显示的HTML的任何静态HTML。

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

最后是非常简单的javascript代码。第一个只是显示下拉组合框的选项，第二个是一旦选择了该选项，便执行我们需要做的任何事情。请注意它的完成方式，因为使用组合框是动态生成的，因此无法使用常规的$（“。myCustomCombo”）。click（...）。如果已经在页面中（静态定义），则可以使用定义此事件的常用方法；选项同样如此。

希望这个例子很有用。祝您玩得开心，愉快。

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

1 个答案: