!function(){function s(a){return s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s},s(a)}function a(s,a){for(var n=0;n<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <link rel="icon" href="/favicon.ico" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <link rel="shortcut icon" href="https://avatars.githubusercontent.com/u/87648636?s=60&v=4" type="image/x-icon">\n <title>Tinymce-Plugin</title>\n <style>\n .open-plugin{\n width:150px;\n height: 30px;\n display: flex;\n padding: 0px 10px;\n background-color:rgb(27, 158, 234);\n border-radius:5px;\n color:white;\n font-size:0;\n text-align:center;\n cursor:pointer;\n align-content: space-around;\n flex-wrap: nowrap;\n align-items: center;\n justify-items: center;\n }\n .open-plugin img{\n display: block;\n width: 20px;\n height: 20px;\n }\n .open-plugin span{\n display: inline-block;\n height:20px;\n line-height:20px;\n vertical-align: middle;\n margin-left:10px;\n font-size:14px;\n }\n </style>\n <script src='/tinymce/tinymce.js'></script>\n <script src="/tinymce/tinymce-plugin.js"></script>\n <script src="https://unpkg.com/tinymce-plugin/langs/zh_CN.js"></script>\n <script src="https://unpkg.com/tinymce-plugin/plugins/tpIndent2em/plugin.min.js"></script> \n </head>\n <body tp-page-height="298">\n <div>\n <textarea class="tinymce">\n <p>这是一个首行缩进插件</p>\n </textarea>\n </div>\n <div>\n <p></p>\n <a onclick="openPlugin()" class="open-plugin" title="点击调用触发插件" ><img src="https://avatars.githubusercontent.com/u/87648636?s=60&v=4" alt=""><span>点击调用触发插件</span></a>\n </div>\n <script>\n\n tinymce.init({\n selector: 'textarea.tinymce',\n language: 'zh_CN',\n skeletonScreen: true,\n plugins: 'code tpIndent2em autoresize',\n toolbar: 'code tpIndent2em'\n });\n\n var openPlugin=()=>{\n tinymce.activeEditor.execCommand('mceTpIndent2em');\n }\n </script>\n </body>\n</html>\n\n
html
'},sourceCode:function(){return''}},template:'\n \n '},r={name:"domeVue3",components:{TinymceVue:p},data:function(){return{content:"这是一个首行缩进插件",tinymceOptions:{min_height:300,max_height:700,skeletonScreen:!0,base_url:"/tinymce",plugins:"code tpIndent2em preview autoresize",toolbar:"code tpIndent2em preview"}}}};r.methods?r.methods.source=function(){return'
<template>\n<div>\n <h1>插件demo展示区域</h1>\n  <div class="vueDemo">\n    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>\n  </div>\n  <div  v-html="content"></div>\n</div>\n</template>\n\n<script>\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport TinymceVue from "@tinymce-plugin/tinymce-vue";\nimport "tinymce-plugin/plugins/tpIndent2em/plugin.js";\nexport default{\nname: 'domeVue3',\ncomponents: { TinymceVue },\ndata(){\n    return {\n        content: '这是一个首行缩进插件',\n        tinymceOptions:{\n                min_height: 300,\n                max_height: 700,\n                skeletonScreen: true,\n                base_url:'/tinymce',\n                plugins: 'code tpIndent2em preview autoresize',\n                toolbar: 'code tpIndent2em preview',\n             \n        }\n    }\n  }\n}\n</script>\n
vue
'}:r.methods={source:function(){return'
<template>\n<div>\n <h1>插件demo展示区域</h1>\n  <div class="vueDemo">\n    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>\n  </div>\n  <div  v-html="content"></div>\n</div>\n</template>\n\n<script>\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport TinymceVue from "@tinymce-plugin/tinymce-vue";\nimport "tinymce-plugin/plugins/tpIndent2em/plugin.js";\nexport default{\nname: 'domeVue3',\ncomponents: { TinymceVue },\ndata(){\n    return {\n        content: '这是一个首行缩进插件',\n        tinymceOptions:{\n                min_height: 300,\n                max_height: 700,\n                skeletonScreen: true,\n                base_url:'/tinymce',\n                plugins: 'code tpIndent2em preview autoresize',\n                toolbar: 'code tpIndent2em preview',\n             \n        }\n    }\n  }\n}\n</script>\n
vue
'}},r.template='\n \'\n \n ';var o={};o.methods?(o.methods.source=function(){return'
<template>\n<div>\n <h1>插件demo展示区域</h1>\n  <div class="vueDemo">\n    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>\n  </div>\n  <div v-html="content"></div>\n</div>\n</template>\n\n<script>\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport "tinymce-plugin/plugins/tpIndent2em/plugin.js";\nimport TinymceVue from "@tinymce-plugin/tinymce-vue";\nexport default{\nname: 'domeVue2',\ncomponents: { TinymceVue },\ndata(){\n    return {\n        content: '这是一个首行缩进插件',\n        tinymceOptions:{\n                min_height: 300,\n                max_height: 700,\n                base_url:'/tinymce',\n                plugins: 'code tpIndent2em preview autoresize',\n                toolbar: 'code tpIndent2em Preview',\n                skeletonScreen: true,\n        }\n    }\n  }\n}\n</script>\n
vue
'},o.methods.template=function(){return'
\n

插件demo展示区域

\n
\n \n
\n
\n
'},o.methods.sourceCode=function(){return{name:"domeVue2",components:{TinymceVue:p},data:function(){return{content:"这是一个首行缩进插件",tinymceOptions:{min_height:300,max_height:700,base_url:"/tinymce",plugins:"code tpIndent2em preview autoresize",toolbar:"code tpIndent2em Preview",skeletonScreen:!0}}}}}):o.methods={template:function(){return'
\n

插件demo展示区域

\n
\n \n
\n
\n
'},sourceCode:function(){return{name:"domeVue2",components:{TinymceVue:p},data:function(){return{content:"这是一个首行缩进插件",tinymceOptions:{min_height:300,max_height:700,base_url:"/tinymce",plugins:"code tpIndent2em preview autoresize",toolbar:"code tpIndent2em Preview",skeletonScreen:!0}}}}},source:function(){return'
<template>\n<div>\n <h1>插件demo展示区域</h1>\n  <div class="vueDemo">\n    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>\n  </div>\n  <div v-html="content"></div>\n</div>\n</template>\n\n<script>\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport "tinymce-plugin/plugins/tpIndent2em/plugin.js";\nimport TinymceVue from "@tinymce-plugin/tinymce-vue";\nexport default{\nname: 'domeVue2',\ncomponents: { TinymceVue },\ndata(){\n    return {\n        content: '这是一个首行缩进插件',\n        tinymceOptions:{\n                min_height: 300,\n                max_height: 700,\n                base_url:'/tinymce',\n                plugins: 'code tpIndent2em preview autoresize',\n                toolbar: 'code tpIndent2em Preview',\n                skeletonScreen: true,\n        }\n    }\n  }\n}\n</script>\n
vue
'}},o.template='\n \n ';var j={};j.methods={source:function(){return'
<script>\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport "tinymce-plugin/plugins/tpIndent2em/plugin.js";\nimport { Editor } from '@tinymce/tinymce-react';\n\n     class ReactDemo extends React.Component{\n       constructor(props) {\n           super(props);\n           this.state = { reactDemoInitialValue: "<p>这是一个REactDemo</p>"};\n           this.reactDemoInit = {\n                    min_height: 220,\n                    base_url:'/tinymce',\n                    branding: false,\n                    language:'zh_CN',\n                    menubar: false,\n                    skeletonScreen: true,\n                    plugins: 'code tpIndent2em autoresize',\n                    toolbar: 'undo redo code tpIndent2em',\n                    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'\n             };\n       this.handleChange = (data)=>{\n              this.setState({reactDemoInitialValue: data})\n        }\n      }\n      render(){\n        return (\n           <div>\n            <h1>这是一个首行缩进插件</h1>\n            <div>\n            <Editor initialValue={this.state.reactDemoInitialValue} init={this.reactDemoInit} onEditorChange={this.handleChange} />\n            </div>\n            <div dangerouslySetInnerHTML={{__html: this.state.reactDemoInitialValue }} ></div>\n          </div>\n          );\n      }\n    }\n\n   ReactDOM.render(<ReactDemo />, document.getElementById('ReactRootID'));\n</script>\n
html
'},sourceCode:function(s){var p=function(s){!function(s,a){if("function"!=typeof a&&null!==a)throw new TypeError("Super expression must either be null or a function");s.prototype=Object.create(a&&a.prototype,{constructor:{value:s,writable:!0,configurable:!0}}),Object.defineProperty(s,"prototype",{writable:!1}),a&&n(s,a)}(r,s);var p,e,c,h=l(r);function r(s){var a;return function(s,a){if(!(s instanceof a))throw new TypeError("Cannot call a class as a function")}(this,r),(a=h.call(this,s)).state={reactDemoInitialValue:"

这是一个REactDemo

"},a.reactDemoInit={min_height:220,base_url:"/tinymce",branding:!1,language:"zh_CN",menubar:!1,skeletonScreen:!0,plugins:"code tpIndent2em autoresize",toolbar:"undo redo code tpIndent2em",content_style:"body { font-family:Helvetica,Arial,sans-serif; font-size:14px }"},a.handleChange=function(s){a.setState({reactDemoInitialValue:s})},a}return p=r,(e=[{key:"render",value:function(){return t.createElement("div",null,t.createElement("h1",null,"这是一个首行缩进插件"),t.createElement("div",null,t.createElement(i,{initialValue:this.state.reactDemoInitialValue,init:this.reactDemoInit,onEditorChange:this.handleChange})),t.createElement("div",{dangerouslySetInnerHTML:{__html:this.state.reactDemoInitialValue}}))}}])&&a(p.prototype,e),c&&a(p,c),Object.defineProperty(p,"prototype",{writable:!1}),r}(t.Component);return e.render(t.createElement(p,null),s)}},j.template='\n \n ';s("default",c({components:{Demo0:h,Demo1:r,Demo2:o,Demo3:j},template:'

# 🚀 tpIndent2em

\n

tinymce-plugin \nrelease candidate \ntinymce Version \nGitHub license \ntinymce Version

\n
\n

实现 tinymce 富文本框首行缩进功能 能很好配合 字体大小(fon-size) 字母间距(letter-spacing) 实现首行缩进

\n
\n

# 使用方式

\n

# CDN

\n
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
<script src="https://unpkg.com/tinymce-plugin/plugins/tpIndent2em/plugin.min.js"></script><!--引入-->\n\n<!-- 使用 -->\n<script>\n   tinymce.init({\n  ...\n   plugins: "tpIndent2em"\n   toolbar: "tpIndent2em"\n  ...\n })\n</script>\n\n
html
\n

# NPM

\n
\n

使用 tinymce-plugin 库

\n
\n

# 下载 tinymce-plugin

\n\n \n
  • 1
npm i tinymce-plugin \n
sh
\n\n\n
  • 1
yarn add tinymce-plugin -D \n
sh
\n\n\n

# 项目中使用

\n
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
 import "tinymce-plugin"\n import "tinymce-plugin/plugins/tpIndent2em/plugin.js";\n tinymce.init({\n  ...\n   plugins: "tpIndent2em"\n   toolbar: "tpIndent2em"\n  ...\n })\n\n
js
\n

# 下载方式2

\n
  • 1
import "@tinymce/tp-indent2em"\n
js
\n\n \n
  • 1
npm i @tinymce-plugin/tp-indent2em\n
sh
\n\n\n
  • 1
yarn add @tinymce-plugin/tp-indent2em -D \n
sh
\n\n\n

# 项目中使用

\n
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
 import "tinymce-plugin"\n import "@tinymce-plugin/tp-indent2em";\n tinymce.init({\n  ...\n   plugins: "tpIndent2em"\n   toolbar: "tpIndent2em"\n  ...\n })\n
js
\n
\n

tpIndent2em 依赖 tinymce-plugin

\n
\n

# Demo

\n\n \n\n \n \n\n \n \n\n \n \n\n \n
'}))}}}))}();