CssEditor Css在线编辑器

CssEditor，绿色免费的Html元素样式可视化编辑器，方便前端开发人员编写css代码，可在线直接使用，也可将编辑器嵌入到自己的项目页面中，方便团队开发人员使用。

在线使用

1： 在下面的输入框种输入css代码，在编辑器中实时预览样式效果。 / 2：直接在编辑器中点选样式效果，编辑器将同步输出css代码

调用方法

CssEditor地址：http://css.csseditor.cn，可通过iframe嵌入到自己的项目页面中，通过js的postMessage，将项目页面中的css代码发送给CssEditor，CssEditor将代码解析渲染效果展示。

· 调用案例代码（弹窗模式）

                    
                    
                    <iframe id="if_csseditor" src="http://css.csseditor.cn" width="100%" height="800px"></iframe>
              
            
                    
              window.onload = function () {
              const iframe = document.getElementById("if_csseditor");

              // 向iframe发送消息
              iframe.onload = function () {
              let obj = {
              style: "height:10000px;",
              };
              iframe.contentWindow.postMessage(obj, "*");
              };

              // 接收来自跨源iframe的消息
              window.addEventListener(
              "message",
              (event) => {
              handleMessage(event);
              },
              false
              );
              };
            
                    
              var oEditer = document.getElementById("if_csseditor");

              //向iframe发送消息
              oEditer.contentWindow.postMessage(
              {
              style: ""
              }, "*")

              // 接收iframe的消息
              window.addEventListener("message", this.handleMessage);

   · 案例效果展示

                    
              window.onload = function () {
              const iframe = document.getElementById("if_csseditor");

              // 向iframe发送消息
              iframe.onload = function () {
              let obj = {
              style: "height:10000px;",
              };
              iframe.contentWindow.postMessage(obj, "*");
              };

              // 接收来自跨源iframe的消息
              window.addEventListener(
              "message",
              (event) => {
              handleMessage(event);
              },
              false
              );
              };
使用css编辑器教程

· 在项目中通过按钮打开嵌入css编辑器弹窗

· 可以把当前的样式传到css编辑器进行编辑

· 编辑完毕后再把样式回传到项目中

使用css编辑器教程

· 通过标签引入

                    
                    
使用官方链接

                    
                <!-- 引入样式 -->
                    <link href="http://www.csseditor.cn/static/css/css_editor.css" rel="stylesheet" type="text/css" />

                <!-- 引入JS -->
                    <script src="http://www.csseditor.cn/static/js/css_editor.js"></script>
              

                    
或使用CDN

                    
                <!-- 引入样式 -->
                    <link href="https://cdn.jsdelivr.net/npm/qianlians-css-editor/lib/css/index.css" rel="stylesheet"
                          type="text/css" />

                <!-- 引入JS -->
                    <script src="https://cdn.jsdelivr.net/npm/qianlians-css-editor/lib/js/index.js"></script>
              

                    
调用方法

                    
                openCssEditor('demo',{width:'1000px',height:'1000px'})

                参数1: Sting 输入框的id(此参数必传,CssEditor编辑器取得该id的value值并在编辑好了回传到该id上)
                参数2: Object 打开弹窗的宽度和高度(可不传)


                setCssDialog("width:100px;" ,(event)=>{
                  console.log(event);
                },{width:'1000px',height:'1000px'})
        
                参数1: Sting 传给csseditor的样式;
                参数2: Function 回调函数,接收csseditor修改后回传的样式;
                参数3: Object 打开弹窗的宽度和高度(可不传)

   · HTML 示例

                    
                    
                    <html lang="en">

                    <head>
                    <meta charset="UTF-8" />
                  <!-- import CSS -->
                    <link href="https://cdn.jsdelivr.net/npm/qianlians-css-editor/lib/css/index.css" rel="stylesheet"
                          type="text/css" />
                </head>

                    <body>
                    <div>
                    <textarea name="comments" id="demo" rows="2" placeholder="请输入样式.."></textarea>
                    <button onclick="openCssEditor('demo')">打开编辑器</button>
                  </div>
                </body>
                <!-- import JavaScript -->
                    <script src="https://cdn.jsdelivr.net/npm/qianlians-css-editor/lib/js/index.js"></script>
                </html>

   · 案例效果展示

   示例1 
                            
                            
                            <textarea id="demo1" rows="2" placeholder="请输入样式.."></textarea>
                            <button onclick="openCssEditor('demo1')">打开编辑器</button>
显示代码
   示例2 - 渐变背景 
                            
                            
                            <textarea id="demo2" rows="2"
                                      placeholder="请输入样式..">height:80px;background: linear-gradient(to right, #ff9966, #ff5e62);</textarea>
                            <button onclick="openCssEditor('demo2')">打开编辑器</button>
显示代码
   示例3 - 按钮 
                            
                            
                            <textarea id="demo3" rows="2"
                                      placeholder="请输入样式..">font-size:15px;width:140px;height:50px;border-width:1px;color:#fff;border-color:#18ab29;border-radius: 28px;text-shadow: 1px 1px 0px #2f6627;background:#44c767;margin: 20px;line-height: 50px;margin: 20px;text-align: center;</textarea>
                            <button onclick="openCssEditor('demo3',{width:'1000px',height:'1000px'})">打开编辑器</button>
显示代码

关于CssEditor

CssEditor，一个非常简单的CSS在线编辑器，原属于千联网络技术有限公司低代码项目中的一个功能模块；
在项目进程中，多个程序猿发现这个小功能模块在任何前端项目开发中都可用到，并且非常通用，于是我们就把它独立出来，并且进行了优化，使其更加灵活易用；
欢迎各位前端码农使用并提出意见。

复制成功

© 2023 CssEditor,Design By 惠州市千联网络科技有限公司 粤ICP备2022154100号-7