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

JQuery Text Editor - adding additional dropdown list in the toolbar

本文关键字：添加 其他 下拉列表 工具栏 文本 文本编辑 编辑器 JQuery      更新时间：2023-09-26

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

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

有人能看看我的小提琴吗？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');
    } )

非常感谢

希望这能帮助到任何需要这样做的人。我使用的是JQTE v1.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。但是，如果您只有一个Id，那么只需设置您的Id就可以避免这种情况。

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

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

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

希望这个例子有用。祝你愉快，度过美好的一天。

相关文章：