草庐IT

javascript - 如何创建一个添加带有 HTML 标签和类的字符串的按钮？

coder 2024-05-08 原文

基于此link ，我尝试添加一个新按钮，它允许我在光标位置插入一个字符串。它到目前为止有效，但是我不得不更改这一行:

this.quill.insertText(cursorPosition, "★");

到:

this.quill.clipboard.dangerouslyPasteHTML(cursorPosition, '<i>★</i>');

因为我希望能够用字符串粘贴 HTML 标记。

现在，在下一步中，我想添加一个带有 HTML 标签的类:

this.quill.clipboard.dangerouslyPasteHTML(cursorPosition, '<i class="my-icon">★</i>');

但是，每当我现在单击该按钮时，该类就会被完全丢弃。事实上，我得到的不是标签 i，而是标签 em，它适用于我想做的事情(斜体)，但它仍然很烦人。

单击按钮时如何确保标签和类保持不变？我想要做的就是单击一个按钮，然后将一个小字符串包含在一个带有类的跨度中，以显示在编辑器中。我怎样才能做到这一点？

最佳答案

更新:24-Apr-18

所以花了很多时间才真正弄清楚并让它发挥作用。可以通过创建自己的 Blot 并覆盖 italic blot

来做到这一点 
let Inline = Quill.import('blots/inline');

class Icon extends Inline {
  static create(value) {
    let node = super.create(value);
    if (value) {
      console.log(value)
      node.setAttribute('class', value);
    }
    return node;
  }

  static formats(domNode) {
    console.log(domNode)
    return domNode.getAttribute("class");
  }

  format(name, value) {
    console.log(name, value)
    if (name !== this.statics.blotName || !value) return super.format(name, value);
    if (value){
      this.domNode.setAttribute('class', value);
    }
  }
}
Icon.blotName = 'icon';
Icon.tagName = 'span';
Quill.register(Icon);

var BackgroundClass = Quill.import('attributors/class/background');
var ColorClass = Quill.import('attributors/class/color');
var SizeStyle = Quill.import('attributors/style/size');
Quill.register(BackgroundClass, true);
Quill.register(ColorClass, true);
Quill.register(SizeStyle, true);


var quill = new Quill('#editor-container', {
  modules: {
    toolbar: '#toolbar-container'
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'
});


var customButton = document.querySelector('#custom-button');
customButton.addEventListener('click', function() {
  quill.insertText(quill.getSelection().index, "★\n", 'icon', 'fa fa-icon fa-icon-green');
});

这是一个codepen同样

原始答案

QuillJS 是富文本编辑器，而不是 HTML 所见即所得编辑器。所以你不能在同一个里面得到你自己的自定义 html

https://codepen.io/anon/pen/ZyEjrQ

在上面的代码笔中，点击source，试试你的代码，然后再次点击source

源 View

源 View -> UI View -> 源 View

如果您尝试删除剪贴板匹配器，那么您几乎会破坏富文本功能。

因此，要么保留此要求，要么为您的工作选择其他编辑器。您应该查看的一些主题

https://github.com/quilljs/quill/issues/1856

https://github.com/quilljs/quill/issues/1733

https://github.com/quilljs/quill/issues/1657#issuecomment-325737074

关于javascript - 如何创建一个添加带有 HTML 标签和类的字符串的按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49854603/

javascriptHTML39noreferrernoopenerjqueryquill

有关javascript - 如何创建一个添加带有 HTML 标签和类的字符串的按钮？的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. Ruby 解析字符串 - 2

    我有一个字符串input="maybe(thisis|thatwas)some((nice|ugly)(day|night)|(strange(weather|time)))"Ruby中解析该字符串的最佳方法是什么？我的意思是脚本应该能够像这样构建句子:maybethisissomeuglynightmaybethatwassomenicenightmaybethiswassomestrangetime等等，你明白了......我应该一个字符一个字符地读取字符串并构建一个带有堆栈的状态机来存储括号值以供以后计算，还是有更好的方法？也许为此目的准备了一个开箱即用的库？

  4. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  5. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，

  6. ruby-on-rails - unicode 字符串的长度 - 2

    在我的Rails(2.3，Ruby1.8.7)应用程序中，我需要将字符串截断到一定长度。该字符串是unicode，在控制台中运行测试时，例如'א'.length，我意识到返回了双倍长度。我想要一个与编码无关的长度，以便对unicode字符串或latin1编码字符串进行相同的截断。我已经了解了Ruby的大部分unicode资料，但仍然有些一头雾水。应该如何解决这个问题？ 最佳答案 Rails有一个返回多字节字符的mb_chars方法。试试unicode_string.mb_chars.slice(0,50)

  7. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  8. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  9. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  10. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

随机推荐