GrapesJS中文汉化显示代码

代码语言:html

所属分类:其他

代码描述:GrapesJS中文汉化显示代码

代码标签: GrapesJS 中文 汉化 显示 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapesjs-preset-webpage.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.min.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapes.min.js"></script>

    <!--引入grapesjs-preset-webpage-->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.min.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-preset-webpage.min.js"></script>

    <style>
        body,
        html {
            height: 100%;
            margin: 0;
        }
    </style>



</head>

<body>

    <div id="gjs">
        <table>
            <h1>点对点</h1>
            <tr>
                <td>111</td>
                <td>111</td>
            </tr>
            <tr>
                <td>111</td>
                <td>111</td>
            </tr>
        </table>

    </div>
    </div>


    <script>
        const editor = grapesjs.init({
      container: '#gjs',
      fromElement: true,
      height: '100%',
      width: 'auto',
      plugins: ['gjs-preset-webpage'],
    
      storageManager: false,
     styleManager: {
             sectors: [
      {
        name: 'First sector',
        properties: [
          {
            // Default options
            // id: 'padding', // The id of the property, if missing, will be the same as `property` value
            type: 'number',
            label: 'Padding', // Label for the property
            property: 'padding', // CSS property to change
            default: '0', // Default value to display
            // Additonal `number` options
            units: ['px', '%'], // Units (available only for the 'number' type)
            min: 0, // Min value (available only for the 'number' type)
          }
        ],
      },
    ]
     }
    });
    editor.I18n.addMessages({
        en: { // indicate the locale to update
            assetManager: {
        addButton: '添加图片',
        inputPlh: 'http://path/to/the/image.jpg',
        modalTitle: '选择图片',
        uploadTitle: '点击或者拖拽图片上传',
      },
      domComponents: {
        names: {
          '': 'Box',
          wrapper: 'Body',
          text: '文字',
          comment: '评论',
          i.........完整代码请登录后点击上方下载按钮下载查看

网友评论0