将自定义下拉菜单添加到tinyMCE并插入动态内容

萨尔曼·沙里亚蒂

我已经添加了一些代码来向TinyMCE添加一个下拉菜单,因为您可以运行该代码段,效果很好,但是将内容插入到编辑器中存在问题。

tempGroupstemp变量将在后端创建,因此无法静态使用它们。因此,我编写了以下代码,以在选择每个项目时将每个项目的内容插入到编辑器中。

但是问题在于选择任何项目,它会插入最后一个内容值:

<p>Content44</p>

为简化起见,我更改了带有警报的插入方法。

任何帮助,将不胜感激。

 var tempGroups = ['Group1', 'Group2', 'Group3', 'Group4'];

 var temp = [{
   group: 'Group1',
   title: 'Title1',
   content: '<p>Content1</p>'
 }, {
   group: 'Group1',
   title: 'Title1-1',
   content: '<p>Content11</p>'
 }, {
   group: 'Group2',
   title: 'Title2',
   content: '<p>Content2</p>'
 }, {
   group: 'Group2',
   title: 'Title2-1',
   content: '<p>Content22</p>'
 }, {
   group: 'Group3',
   title: 'Title3-1',
   content: '<p>Content33</p>'
 }, {
   group: 'Group4',
   title: 'Title4',
   content: '<p>Content4</p>'
 }, {
   group: 'Group4',
   title: 'Title4-1',
   content: '<p>Content44</p>'
 }];

 var tempGroupName;
 var menuItems = [];

 function createTempMenu(editor) {
   for (i = 0; i < tempGroups.length; i++) {
     var tempArray = [];
     tempArray[i] = [];
     tempGroupName = tempGroups[i];
     for (j = 0; j < temp.length; j++) {
       if (temp[j].group == tempGroupName) {
         // ######################################################
         // The problem is here
         var cc = temp[j].content;
         tempArray[i].push({
           text: temp[j].title,
           onclick: function() {
             alert(cc);
           }
         });
         // ######################################################
       }
     }
     menuItems[i] = {
       text: tempGroupName,
       menu: tempArray[i]
     };
   }
   return menuItems;
 }


 tinymce.init({
   selector: "textarea",
   toolbar1: "UseTemplates ",
   setup: function(editor) {
     editor.addButton('UseTemplates', {
       type: 'menubutton',
       text: 'usetemplates',
       icon: false,
       menu: createTempMenu(editor)
     });
   }
 });
 tinyInit();
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>

<textarea>Editor</textarea>

迈克尔·弗罗明

您的问题cc不是您认为它基于变量作用域以及闭包在JavaScript中的工作方式。幸运的是,有一种简单的方法可以避免出现此问题的范围和关闭乐趣-按钮和工具栏项上的自定义属性。

创建要放入数组的每个选项时,可以为JavaScript对象创建自定义属性。在下面的代码中,请注意如何content在推送到数组的对象上创建自定义属性?this.settings.<propname>选择选项后,我便可以用来获取该属性。

// ######################################################
     // The problem is here
     //JavaScript scope/closure issue - cc is not what you think it is!
     //var cc = temp[j].content;
     tempArray[i].push({
       text: temp[j].title,
       content: temp[j].content,   //This is a custom property on the object!
       onclick: function() {
         alert(this.settings.content);
       }
     });
     // ###################################################### 

在我的测试解决这个问题-这里是一个TinyMCE的小提琴昭示着这个动作:http://fiddle.tinymce.com/Pqfaab

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在WordPress中将自定义按钮添加到TinyMCE

来自分类Dev

使用jQuery将自定义CSS类添加到动态创建的元素中

来自分类Dev

如何将自定义内容添加到CMake项目?

来自分类Dev

如何将自定义项目符号添加到tinyMCE?

来自分类Dev

TinyMCE v4将自定义项目添加到上下文菜单

来自分类Dev

将自定义下拉微调器添加到Actionbar sherlock中的操作项/溢出

来自分类Dev

将自定义样式格式添加到tinymce编辑器

