From fc5a0acf5834b95ad1a0d5d924aa9eb23565e9b4 Mon Sep 17 00:00:00 2001 From: shikha Date: Mon, 7 Jan 2019 15:43:51 +1000 Subject: [PATCH] Format Painter docs --- _data/nav.yml | 4 ++ demo/formatpainter.md | 15 ++++++ enterprise/formatpainter.md | 30 +++++++++++ images/fp-disabled.png | Bin 0 -> 1590 bytes images/fp-enabled.png | Bin 0 -> 3782 bytes plugins/formatpainter.md | 103 ++++++++++++++++++++++++++++++++++++ 6 files changed, 152 insertions(+) create mode 100644 demo/formatpainter.md create mode 100644 enterprise/formatpainter.md create mode 100644 images/fp-disabled.png create mode 100644 images/fp-enabled.png create mode 100644 plugins/formatpainter.md diff --git a/_data/nav.yml b/_data/nav.yml index c21a6f3..6111aae 100644 --- a/_data/nav.yml +++ b/_data/nav.yml @@ -28,6 +28,7 @@ - url: "whats-new" - url: "basic-example" - url: "full-featured" + - url: "formatpainter" - url: "drive" - url: "editor-dfree" - url: "inline" @@ -236,6 +237,7 @@ - url: "drive" - url: "emoticons" - url: "mediaembed" + - url: "formatpainter" - url: "fullpage" pages: - url: "#fullpage_default_doctype" @@ -311,6 +313,7 @@ - url: "#video_template_callback" - url: "mentions" - url: "moxiemanager" + - url: "formatpainter" - url: "nonbreaking" pages: - url: "#nonbreaking_force_tab" @@ -423,6 +426,7 @@ # - url: "tiny-comments" - url: "tinydrive" - url: "moxiemanager" + - url: "formatpainter" - url: "paste-from-word" - url: "check-spelling" pages: diff --git a/demo/formatpainter.md b/demo/formatpainter.md new file mode 100644 index 0000000..5976bcb --- /dev/null +++ b/demo/formatpainter.md @@ -0,0 +1,15 @@ +--- +layout: default +title: Format Painter +title_nav: Format Painter +description: Quickly apply formats to multiple pieces of text. +keywords: formats formatting edit formatpainter_removeformat formatpainter_tableformats formatpainter_blacklisted_formats format painter configuration +controls: toolbar button +--- + + +## Live example + +This example shows how to use Format Painter Format Painter plugin to copy and paste formatting from one location to another. For more information on the Format Painter plugin, see the [docs]({{site.baseurl}}/plugins/formatpainter/). + + \ No newline at end of file diff --git a/enterprise/formatpainter.md b/enterprise/formatpainter.md new file mode 100644 index 0000000..60427ad --- /dev/null +++ b/enterprise/formatpainter.md @@ -0,0 +1,30 @@ +--- +layout: default +title: Format Painter +title_nav: Format Painter +description: Quickly apply formats to multiple pieces of text. +keywords: formats formatting edit formatpainter_removeformat formatpainter_tableformats formatpainter_blacklisted_formats format painter configuration +controls: toolbar button +--- + +The Format Painter plugin allows a user to copy and paste formatting from one location to another, such as font style and size. + +The format painter retains the formatting after application making it possible to apply the same formatting multiple times by using the `Ctrl+Alt+V` keyboard shortcut. + +The ability to reuse existing formatting saves the user time and ensures consistency across the content. + +### Getting started + +#### Creating an account + +To try out Format Painter and Tiny Cloud-delivered editor, the first step is to create a free [Tiny account](https://www.tiny.cloud/download/). + +> The free user account provisioned with a free 30-day trial of all Tiny [premium plugins](https://apps.tiny.cloud/product-category/tiny-cloud-extensions/), with no credit card information or commitment required. + +### Buy TinyMCE Format Painter + +Start with this [dedicated product page](https://about.tiny.cloud/products/formatpainter/) to see all the flexible pricing options. OEM and enterprise customers should [contact sales directly](https://www.tinymce.com/pricing/). + +For more information on Format Painter refer to the full [documentation]({{site.baseurl}}/plugins/formatpainter/). + +There is also a demo provided to explore the Format Painter capabilities [here]({{site.baseurl}}/demo/formatpainter/). diff --git a/images/fp-disabled.png b/images/fp-disabled.png new file mode 100644 index 0000000000000000000000000000000000000000..622aaa9c7bbddd7d89518bcc686cd276d78cc5bf GIT binary patch literal 1590 zcmV-62Fdw}P) zaB^>EX>4U6ba`-PAZ2)IW&i+q+Rc}3aw91WhW~SlJpz&th~w~CwKv$~?+e|wV~>;A znc1rCjvHFg0`y3Nxbe^5)BS~ueU2_@vY2D^xIzw@3o7Q1>nO>G{oEIyO?bbPJF5QD zgS?=W<28=6e}P%H8icIvTH5&65JWsSV*XFod?2_JGg-(5bxE8)X(&L6i^ z?PXaH?;*h$U7=6d@emS^r>#*0GZ2%4C+}zCB@xtvBs^K-bKALV^}%@Ep4-lsvxnT9 z!ufc1hz~Y8<)jaCxl-eMYL_bCH-J|1AFmI#o3q=T<5*n@5tfSXT-3#cyM~T%iXi*5 zh&$n@sHc5r+=eAK5bK~>aW_Yq7}lN?s8gXyW0#E@rWklI%+1V=Wy=ia&)hbYux^^1 zBujT-#L_@bAm-~_Xpfusc#RArcS27lC|g8-x!p72PwuOtIhX4aEn{}uw!*x4`81}n z$gL-O0SL|0rn>FBZ+FFdyB1ghLEUCHEU@@`sHjRe-;&K)&`*7E{s;|9{Zs%GVQj@@ zNI<|x5~WB!F()F}(ZHu*<}86L2#_jwauaMsBH$RWvGGl!-ItXQF;WXas6+&bflvXg z5ETBCg29K1iUy~uQIncxEm2~K8e>dx<*1S*g`_E_lq}^`Oe~mMv}9)4O6Dv`VVYx3 zE?dsI6bxFRy5Q@A9;H;SQbW}mYpParEe-C|LemyoYSwZqox5~|e~&%6Zaw!hXuy?5 z7&_ue!$uxu!q=wEFm=Y6rp-LdmD)-5o*F%n`6ttHiT&wH?`7O5f<%|W}fbOzEn&~hiGS{6o-Fu;h zQA_i8LXX|#g2tjLf_$Z5q4DEJ%=Rr}B?BE~@gcW<+U89Rg zAvHq6IC(xs?;E9iCEQo&*1`R#aLL_QJ65jPS$EC7mBYR$-A}9wn|{dIDuojMsoDNt zaa{ksP078mYdyqsA+mZjW`k|9f0c=x9e1s*Smbd!CC)YW=APpGk2j(26(<+c$}xuS z2r^n`MQTK1vNicVS&v+l5*#zaHQ}~)xI=68sSVs8Iz#+7iUjAe?EVEvvgas;JON<< z000JJOGiWi{{a60|De66lK=n!32;bRa{vG?BLDy{BLR4&KXw2B00(qQO+^Rd3=sn_ z8z3@*3IG5A*hxe|R7l5T{Qv*|e}(}BObi1IMjgO{OJdE&?F{QS?;zV?b7KRB{LDmx z>KJh)!pP)2hEr!RQsle47Y>pi0@MJLW-NfS&5ZRKEKCjQ>wt+f=EK=}=?PdJFuZfY z-3td9%#8KPa{wPN4@H*q@^Dj@4ZEAG7}jpw&hY8;7qT1>?C(LD1NeA(7!qSb2d*H( z1+Lw=&G7llSEAJuQcJP}n!6`cTtE$tx_}h0boK;-YGkA(Xy*WICERFxVAKJl4j8@# oQLvvU3SUcIl_Cc)4s_250FKN%C_&1|_W%F@07*qoM6N<$g6qunN&o-= literal 0 HcmV?d00001 diff --git a/images/fp-enabled.png b/images/fp-enabled.png new file mode 100644 index 0000000000000000000000000000000000000000..7dd273f41c15805135dbb1f2d3df4e05a7572319 GIT binary patch literal 3782 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 literal 0 HcmV?d00001 diff --git a/plugins/formatpainter.md b/plugins/formatpainter.md new file mode 100644 index 0000000..57dce77 --- /dev/null +++ b/plugins/formatpainter.md @@ -0,0 +1,103 @@ +--- +layout: default +title: Format Painter +title_nav: Format Painter +description: Quickly apply formats to multiple pieces of text. +keywords: formats formatting edit formatpainter_removeformat formatpainter_tableformats formatpainter_blacklisted_formats format painter configuration +controls: toolbar button +--- + +The Format Painter plugin allows a user to copy and paste formatting from one location to another, such as font style and size. The format painter is capable of working with a wide variety of formats such as inline and block formats and styles such as table styles. + +Format Painter is a premium plugin from Tiny. Please see the [Premium features]({{site.baseurl}}/enterprise/formatpainter/) section for all the buying options. + +Once you have obtained the Format Painter plugin, refer to the following instructions for using it. + +### Configuring the Format Painter toolbar button + +Use the following script to configure the Format Painter toolbar button: + +##### Example + +```js +tinymce.init({ + selector: "textarea", // change this value according to your HTML + plugins: "formatpainter", + toolbar: "formatpainter" +}); +``` +**Result**: +The ![**Format Painter**]({{site.baseurl}}/images/fp-disabled.png)(**Format Painter**) button appears in the toolbar menu. + +## Using Format Painter + +The format painter is accessed using either keyboard shortcuts or a toolbar button. + +The format painter operates in two modes, one for retrieval and one for application of formatting. The usage of the keyboard is slightly different from the usage of the toolbar buttons. + +**Usage with toolbar button** + +1. Position the cursor at the source content to retrieve the formatting. +2. Enable the **Format Painter** button to copy the formatting. The **Format Painter** toolbar button background color changes to _grey_ ![**Format Painter**]({{site.baseurl}}/images/fp-enabled.png). +3. Select the goal content to apply the formatting. + +**Result**: The formatting from the source content is applied to the goal content. + +**Usage with keyboard** + +1. Position the cursor at the source content to retrieve formatting. +2. Press the `Ctrl+Alt+C` keys to read the formatting. +3. Select the goal content to apply the formatting. +4. Press the `Ctrl+Alt+V` keys to apply the formatting. + +> The format painter retains the formatting after application making it possible to apply the same formatting multiple times by using the `Ctrl+Alt+V` keyboard shortcut. + +## Options + +The format painter acts upon all [`formats`]({{ site.baseurl }}/configure/content-formatting/#formats) registered in the editor. In addition to any standard formatting, it will treat **lists** as a block format whenever the [`lists plugin`]({{ site.baseurl }}/plugins/lists/) is made available. + +### `formats` + +The format painter plugin will register many formats upon initialization. To override these formats, use the [`formats`]({{ site.baseurl }}/configure/content-formatting/#exampleofusageoftheformatsoption) option. +
+The example below showcases the formats registered automatically by the plugin upon initialization. The `formatpainter_removeformat` is used to clear any existing formats before applying the new ones. It is similar to the [`removeformat`]({{ site.baseurl }}/configure/content-formatting/#removingaformat) format. + +**Type:** `Object` + +##### Example + +```js +tinymce.init({ + selector: 'textarea', // change this value according to your HTML + plugins: 'formatpainter', + formats: { + borderstyle: { selector: 'td,th', styles: { borderTopStyle: '%valueTop', borderRightStyle: '%valueRight', borderBottomStyle: '%valueBottom', borderLeftStyle: '%valueLeft', }, remove_similar: true }, + bordercolor: { selector: 'td,th', styles: { borderTopColor: '%valueTop', borderRightColor: '%valueRight', borderBottomColor: '%valueBottom', borderLeftColor: '%valueLeft' }, remove_similar: true }, + backgroundcolor: { selector: 'td,th', styles: { backgroundColor: '%value' }, remove_similar: true }, + formatpainter_removeformat: [ + { selector: 'b,strong,em,i,font,u,strike,sub,sup,dfn,code,samp,kbd,var,cite,mark,q,del,ins', remove: 'all', split: true, expand: false, block_expand: true, deep: true }, + { selector: 'span', attributes: ['style', 'class'], remove: 'empty', split: true, expand: false, deep: true }, + { selector: '*:not(tr,td,th,table)', attributes: ['style', 'class'], split: false, expand: false, deep: true } + ] + } +}); +``` + +### `formatpainter_blacklisted_formats` + +This option makes it possible to block the unwanted formats in the format painter. + +**Type:** `String` + +**Default:** `'link,address,removeformat,formatpainter_removeformat'` + +##### Example + +```js +tinymce.init({ + selector: 'textarea', // change this value according to your HTML + plugins: 'formatpainter', + formatpainter_blacklisted_formats: 'link,address,removeformat,formatpainter_removeformat' +}); +``` +Check out the [Format Painter demo]({{site.baseurl}}/demo/formatpainter/) to try out this new feature. \ No newline at end of file