quill - Is it possible to create a custom format/blot with complex substructure? -

-

i'm investigating use of quill project, , need know if it's possible create custom format/blot more complexity single element , single parameter.

an example of 1 of layouts want be:

<span class="format-container">     <span class="format-info" data-attr="param 1 (non-displayed)">         param 2 (displayed user -- click invoke application ui edit)     </span>     <span class="format-content">         user's text/child elements go here     </span> </span>

in cases i'm looking into, custom formats of inline scope , still have single parent container , single place child content go.

custom formats in quill don't seem documented @ moment. poked around in sources , able figure out isn't possible in 0.20.1. however, feel doable in 1.0.0 beta w/ parchment, i'm not sure on specifics of i'd need write.

so possible in 1.0.0? if so, how done?

edit: i'm going for: example

so, figured out how in end minimal effort. involves defining new blot type quill 1.3 or greater, same code should work on older versions untested.

see code snippet working example. crux extend existing embed blot 'blots/embed' , define own toolbar handler inject arbitrary dom node instances.

// utility function used inherit non prototypical methods/properties  function extend(target, base) {    (var prop in base) {      target[prop] = base[prop];    }  }    // definition of custom blot.  (function(embed) {    'use strict';      function span() {      object.getprototypeof(embed).apply(this, arguments);    }      span.prototype = object.create(embed && embed.prototype);    span.prototype.constructor = span;    extend(span, embed);      span.create = function create(value) {      return value; // expects domnode value    };      span.value = function value(domnode) {      return domnode;    };      span.blotname = 'span';    span.tagname = 'span';    span.classname = 'complex';      quill.register(span, true);  })(quill.import('blots/embed')); // import embed blot. important being extended    // custom handler toolbar button  var handler = function() {    var complexspan = document.getelementbyid('complextype').firstelementchild.clonenode(true);    var selection = quill.getselection();      quill.insertembed(selection.index, 'span', complexspan);  }    // instantiate quill. note modules.toolbar.handlers has 'span' handler. quill parses // class on button in toolbar markup: 'ql-span' 'ql-' + blotname  var quill = new quill('#editor', {    modules: {      toolbar: {        container: '.toolbar',        handlers: {          'span': handler        }      }    },    theme: 'snow'  });
button.ql-span {    width: 150px !important;  }    .complex {    border-radius: 10px;    border: 2px solid black;    margin: 3px;  }    .inner {    border-radius: 10px;    background: #767676;    color: #ffffff;    padding-left: 6px;    padding-right: 6px;  }    .formatting {    font-weight: bold;    font-style: italic;    text-decoration: underline;  }    .nested {    margin-left: 3px;    margin-right: 3px;  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.1/quill.min.js"></script>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.1/quill.snow.css" />  <div id="wrapper">    <div id="toolbar" class="toolbar">      <span class="ql-formats">        <button class="ql-bold"></button>        <button class="ql-italic"></button>        <button class="ql-underline"></button>      </span>      <span class="ql-formats">        <button class="ql-span">complex span type</button>      </span>    </div>      <div id="editor">lorem ipsum       <span contenteditable="false">        <span class="complex" spellcheck="false">          <span class="inner">format applied</span>          <span class="nested">more text</span>          <span class="formatting">with formatting</span>          <span class="nested">dolor</span>        </span>      </span> sit amet    </div>  </div>    <div id="complextype" style="display:none;">  <span contenteditable="false"><span class="complex" spellcheck="false"><span class="inner">format applied</span><span class="nested">more text</span><span class="formatting">with formatting</span><span class="nested">dolor</span></span></span>  </div>


Comments

Post a Comment

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

-
creating wordpress website , i'm getting following php error: parse error: syntax error, unexpected 'endforeach' (t_endforeach) in /home/soralmedia/public_html/wp-content/themes/soral media/woocommerce/myaccount/my-orders.php on line 98 here's code file: <?php /** * orders * * shows recent orders on account page. * * template can overridden copying yourtheme/woocommerce/myaccount/my-orders.php. * * however, on occasion woocommerce need update template files , (the theme developer). * need copy new files theme maintain compatibility. try this. * little possible, happen. when occurs version of template file will. * bumped , readme list important changes. * * @see http://docs.woothemes.com/document/template-structure/ * @author woothemes * @package woocommerce/templates * @version 2.5.0 */ if ( ! defined( 'abspath' ) ) { exit; } $my_orders_columns = apply_filters( 'woocommerce_my_account_my_orders_columns', array( ...
Read more

Using django-mptt to get only the categories that have items -

-
sample structure: all uppercase: category mixed case: item root ├── books │   ├── fiction │   │   └── classics │   └── non-fiction ├── clothing └── electronics ├── laptops ├── phones │   ├── apple │   │   ├── iphone 6 │   │   ├── iphone 6 plus │   │   ├── iphone 6s │   │   └── iphone 6s plus │   ├── motorola │   │   ├── moto g4 │   │   ├── moto g4 play │   │   ├── moto g4 plus │   │   └── moto x │   └── samsung └── tablets └── apple i'm trying have index page show "electronics" category. "clothing" category shouldn't show since it's empty , "books" category shouldn't show either since, although has child categories, child categories don't have items. similarly, "electronics" page should show "phones" category. "laptops" category shouldn't show since it's empty , "tablets" category shouldn't show either since...
Read more

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

-
i new vba have developed code use in excel move text/numbers txt file. issue have 3 functions need go same txt file. when run first function has set fs = createobject("scripting.filesystemobject") set = fs.createtextfile(module1.nys45uploadfilename, true) a.writeline (str) a.close. the other 2 functions had save. set fs = createobject("scripting.filesystemobject") set = fs.savetextfile(module1.nys45uploadfilename, true) a.writeline (str) a.close. the first function go txt file, other 2 error object doesn't support property or method. when changed 3 create last function goes txt file. can not figure out word use in order make other 2 functions follow txt file in order keyed. the entire code follows private sub addrecord_click() on error goto errhandler module1.nys45uploadfilename = application.getsaveasfilename(filefilter:="textfiles (*.txt), *.txt") if module1.nys45uploadfilename = "false" exit sub ...
Read more