{"id":152,"date":"2019-08-28T10:19:40","date_gmt":"2019-08-28T09:19:40","guid":{"rendered":"http:\/\/blog.c-hase.de\/?p=152"},"modified":"2019-09-03T13:58:53","modified_gmt":"2019-09-03T12:58:53","slug":"quilleditor-eigene-buttons-erstellen-die-ein-div-um-den-text-mit-einer-klasse-machen","status":"publish","type":"post","link":"http:\/\/blog.c-hase.de\/?p=152","title":{"rendered":"Quilleditor  eigene Buttons erstellen, die ein div um den text mit einer klasse machen"},"content":{"rendered":"<pre>import * as Quill from 'quill';\r\nlet Inline = (Quill as any).import('blots\/inline');\r\n\r\n(Quill as any).register(class extends Inline{\r\n  static blotName = 'spanblock';\r\n  static tagName = 'div';  static create(value){  let node = super.create(); node.setAttribute('class',this.blotName);    return node;  }\r\n});\r\n.....\r\n\r\n\r\n<\/pre>\n<pre>export class ....\r\nngOnInit() {\r\n  this.modules = {\r\n     toolbar: [\r\n       ['spanblock',.....<\/pre>\n<p>dann noch die css:<\/p>\n<pre>\/**f\u00fcr alle (dynamischen) Buttons in der toolbar**\/\r\nquill-editor .ql-toolbar .ql-formats button:after {\r\n  color:black;\r\n  line-height: 19px;\r\n  display: inline;\r\n  position: relative;\r\n  bottom: 4px;\r\n}\r\nquill-editor .ql-toolbar .ql-formats button{\r\n  background-color: #F8F8F8;\r\n  border: 1px solid #CCC;\r\n  line-height: 19px;\r\n  padding: 6px 10px;\r\n  border-radius: 3px;\r\n  margin: 15px 0;\r\n  width:initial;\r\n}\r\n\r\n\/**speziell der Button*************\/\r\nquill-editor .ql-toolbar .ql-formats button.ql-spanblock:after{\r\n  content:\"wichtig\";\r\n  font-weight: bold;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/stackoverflow.com\/questions\/49247878\/how-to-add-css-class-to-a-quill-selection\">https:\/\/stackoverflow.com\/questions\/49247878\/how-to-add-css-class-to-a-quill-selection<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>import * as Quill from &#8218;quill&#8216;; let Inline = (Quill as any).import(&#8218;blots\/inline&#8216;); (Quill as any).register(class extends Inline{ static blotName = &#8217;spanblock&#8216;; static tagName = &#8218;div&#8216;; static create(value){ let node = super.create(); node.setAttribute(&#8218;class&#8216;,this.blotName); return node; } }); &#8230;.. export class &#8230;. &hellip; <a href=\"http:\/\/blog.c-hase.de\/?p=152\">Weiterlesen <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-152","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/blog.c-hase.de\/index.php?rest_route=\/wp\/v2\/posts\/152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.c-hase.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.c-hase.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.c-hase.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.c-hase.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=152"}],"version-history":[{"count":5,"href":"http:\/\/blog.c-hase.de\/index.php?rest_route=\/wp\/v2\/posts\/152\/revisions"}],"predecessor-version":[{"id":157,"href":"http:\/\/blog.c-hase.de\/index.php?rest_route=\/wp\/v2\/posts\/152\/revisions\/157"}],"wp:attachment":[{"href":"http:\/\/blog.c-hase.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.c-hase.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=152"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.c-hase.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}