可视化样式编辑器

用法

commonjs

import styleEditor from './style-editor.cjs';

// 渲染DOM 传入父元素id
styleEditor.render('root');

// 第一次传入css
setTimeout(function() {
  console.log('开始获取css.');
  styleEditor.postCSS(`
    .warning {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
      font-size: 20px;
    }
  `)

}, 2000);

// 第二次传入css
setTimeout(function() {
  console.log('再次开始获取css.');
  styleEditor.postCSS(`
    .warning {
      width: 10px;
    }
  `)

}, 10000);

// css修改后的回调
styleEditor.onCSSChanged(function(res) {
  console.log('修改后的css: ', res);
})

umd

<div id="root"></div>
<script src="./style-editor.umd.js" />
<script>
   var editor = styleEditor.styleEditor;
   // 渲染DOM 传入父元素id
   styleEditor.render('root');

   // 第一次传入css
   setTimeout(function() {
     console.log('开始获取css.');
     styleEditor.postCSS(`
       .warning {
         border: 1px solid #ccc;
         padding: 10px;
         color: #333;
         font-size: 20px;
       }
     `)

   }, 2000);

   // css修改后的回调
   styleEditor.onCSSChanged(function(res) {
     console.log('修改后的css: ', res);
   })
<script>

Fabulous

jian-cui/style-editor

可视化样式编辑器

用法