HTML——implement the use of rich text editor wangEditor
Article directory
Background: I am currently working on a novel project, and I need to use a rich text editor to publish articles. Since I haven’t learned Vue yet, the most practical way is to use the wangEditor rich text editor.
Official documentation : http://www.wangeditor.com/
User Manual: Create an Editor · wangEditor3 User Manual · Kancloud (kancloud.cn)
There are three ways to implement it:
1. Import wangEditor.JS
Instructions for use: wangEditor.min.js, imported manually and placed in the static file of the project for reference.
-
Download address 1: https://github.com/wangfupeng1988/wangEditor/releases
-
Download address 2: wangEditor.min.js
Since I couldn't find it on the official website and didn't want to pay to download it, I didn't use this method. This should be the simplest method, just reference it with a relative path.
2. Directly quote document links
Advantages: Easy to reference.
Disadvantages: High network requirements.
URL of the introduced link : https://www.bootcdn.cn/wangEditor/
try:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../imgs/logo.png" type="image/x-icon">
<title>小说创作页面</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/wangEditor/10.0.13/fonts/w-e-icon.woff">
<link href="https://cdn.bootcdn.net/ajax/libs/wangEditor/10.0.13/wangEditor.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/wangEditor/10.0.13/wangEditor.css" rel="stylesheet">
<style>
.mainHeader {
padding-top: 1px;
padding-bottom: 1px;
background-color: white !important;
border-bottom: 5px solid #0b6cb8;
}
.logo_icon {
height: 38px;
}
.liColor {
color: #4f4f4f
}
.toolbar {
border: 1px solid #ccc;
}
.text {
border: 1px solid #ccc;
height: 500px;
}
</style>
</head>
<body style="background-color: whitesmoke">
<div class="container-fluid">
<!-- 顶部导航栏-->
<div class="row">
<div class="col-md-12" style="padding: 0">
<nav class="navbar navbar-expand-lg navbar-light bg-light mainHeader">
<!-- <a class="navbar-brand" href="#">Navbar w/ text</a>-->
<!-- <div class="logoDiv" id="logoIcon" style="cursor:pointer">
<img class="logo_icon" src="logo_icon_white.png" />
</div>
<div class="logoDiv" id="logoText">
<img class="logo_icon" src="logo_text_white.png" />
</div> -->
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<!-- <li class="nav-item" style="padding-left: 20px">-->
<!-- <a class="nav-link nav-item" href="#">首页 </a>-->
<!-- </li>-->
</ul>
<span class="navbar-nav">
<a class="nav-link navbar-item active" href="#">个人中心</a>
</span>
</div>
</nav>
</div>
</div>
<div class="row" style="min-height: 10px"></div>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-2" style="padding-right: 0px">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9">
<div class="card">
<ul class="nav nav-pills nav-fill flex-column">
<li class="nav-item">
<a class="nav-link active list-group-item" href="#">发布文章</a>
</li>
<li class="nav-item">
<a class="nav-link liColor list-group-item" href="#">文章管理</a>
</li>
<li class="nav-item">
<a class="nav-link liColor list-group-item" href="#">分类管理</a>
</li>
<li class="nav-item">
<a class="nav-link liColor list-group-item" href="#">退出</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6" style="padding-left: 0px">
<div class="card">
<div class="card-header" style="background-color: white">
<div class="row">
<div class="col-md-3" style="font-size: 18px">发布文章</div>
<!-- <div class="col-md-9" style="margin-top: 8px;font-size: 12px;text-align: right">当前位置>专委会介绍>文件资料</div>-->
</div>
</div>
<div class="card-body" style="min-height: 1000px">
<div class="row">
<div class="col-md-12">
<div class="input-group mb-1 mt-2 ml-0 mr-1">
<div class="input-group-prepend">
<span class="input-group-text">文章标题</span>
</div>
<input id="titleInput" type="text" class="form-control" placeholder="不多于100字"
style="margin-right: 5px">
</div>
</div>
</div>
<div style="padding: 8px 0; color: #ccc"></div>
<div id="div1" class="toolbar">
</div>
<div id="div2" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
<!-- <p>请输入内容</p>-->
</div>
<div class="row">
<div class="col-md-5">
<div class="input-group mb-3 mt-3 ml-0">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">文章分类</span>
</div>
<input id="categoryInput" type="text" class="form-control">
</div>
</div>
</div>
<div class="row" style="padding: 15px">
<div class="col-md-1"></div>
<div class="col-md-2 ml-0">
<button type="button" class="btn btn-primary" id="publishBtn">发布文章</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-light">返回</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
//富文本编辑器初始化代码
var E = window.wangEditor;
var editor = new E('#div1', '#div2');
editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片
editor.create();
//创建replaceAll()函数,用于替换字符串中出现的所有某个字符
String.prototype.replaceAll = function (FindText, RepText) {
return this.replace(new RegExp(FindText, "g"), RepText);
};
//发布文章按钮的点击事件,即封装数据,向后台传递
$("#publishBtn").click(function () {
console.info("click");
var postData = {
};
postData.title = $("#titleInput").val();
postData.category = $("#categoryInput").val();
//替换双引号为两个单引号,方便编写SQL语句插入数据库中
var content = editor.txt.html().replaceAll("\"", "\'\'");
postData.content = content;
console.info(content);
postData.author_acc = "123";
postData.author_name = "admin";
postData.create_time = new Date().toLocaleDateString();
postData.last_edit_time = new Date().toLocaleDateString();
console.info(postData);
//向后台传递数据,需要根据具体后台来改
$.post("http://localhost:8099/publishArticle", postData, function (data) {
alert(data);
})
})
})
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/wangEditor/10.0.13/wangEditor.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/wangEditor/10.0.13/wangEditor.min.js.map"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/wangEditor/10.0.13/wangEditor.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
The effect is as follows:
illustrate:
The code here refers to the blog (55 messages) html - simple article publishing html page and the use of rich text editor wangEditor to publish article html page Zhibeihang's blog - CSDN blog to try.
3. Package management tools (download of node and bower)
Proceed as follows:
- Node.js download, installation and environment configuration
- bower installation
- Start introducing implementation
Node.js download, installation and environment configuration
Reference blog, super detailed
Installation and use of bower
Reference blog, super detailed
(55 messages) Bower installation and use_bower install_Ai Xiღ's blog-CSDN blog
Just follow the installation tutorial optionally.
I encountered some problems when installing bower.
Question 1: After npm installed bower, it prompted that 'bower' is not an internal or external command.
Solution :
1. There may be a problem with the node configuration environment.
2. It may also be that after downloading cnpm, use cnpm instead of npm when entering commands. Here is a blog introducing the difference between cnpm and npm
(55 messages) The difference between npm and cnpm_npm cnpm_I want to be Ashin’s blog-CSDN blog
** Problem 2: CDN access is unsuccessful**
Solution: The
operation is as follows:
Introduce implementation
Here I will paste my results first
<!DOCTYPE html>
<html lang="en">
<head>
<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>Document</title>
<link href="../css/style.css" rel="stylesheet">
<style>
#editor—wrapper {
border: 1px solid #808080;
z-index: 100;
/* 按需定义 */
}
#toolbar-container {
border-bottom: 1px solid #808080;
}
#editor-container {
height: 600px;
}
</style>
</head>
<body>
<div id="editor—wrapper">
<div id="toolbar-container"><!-- 工具栏 --></div>
<div id="editor-container"><!-- 编辑器 --></div>
</div>
</body>
<script src="../js/index.js"></script>
<script>
const {
createEditor, createToolbar } = window.wangEditor
const editorConfig = {
placeholder: 'Type here...',
onChange(editor) {
const html = editor.getHtml()
console.log('editor content', html)
// 也可以同步到 <textarea>
}
}
const editor = createEditor({
selector: '#editor-container',
html: '<p><br></p>',
config: editorConfig,
mode: 'default', // or 'simple'
})
const toolbarConfig = {
}
const toolbar = createToolbar({
editor,
selector: '#toolbar-container',
config: toolbarConfig,
mode: 'default', // or 'simple'
})
</script>
<html>
The effect is as follows:
What is modeled here is the code from the official wangEditor document.
Quick Start | wangEditor
's implementation of the rich text editor wangEditor is introduced here. For usage and other configurations, please refer to the official documentation.