客户端配置说明

下载

百度网盘地址：点我下载

下载密码：x09x

使用

首先要引入wangEditor的js文件，然后引入jQuery

然后在body里：

 <body>

         <button id="btn1">查看HTML内容</button>

         <button id="btn2">查看文本内容</button>

         <button id="btn3">设置Edit文本</button>

         <div id="editor">

             <p>aaa</p>

         </div>

     </body>

之后写创建富文本编辑器的 js

 <script type="text/javascript">

     $(function() {

      var E = window.wangEditor;

      var editor = new E('#editor');

      editor.create()

 </script>

然后访问一下，就会出现下面效果，为了掩饰查看输入的效果我设置了几个按钮，用来显示不同的显示效果

（1）给第一个按钮添加点击事件，点击第一个按钮，就会弹出文本框中的文字，并以HTML的形式显示，实现代码和显示效果如下所示

 //点击按钮获取编辑框中的内容(html形式)

     $("#btn1").click(function() {

        var text = editor.txt.html();

        alert(text);

     })

（2）给第二个按钮添加点击事件，点击第二个按钮，就会弹出文本框中的文字，并以输入的文本的形式显示，实现代码和显示效果如下所示

 //点击按钮获取编辑框中的内容(纯文本形式)

     $("#btn2").click(function() {

         var text = editor.txt.text();

         alert(text);

     })

（3）给第三个按钮添加点击事件，点击第三个按钮，会给文本框赋值，实现代码和显示效果如下所示

 //点击按钮获设置Edit文本

     $("#btn3").click(function() {

         editor.txt.html("勤快的懒羊羊博客");

     })

拓展

这个编辑器的工具栏有很多工具，如果不想显示太多，可以在创建编辑器的同时修改编辑器的菜单栏，代码和显示效果如下

 $(function() {

     var E = window.wangEditor;

     var editor = new E('#editor');

     editor.customConfig.menus = [

         'head',

         'bold',

         'italic',

         'underline'

         ]

     editor.create()

wangEditor编辑器的简单使用就到此结束了，下面是这个页面的源代码。

 <!DOCTYPE html>

 <html>

     <head lang="en">

         <meta charset="UTF-8">

         <title></title>

         <script src="js/jquery-1.11.0.min.js"></script>

         <script src="js/wangEditor.js"></script>

         <script type="text/javascript">

             $(function() {

                 var E = window.wangEditor;

                 var editor = new E('#editor');

                 editor.customConfig.menus = [

                     'head',

                     'bold',

                     'italic',

                     'underline'

                 ]

                 editor.create()

                 //点击按钮获取编辑框中的内容(html形式)

                 $("#btn1").click(function() {

                     var text = editor.txt.html();

                     alert(text);

                 })

                 //点击按钮获取编辑框中的内容(纯文本形式)

                 $("#btn2").click(function() {

                     var text = editor.txt.text();

                     alert(text);

                 })

                 //点击按钮获设置Edit文本

                 $("#btn3").click(function() {

                     editor.txt.html("勤快的懒羊羊博客");

                 })

             })

         </script>

     </head>

     <body>

         <button id="btn1">查看HTML内容</button>

         <button id="btn2">查看文本内容</button>

         <button id="btn3">设置Edit文本</button>

         <div id="editor">

             <p>aaa</p>

         </div>

     </body>

 </html>

使用wangEditor富文本编辑器的更多相关文章

  1. 更加简洁易用——wangEditor富文本编辑器新版本发布

    1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...

  2. 「newbee-mall新蜂商城开源啦」 页面优化，最新版 wangEditor 富文本编辑器整合案例

    大家比较关心的新蜂商城 Vue3 版本目前已经开发了大部分内容,相信很快就能够开源出来让大家尝鲜了,先让大家看看当前的开发进度: 开源仓库地址为 https://github.com/newbee-l ...

  3. 基于jeesite的cms系统（五）：wangEditor富文本编辑器

    一.关于wangEditor: wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.ka ...

  4. wangEditor富文本编辑器使用及图片上传

    引入js文件 <script type="text/javascript" src="style/js/wangEditor.min.js">< ...

  5. Vue系列：wangEditor富文本编辑器简单例子

    考虑到该富文本编辑器可能会在后续项目中继续使用,因此单独将其做成一个组件,把wangeditor作为组件的形式使用. 以下是参考代码 子组件部分: 父组件引用子组件: 以上就是 wangEditor ...

  6. Vue.js中使用wangEditor富文本编辑器

    1.前端代码 前端HTML <script src="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.js"> ...

  7. wangEditor富文本编辑器

    设置好了是这样的, 有一个ID问content的编辑框,方便获取,这里的富文本编辑器的版本是2.2 官方文档说3就不支持textarea了 导入一下css 记得css文件夹下应该又3个文件,虽然没有直 ...

  8. 富文本编辑器--获取JSON

    获取 JSON 格式的内容 可以通过editor.txt.getJSON获取 JSON 格式的编辑器的内容,v3.0.14开始支持,示例如下 <div id="div1"&g ...

  9. 富文本编辑器--引入demo和简单使用

    wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.kancloud.cn/wangfu ...

随机推荐

  1. 【小白学AI】XGBoost 推导详解与牛顿法

    文章转自公众号[机器学习炼丹术],关注回复"炼丹"即可获得海量免费学习资料哦! 目录 1 作者前言 2 树模型概述 3 XGB vs GBDT 3.1 区别1:自带正则项 3.2 ...

  2. 密码学系列——消息摘要（c#代码实操）

    前言 简介: 消息摘要(Message Digest)又称为数字摘要(Digital Digest) 它是一个唯一对应一个消息或文本的固定长度的值,它由一个单向Hash加密函数对消息进行作用而产生 使 ...

  3. C/C++中char[]和string的连接/合并

    一: C风格字符串连接 #include <iostream> using namespace std; int main() { const char *str = "hell ...

  4. python设计模式之命令模式

    python设计模式之命令模式 现在多数应用都有撤销操作.虽然难以想象,但在很多年里,任何软件中确实都不存在撤销操作.撤销操作是在1974年引入的,但Fortran和Lisp分别早在1957年和195 ...

  5. 微信小程序内置组件web-view的缓存问题探讨

    前言:博客或者论坛上面,还有自习亲身经历,发现微信小程序的webview组件的页面缓存问题相当严重,对开发H5的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...

  6. Banner信息收集

    一.什么是Banner Banner信息,欢迎语,在banner信息中可以得到软件开发商,软件名称.版本.服务类型等信息,通过这些信息可以使用某些工具直接去使用相对应的exp去攻击. 前提条件:需要和 ...

  7. IDEA编写Scala代码时自动显示变量类型

    设置方法如下:settins -->Editor--> Code Style --> scala --Type Annotations  勾选框选部分 测试效果

  8. Jmeter 常用函数（2）- 详解 __RandomDate

    如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.html 作用 产生一个随机日期 语法格式 ${__R ...

  9. kolla build 配置

    kolla-build.conf 配置文件: [DEFAULT] debug = false base = centos base_tag = 7.7.1908 base_arch = x86_64 ...

  10. aarch64 packages 地址链接收集

    1.http://dl.fedoraproject.org/pub/epel/7/aarch64 2.https://rpmfind.net/linux/epel/7/aarch64/ 3.http: ...