grapesjs自定义主题和添加自定义按钮修改源代码效果代码
代码语言:html
所属分类:其他
代码描述:grapesjs自定义主题和添加自定义按钮修改源代码效果代码,css实现自定义颜色,增加一个按钮直接修改设计器中的源码。
代码标签: grapesjs 自定义 主题 添加 按钮 修改 源代码 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.14.10/css/grapes.min.css'> <style> .gjs-one-bg { background: #CDEDFE; } .gjs-four-color { color: silver; } .gjs-two-color { color: #07354A; } .gjs-three-color { color: red; } .gjs-four-color-h:hover { color: silver; } .gjs-block { } </style> </head> <body translate="no"> <div id="gjs"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.14.10/grapes.min.js'></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-preset-webpage.min.js"></script> <script > var editor = grapesjs.init({ container: '#gjs', plugins: ['gjs-preset-webpage'], pluginsOpts: { 'gjs-preset-webpage': { // options } } }); var pfx = editor.getConfig().stylePrefix; var modal = editor.Modal; var cmdm = editor.Commands; var codeViewer = editor.CodeManager.getViewer('CodeMirror').clone(); var pnm = editor.Panels; var container = document.createElement('div'); var btnEdit = document.createElement('button'); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0