来自分类Dev

如何将自定义图像添加到预输入下拉菜单?

来自分类Dev

将自定义文本添加到MVC 5的下拉列表中

来自分类Dev

Hibernate将自定义前缀添加到目录

来自分类Dev

Select2:如何将自定义样式添加到下拉菜单中不存在的选项?

来自分类Dev

TinyMCE 4将下拉菜单添加到菜单栏

来自分类Dev

如何在自定义的tinymce下拉菜单中添加工具栏按钮?

来自分类Dev

如何使用菜单布局将自定义项目添加到NavigationView?

来自分类Dev

将自定义数据属性添加到Wordpress导航菜单

来自分类Dev

将自定义标头添加到“请求”

来自分类Dev

将图标添加到TinyMCE自定义菜单

来自分类Dev

如何将自定义项目符号添加到tinyMCE?

来自分类Dev

Magento将自定义链接添加到导航菜单

来自分类Dev

TinyMCE v4将自定义项目添加到上下文菜单

来自分类Dev

将自定义文本添加到MVC 5的下拉列表中

来自分类Dev

将自定义菜单项添加到ToolStripMenuItem的集合列表中

来自分类Dev

将自定义内容添加到wordpress帖子中,但未显示$ title之类的变量

来自分类Dev

jQuery-将自定义验证规则添加到对话框中动态生成的下拉列表中

来自分类Dev

将自定义菜单操作添加到Caja文件管理器

来自分类Dev

将自定义下拉菜单添加到tinyMCE并插入动态内容

来自分类Dev

C#UWP将自定义控件添加到开始菜单磁贴

来自分类Dev

使用下拉操作将自定义按钮添加到屏幕顶部

来自分类Dev

Eclipse 将自定义图标添加到内容类型

Related 相关文章

  1. 1

    在WordPress中将自定义按钮添加到TinyMCE

  2. 2

    使用jQuery将自定义CSS类添加到动态创建的元素中

  3. 3

    如何将自定义内容添加到CMake项目?

  4. 4

    如何将自定义项目符号添加到tinyMCE?

  5. 5

    TinyMCE v4将自定义项目添加到上下文菜单

  6. 6

    将自定义下拉微调器添加到Actionbar sherlock中的操作项/溢出

  7. 7

    将自定义样式格式添加到tinymce编辑器

  8. 8

    如何将自定义图像添加到预输入下拉菜单?

  9. 9

    将自定义文本添加到MVC 5的下拉列表中

  10. 10

    Hibernate将自定义前缀添加到目录

  11. 11

    Select2:如何将自定义样式添加到下拉菜单中不存在的选项?

  12. 12

    TinyMCE 4将下拉菜单添加到菜单栏

  13. 13

    如何在自定义的tinymce下拉菜单中添加工具栏按钮?

  14. 14

    如何使用菜单布局将自定义项目添加到NavigationView?

  15. 15

    将自定义数据属性添加到Wordpress导航菜单

  16. 16

    将自定义标头添加到“请求”

  17. 17

    将图标添加到TinyMCE自定义菜单

  18. 18

    如何将自定义项目符号添加到tinyMCE?

  19. 19

    Magento将自定义链接添加到导航菜单

  20. 20

    TinyMCE v4将自定义项目添加到上下文菜单

  21. 21

    将自定义文本添加到MVC 5的下拉列表中

  22. 22

    将自定义菜单项添加到ToolStripMenuItem的集合列表中

  23. 23

    将自定义内容添加到wordpress帖子中,但未显示$ title之类的变量

  24. 24

    jQuery-将自定义验证规则添加到对话框中动态生成的下拉列表中

  25. 25

    将自定义菜单操作添加到Caja文件管理器

  26. 26

    将自定义下拉菜单添加到tinyMCE并插入动态内容

  27. 27

    C#UWP将自定义控件添加到开始菜单磁贴

  28. 28

    使用下拉操作将自定义按钮添加到屏幕顶部

  29. 29

    Eclipse 将自定义图标添加到内容类型

热门标签

归档