HTML——implementar el uso del editor de texto enriquecido wangEditor
Directorio de artículos
Antecedentes: actualmente estoy trabajando en un proyecto novedoso y necesito usar un editor de texto enriquecido para publicar artículos. Como todavía no he aprendido Vue, la forma más práctica es usar el editor de texto enriquecido wangEditor.
Documento oficial : http://www.wangeditor.com/
Manual de usuario: Crear un editor · Manual de usuario de wangEditor3 · Kancloud (kancloud.cn)
Hay tres formas de implementarlo:
1. Importar wangEditor.JS
Uso: wangEditor.min.js, importado manualmente y colocado en el archivo estático del proyecto como referencia.
-
Dirección de descarga 1: https://github.com/wangfupeng1988/wangEditor/releases
-
Dirección de descarga 2: wangEditor.min.js
Como no pude encontrarlo en el sitio web oficial y no quería pagar para descargarlo, no utilicé este método. Este debería ser el método más simple, simplemente haga referencia a él con una ruta relativa.
2. Citar directamente enlaces de documentos
Ventajas: Fácil de consultar.
Desventajas: mayores requisitos en la red.
URL del enlace introducido : https://www.bootcdn.cn/wangEditor/
intentar:
<!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>
El efecto es el siguiente:
ilustrar:
El código aquí se refiere al blog (55 mensajes) html: página html de publicación de artículos simple y el uso del editor de texto enriquecido wangEditor para publicar la página html del artículo Blog de Zhibeihang: blog CSDN para probar .
3. Herramientas de gestión de paquetes (descarga de nodo y bower)
Proceder de la siguiente:
- Descarga, instalación y configuración del entorno de Node.js
- instalación de glorieta
- Comience a introducir la implementación
Descarga, instalación y configuración del entorno de Node.js
Blog de referencia, super detallado.
Instalación y uso de glorieta.
Blog de referencia, super detallado.
(55 mensajes) Instalación y uso de Bower_bower install_blog-CSDN de Ai Xiღ
Simplemente siga el tutorial de instalación opcionalmente.
Encontré algunos problemas al instalar Bower.
Pregunta 1: Después de que npm instaló Bower, indicó que 'bower' no es un comando interno o externo.
Solución :
1. Puede haber un problema con el entorno de configuración del nodo.
2. También puede ser que después de descargar cnpm, use cnpm en lugar de npm al ingresar comandos. Aquí hay un blog que presenta la diferencia entre cnpm y npm.
(55 mensajes) La diferencia entre npm y cnpm_npm cnpm_Quiero ser el blog-CSDN de Ashin
** Problema 2: el acceso a CDN no es exitoso **
Solución: La
operación es la siguiente:
Introducir la implementación
Aquí pegaré mis resultados primero.
<!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>
El efecto es el siguiente:
Lo que se modela aquí es el código del documento oficial de wangEditor.
Inicio rápido |
Aquí se presenta la implementación de wangEditor del editor de texto enriquecido wangEditor. Para conocer su uso y otras configuraciones, consulte la documentación oficial.