javascript - TinyMCE 添加切换样式

coder 2024-07-22 原文

我正在开发一个 TinyMCE 插件，我想让它做的一件事是注册切换自定义格式的命令/按钮。

例如，如果您在 TinyMCE 中单击粗体按钮，它将在粗体文本中突出显示粗体按钮。深入研究源代码，我发现这是通过以下方式发生的:tinymce.EditorCommands.addCommands 以为我似乎无法弄清楚如何复制它。 TinyMCE 的文档也很糟糕 =(

所以给定 customFormat 我希望能够通过我的插件设置一个按钮，当应用 customFormat 时，它会像工具栏上的粗体、斜体和其他此类按钮一样显示。单击我的自定义格式可打开/关闭该格式。我可以通过“addCommand”和“addButton”轻松完成 toogle，但它没有像 Bold 和其他人那样的状态跟踪。

显示我当前的非工作尝试(这段代码在我的插件创建方法的初始化中):

tinymce.EditorCommands.call('addCommands', {
   'MyFormat' :  function(name) {
      ed.formatter.toggle("customFormat");
    }
},'exec');

tinymce.EditorCommands.call('addCommands', {
   'MyFormat' : function(name) {
       return ed.formatter.match('customFormat');
    } 
},'state');

ed.addButton('customformat', {cmd : 'MyFormat'});

这里是 addCommands 的“文档”链接: http://www.tinymce.com/wiki.php/API3:method.tinymce.EditorCommands.addCommands

环顾四周后，我发现这似乎是完美的: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.addQueryStateHandler

但是当我实现代码时，它并没有改变按钮的状态:

  ed.addCommand('MyFormat', function(ui, v) {
    ed.formatter.toggle("thoughtFormat");
  });

  ed.addQueryStateHandler('MyFormat', function() { 
      return ed.formatter.match('thoughtFormat');
  });

  ed.addButton('myformat', {cmd : 'MyFormat'});

最佳答案

如果有人不想以“插件”方式进行操作，这里是 TinyMCE 4.x 的指南。

首先，您需要定义一个自定义格式:

formats: {
   custom_format: {inline: 'span', styles: {color: "red"}, attributes: {class: 'some_css_class'}}
}

然后您必须在工具栏上添加一个按钮:

toolbar: "mybutton",

接下来，您需要设置按钮，以便它切换格式:

setup: function(editor) {
        editor.addButton('mybutton', {
            text: 'My button',
            icon: false,
            onclick: function() {
                tinymce.activeEditor.formatter.toggle('custom_format')
            }
        });
}

此外，如果您希望编辑器自动设置按钮的状态以指示当前节点的格式，请将此添加到setup 函数:

onPostRender: function() {
    var ctrl = this;                
    editor.on('NodeChange', function(e) {
        ctrl.active(e.element.className == "some_css_class")
    });
}

您的 tinymce.init 函数应该如下所示:

tinymce.init({
    selector: "textarea",
    formats: {
       // Other formats...
       custom_format: {inline: 'span', styles: {color: "red"}, attributes: {class: 'some_css_class'}}
    }
    // Other default toolbars
    toolbar_n: "mybutton",

    // Finally, setup your button
    setup: function(editor) {
        editor.addButton('mybutton', {
            text: 'My Button',
            icon: false,
            onclick: function() {
                tinymce.activeEditor.formatter.toggle('custom_format')
            },
            onPostRender: function() {
                var ctrl = this;                
                editor.on('NodeChange', function(e) {
                    ctrl.active(e.element.className == "some_css_class")
                });
            }
        });
    }

请注意我添加到自定义格式的 class 属性。这种方法使我可以在单独的样式表文件中定义我的自定义样式，并使我的标记尽可能简洁(无内联样式!)。将 content_css 选项指向您的样式表，您就可以开始了。然而，由于我使用 Rails 作为后端和 BatmanJS 作为前端(我对后者相当陌生)，我无法弄清楚 Assets 路由是如何工作的，最终添加了我的自定义样式为 tinyMCE 皮肤本身的默认内容样式表文件(位于 skins/SKIN_NAME/content.min.css)。

关于javascript - TinyMCE 添加切换样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14813443/

有关javascript - TinyMCE 添加切换样式的更多相关文章

ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2
当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/
ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2
我有一大串格式化数据(例如JSON)，我想使用Psychinruby同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解
ruby - 将 Bootstrap Less 添加到 Sinatra - 2
我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它
ruby-on-rails - Ruby on Rails with Haml - 如何从 erb 切换 - 2
我正在从erb文件切换到HAML。我将hamlgem添加到我的系统中。我创建了app/views/layouts/application.html.haml文件。我应该只删除application.html.erb文件吗？此外，仍然有/public/index.html文件被呈现为默认页面。我想创建自己的默认index.html.haml页面。我应该把它放在哪里以及如何使系统呈现该文件而不是默认索引文件？谢谢! 最佳答案是的，您可以删除任何已转换为HAML的View的ERB版本。至于你的另一个问题，删除public/index/h
ruby - 续集在添加关联时访问many_to_many连接表 - 2
我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以
ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2
我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"
ruby - 可以通过多少种方法将方法添加到 ruby 对象？ - 2
当谈到运行时自省(introspection)和动态代码生成时，我认为ruby没有任何竞争对手，可能除了一些lisp方言。前几天，我正在做一些代码练习来探索ruby的动态功能，我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角，因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资
ruby - 如何在 Ruby 中向现有方法定义添加语句 - 2
我注意到类定义，如果我打开classMyClass，并在不覆盖的情况下添加一些东西我仍然得到了之前定义的原始方法。添加的新语句扩充了现有语句。但是对于方法定义，我仍然想要与类定义相同的行为，但是当我打开defmy_method时似乎,def中的现有语句和end被覆盖了，我需要重写一遍。那么有什么方法可以使方法定义的行为与定义相同，类似于super，但不一定是子类？最佳答案我想您正在寻找alias_method:classAalias_method:old_func,:funcdeffuncold_func#similartoca
ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2
我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？最佳答案参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司
ruby - 我如何添加二进制数据来遏制 POST - 2
我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

javascript - TinyMCE 添加切换样式

有关javascript - TinyMCE 添加切换样式的更多相关文章

随机推荐