【前端】wangEditor(富文本编辑器) 简易使用示例
转载请说明作者或者注明出处,谢谢
说到前端常用的编辑器,自然也少不了富文本编辑器(RichText Editor)
笔者在此之前也看了一些相关的在线编辑器,其中包括了当百度搜索“富文本编辑器”字样时出现在最上面的百度UEditor,里面的功能相当丰富,但是配置也相对复杂,对于使用者要求较高。况且在轻量级网页应用的开发中也并不需要如此多的功能,所以真正需要的是一个使用简单的轻量级富文本编辑器,出于方便考虑,也应该尽可能保证“所见即所得”原则。
wangEditor正是其中之一(官网链接:wangEditor)
另外值得一提的是,该editor的官网所提供的demo以及入门文档写的十分友好,稍有前端经验的代码手即可快速配置上手。好了废话不多说,上我自己的源代码:
<html>
<head>
<!--在这里字符集的设定很重要,如果设定不当将会出现乱码-->
<meta charset="UTF-8">
<title>wangEditor demo</title>
</head>
<body>
<!--wangEditor是一款基于jquery框架开发的插件-->
<script src="http://cdn.bootcss.com/wangeditor/2.1.20/js/lib/jquery-2.2.1.js"></script> <!--编辑器位置-->
<div style="max-width:700px;margin:50px">
<div id="txtdiv" style="border:1px solid gray;min-height:240px"> </div>
</div> <!--效果展示框-->
<div id="show_box" style="border: 1px solid gray;margin-left:50px"></div> <!--脚本控制-->
<script>
$(function(){
//初始化编辑器
editor = new wangEditor("txtdiv");
editor.create(); //内容修改事件,此处做的是实时展示实际效果
editor.onchange = function(){
//获取editor的html值
var html = editor.$txt.html();
$("#show_box").html(html)
}
})
</script> <!--按照官网上的说明,js和css的这两个引用应该放在body的末尾-->
<script src="http://cdn.bootcss.com/wangeditor/2.1.20/js/wangEditor.js"></script>
<link href="http://cdn.bootcss.com/wangeditor/2.1.20/css/wangEditor.css" rel="stylesheet">
</body>
</html>
效果图:
【前端】wangEditor(富文本编辑器) 简易使用示例的更多相关文章
- 更加简洁易用——wangEditor富文本编辑器新版本发布
1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...
- 「newbee-mall新蜂商城开源啦」 页面优化,最新版 wangEditor 富文本编辑器整合案例
大家比较关心的新蜂商城 Vue3 版本目前已经开发了大部分内容,相信很快就能够开源出来让大家尝鲜了,先让大家看看当前的开发进度: 开源仓库地址为 https://github.com/newbee-l ...
- 基于jeesite的cms系统(五):wangEditor富文本编辑器
一.关于wangEditor: wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.ka ...
- Vue.js中使用wangEditor富文本编辑器
1.前端代码 前端HTML <script src="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.js"> ...
- wangEditor富文本编辑器使用及图片上传
引入js文件 <script type="text/javascript" src="style/js/wangEditor.min.js">< ...
- Vue系列:wangEditor富文本编辑器简单例子
考虑到该富文本编辑器可能会在后续项目中继续使用,因此单独将其做成一个组件,把wangeditor作为组件的形式使用. 以下是参考代码 子组件部分: 父组件引用子组件: 以上就是 wangEditor ...
- 使用wangEditor富文本编辑器
客户端配置说明 下载 百度网盘地址:点我下载 下载密码:x09x 使用 首先要引入wangEditor的js文件,然后引入jQuery 然后在body里: <body> <butto ...
- wangEditor富文本编辑器
设置好了是这样的, 有一个ID问content的编辑框,方便获取,这里的富文本编辑器的版本是2.2 官方文档说3就不支持textarea了 导入一下css 记得css文件夹下应该又3个文件,虽然没有直 ...
- 前端vue-TinyMCE富文本编辑器表情插件报错解决
最近项目中需要使用文本编辑器,比较了下最终选择了TinyMCE这款富文本编辑器.我安装的是TinyMCE v5但是在使用表情插件的时候,表情一直都出不来,报错信息如下: Uncaught Syntax ...
- 富文本编辑器Tinymce的示例和配置
Demo链接: https://download.csdn.net/download/silverbutter/10557703 有时候需要验证tinyMCE编辑器中的内容是否符合规范(不为空),就需 ...
随机推荐
- Linux显示工作路径
Linux显示工作路径 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ pwd /home/youhaidong
- Java并发 线程池
线程池技术就是事先创建一批线程,这批线程被放入到一个池子里,在没有请求到达服务端时候,这些线程都是处于待命状态,当请求到达时候,程序会从线程池里取出一个线程,这个线程处理到达的请求,请求处理完毕,该线 ...
- spring ioc(反转控制)
在Java中,我们建立一个对象的方式是new,有时需要单例,有时需要工厂,而spring中的bean的定义可以直接使用,如scope属性single产生单例对象,prototype产生新对象,bean ...
- hdu5925 Coconuts
比完看acdream说这题是签到题 怎么都不会写 我现在补完也觉得 这不是傻逼题么 我我这个这么快5题的人真的不应该啊 #include<bits/stdc++.h> using name ...
- iOS - Quartz 2D 第三方框架 Charts 绘制图表
1.Charts 简介 使用第三方框架 Charts 绘制 iOS 图表.GitHub 源码 Charts Charts 是一款用于绘制图表的框架,可以绘制柱状图.折线图.K线图.饼状图等.Chart ...
- 从“跳一跳”来看微信小程序的未来
从“跳一跳”来看微信小程序的未来 相信大家这两天都被微信新推出的小程序跳一跳刷爆了朋友圈,为了方便用户在使用过程中切换小程序,微信在这次6.6.1版本中加入了下拉可快速切换小程序的功能,而“跳一跳 ...
- MongoDB远程维护客户端工具的使用!
MongoDB在互联网项目中使用越来越多,布署在云端Linux服务器上的mongoDB数据库,大多存在远程维护不便的问题,开放27017端口又将导致安全隐患.有个折中的办法就是使用基于web的客户端管 ...
- 【WC2001】【cogs358】高性能计算机(动态规划)
[WC2001][cogs358]高性能计算机(动态规划) ##题面 [问题描述] 现在有一项时间紧迫的工程计算任务要交给你--国家高性能并行计算机的主管工程师--来完成.为了尽可能充分发挥并行计算机 ...
- 使用mysql将备份的sql文件导入到数据库
一.背景 承接上一篇文章<如何使用mysqldump备份数据库>,数据库备份后将用于恢复或者在多个测试环境上迁移.下面描述如何通过批处理文件实现数据加载恢复. 二.环境准备 跟上一篇一样, ...
- Java仪器数据文件解析-PDF文件
一.概述 使用pdfbox可生成Pdf文件,同样可以解析PDF文本内容. pdfbox链接:https://pdfbox.apache.org/ 二.PDF文本内容解析 File file = new ...