做搜狗手机网站点击软,常德网站设计公司,深圳专业做网站专业公司,全媒体广告代理HTML——实现富文本编辑器wangEditor的使用 文章目录 HTML——实现富文本编辑器wangEditor的使用一.导入wangEditor.JS二.直接引用文档链接三.包管理工具#xff08;node和bower 的下载#xff09;Node.js下载安装及环境配置bower的安装和使用引入实现 背景#xff1a;最近在…HTML——实现富文本编辑器wangEditor的使用 文章目录 HTML——实现富文本编辑器wangEditor的使用一.导入wangEditor.JS二.直接引用文档链接三.包管理工具node和bower 的下载Node.js下载安装及环境配置bower的安装和使用引入实现 背景最近在写小说项目关于发布文章需要用到富文本编辑器由于还没学到Vue最实用的还是用wangEditor富文本编辑器。 官方文档http://www.wangeditor.com/
使用手册创建一个编辑器 · wangEditor3使用手册 · 看云 (kancloud.cn)
至于实现的方式有三种
一.导入wangEditor.JS
使用方法 wangEditor.min.js,通过手工导入的方式放在项目的静态文件下来引用。 下载地址1 https://github.com/wangfupeng1988/wangEditor/releases 下载地址2wangEditor.min.js 由于在官网上没找到也不想付费下载就没有用这个方法。这个应该是最简单的方法只需要用相对路径引用一下即可。
二.直接引用文档链接
优点引用简单。
缺点对网络要求较高。
引入链接的网址https://www.bootcdn.cn/wangEditor/
尝试
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0link relicon href../imgs/logo.png typeimage/x-icontitle小说创作页面/titlelink relstylesheet hrefhttps://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.csslink relstylesheet hrefhttps://cdn.bootcdn.net/ajax/libs/wangEditor/10.0.13/fonts/w-e-icon.wofflink hrefhttps://cdn.bootcdn.net/ajax/libs/wangEditor/10.0.13/wangEditor.min.css relstylesheetlink hrefhttps://cdn.bootcdn.net/ajax/libs/wangEditor/10.0.13/wangEditor.css relstylesheetstyle.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 stylebackground-color: whitesmokediv classcontainer-fluid!-- 顶部导航栏--div classrowdiv classcol-md-12 stylepadding: 0nav classnavbar navbar-expand-lg navbar-light bg-light mainHeader!-- a classnavbar-brand href#Navbar w/ text/a--!-- div classlogoDiv idlogoIcon stylecursor:pointerimg classlogo_icon srclogo_icon_white.png //divdiv classlogoDiv idlogoTextimg classlogo_icon srclogo_text_white.png //div --div classcollapse navbar-collapse idnavbarTextul classnavbar-nav mr-auto!-- li classnav-item stylepadding-left: 20px--!-- a classnav-link nav-item href#首页 /a--!-- /li--/ulspan classnavbar-nava classnav-link navbar-item active href#个人中心/a/span/div/nav/div/divdiv classrow stylemin-height: 10px/divdiv classrowdiv classcol-md-1/divdiv classcol-md-2 stylepadding-right: 0pxdiv classrowdiv classcol-md-3/divdiv classcol-md-9div classcardul classnav nav-pills nav-fill flex-columnli classnav-itema classnav-link active list-group-item href#发布文章/a/lili classnav-itema classnav-link liColor list-group-item href#文章管理/a/lili classnav-itema classnav-link liColor list-group-item href#分类管理/a/lili classnav-itema classnav-link liColor list-group-item href#退出/a/li/ul/div/div/div/divdiv classcol-md-6 stylepadding-left: 0pxdiv classcarddiv classcard-header stylebackground-color: whitediv classrowdiv classcol-md-3 stylefont-size: 18px发布文章/div!-- div classcol-md-9 stylemargin-top: 8px;font-size: 12px;text-align: right当前位置专委会介绍文件资料/div--/div/divdiv classcard-body stylemin-height: 1000pxdiv classrowdiv classcol-md-12div classinput-group mb-1 mt-2 ml-0 mr-1div classinput-group-prependspan classinput-group-text文章标题/span/divinput idtitleInput typetext classform-control placeholder不多于100字stylemargin-right: 5px/div/div/divdiv stylepadding: 8px 0; color: #ccc/divdiv iddiv1 classtoolbar/divdiv iddiv2 classtext !--可使用 min-height 实现编辑区域自动增加高度--!-- p请输入内容/p--/divdiv classrowdiv classcol-md-5div classinput-group mb-3 mt-3 ml-0div classinput-group-prependspan classinput-group-text idinputGroup-sizing-default文章分类/span/divinput idcategoryInput typetext classform-control/div/div/divdiv classrow stylepadding: 15pxdiv classcol-md-1/divdiv classcol-md-2 ml-0button typebutton classbtn btn-primary idpublishBtn发布文章/button/divdiv classcol-md-4button typebutton classbtn btn-light返回/button/div/div/div/div/divdiv classcol-md-2/div/div/divscript srchttps://cdn.staticfile.org/jquery/3.2.1/jquery.min.js/scriptscript$(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);})})})/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/wangEditor/10.0.13/wangEditor.min.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/wangEditor/10.0.13/wangEditor.min.js.map/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/wangEditor/10.0.13/wangEditor.js/scriptscript srchttps://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js/scriptscript srchttps://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js/script
/body
/html效果如下 说明
这里的代码参照博客(55条消息) html——简单文章发布html页面及富文本编辑器wangEditor的使用发布文章html页面知北行的博客-CSDN博客进行尝试。
三.包管理工具node和bower 的下载
步骤如下
Node.js下载安装及环境配置bower的安装开始引入实现
Node.js下载安装及环境配置
参考博客超级详细
(55条消息) Node.js下载安装及环境配置教程【超详细】_nodejs安装及环境配置_WHF__的博客-CSDN博客
bower的安装和使用
参考博客超级详细
(55条消息) bower的安装和使用_bower install_艾希ღ的博客-CSDN博客
选择性的看安装教程即可
在我安装bower的时候遇到了一些问题。
问题一npm 安装完bower 后提示’bower’ 不是内部或外部命令
解决办法
1.可能是node配置环境出了问题
(55条消息) npm 安装完bower 后提示’bower’ 不是内部或外部命令_前端开发小蜜蜂诗语的博客-CSDN博客
2.也可能是下载的cnpm输入命令之类的用cnpm而不是npm。这里引入一篇博客讲述cnpm和npm的区别
(55条消息) npm 和 cnpm 的区别_npm cnpm_我想做阿信的博客-CSDN博客 ** 问题二CDN 访问不成功** 解决办法 操作如下
引入实现
这里先粘贴一下我的成果
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink href../css/style.css relstylesheetstyle#editor—wrapper {border: 1px solid #808080;z-index: 100;/* 按需定义 */}#toolbar-container {border-bottom: 1px solid #808080;}#editor-container {height: 600px;}/style
/headbodydiv ideditor—wrapperdiv idtoolbar-container!-- 工具栏 --/divdiv ideditor-container!-- 编辑器 --/div/div
/body
script src../js/index.js/script
scriptconst { createEditor, createToolbar } window.wangEditorconst editorConfig {placeholder: Type here...,onChange(editor) {const html editor.getHtml()console.log(editor content, html)// 也可以同步到 textarea}}const editor createEditor({selector: #editor-container,html: pbr/p,config: editorConfig,mode: default, // or simple})const toolbarConfig {}const toolbar createToolbar({editor,selector: #toolbar-container,config: toolbarConfig,mode: default, // or simple})
/scripthtml效果如下
这里仿照的就是wangEditor官方文档的代码
快速开始 | wangEditor 对富文本编辑器wangEditor的实现就介绍到这里了对于使用和一些其他的配置可以参照官方文档。
