H5 introduces wangEditor

wangEditor official website

The operation of Baidu editor is relatively complicated, and the functions of other editors are not complete enough. After repeated use, I found that wangEditor is easy to use and has more suitable functions.

interface demo

Plugin Resource Pack Contents

Download

code demo

<!DOCTYPE html>
<html lang="en">
<head>
  <base href="/static/admin/">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>upload image demo</title>
  <link href="./wangeditor/css/style.css" rel="stylesheet">
  <style>
      .editor-container{
          border: 1px solid #eee;
      }
      .editor-toolbar{
          border-bottom: 1px solid #eee;
      }
      .editor-text-area{
          height: 400px;
      }
  </style>
</head>

<body>
  <p>
    Upload image
  </p>
    <div class="getbutton">
        <button class="getHtml">获取内容</button>
    </div>
  <div class="editor-container">
    <div id="editor-toolbar" class="editor-toolbar"></div>
    <div id="editor-text-area" class="editor-text-area"></div>
  </div>


    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
  <script src="./wangeditor/index.js"></script>
  <script>
    const E = window.wangEditor
    
    // Change language
    const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
    E.i18nChangeLanguage(LANG)

    const editorConfig = { MENU_CONF: {} }
    // 图片上传配置
    editorConfig.MENU_CONF['uploadImage'] = {
      server: '{:url("Index/wangEditor")}',

      timeout: 5 * 1000, // 5s

      fieldName: 'custom-fileName',
      // meta: { token: 'xxx', a: 100 },
      metaWithUrl: true, // join params to url
      headers: { Accept: 'text/x-json' },

      maxFileSize: 10 * 1024 * 1024, // 10M

      base64LimitSize: 5 * 1024, // insert base64 format, if file's size less than 5kb

      onBeforeUpload(file) {
        console.log('onBeforeUpload', file)

        return file // will upload this file
        // return false // prevent upload
      },
      onProgress(progress) {
        console.log('onProgress', progress)
      },
      onSuccess(file, res) {
        console.log('onSuccess', file, res)
      },
      onFailed(file, res) {
        alert(res.message)
        console.log('onFailed', file, res)
      },
      onError(file, err, res) {
        alert(err.message)
        console.error('onError', file, err, res)
      },

     
    }

    const editor = E.createEditor({
      selector: '#editor-text-area',
      html: '<p>Upload image...</p><p><br></p>', //设置默认值
      config: editorConfig
    })
    
    const toolbarConfig = {}
    // 取消不需要的菜单
    toolbarConfig.excludeKeys = [
    	"insertImage",
    	"group-video"
    ]
    const toolbar = E.createToolbar({
      editor,
      selector: '#editor-toolbar',
      config: toolbarConfig
    })
    
    $('.getHtml').click(function(){
        console.log(editor.getHtml())
    })
  </script>
</body>

</html>

Backend upload interface-TP5

/**
     * [wangEditor]
     * @return [type] [msg]
     */
    public function wangEditor()
    {
        $returnData['code'] = 1;
            $returnData['msg'] = "错误操作！";
        $file = request()->file('custom-fileName');
        if($file){
            $info = $file->validate(['ext'=>'jpg,png,gif,pdf,zip'])->move('./uploads/syssite');
            if($info){
                $returnData['errno'] = 0;
                $returnData['data']['url'] = "/uploads/syssite/".str_replace("\\", "/", $info->getSaveName());
                $returnData['data']['title'] = "图片";
            }else{
                $returnData['errno'] = 1;
                $returnData['message'] = $file->getError();
            }
        }
        return json($returnData);
    }

Related questions

The html code obtained from the editor is pure html without any style. If it is displayed, you need to customize the style of the tags such as <table><code><blockquote>

Without adding a custom style, the page display will not display the references, tables and other effect styles in the editor

/* table 样式 */
table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
table td,
table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
pre code {
  display: block;
}

/* ul ol 样式 */
ul, ol {
  margin: 10px 0 10px 20px;
}

Rich text editor ~wangEditor