客户端配置说明

下载

百度网盘地址：点我下载

下载密码：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. 阿里出品的最新版 Java 开发手册，嵩山版，扫地僧

    说起嵩山,我就想起乔峰,想起慕容复,以及他们两位老爹在少林寺大战的场景.当然了,最令我印象深刻的就是那位默默无闻,却一鸣惊人的扫地僧啊.这次,阿里出品的嵩山版 Java 开发手册的封面就有一个扫地僧, ...

  2. C#设计模式之23-访问者模式

    访问者模式(Vistor Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/431 访问. 访问者模式属于 ...

  3. 关于Hexo,Next主题的‘下一页’、‘上一页’按钮错误显示为html代码 的解决方法

    关于Next主题的'下一页'.'上一页'按钮错误显示为html代码的解决方法 我在建立自己的博客过程中遇到了页面'下一页'和'上一页'按钮显示为html代码<i class="fa f ...

  4. 为什么你的 64-bit 程序可能占用巨大的虚拟空间

    出于很多目的,我从最新的 Go 系统内核开发源码复制了一份代码,在一个正常的运行环境中构建(和重新构建)它,在构建版本基础上周期性地重新构建 Go 程序.近期我在用 ps 查看我的一个程序的内存使用情 ...

  5. 对于python装饰器结合递归的进一步理解

    对于python装饰器结合递归的进一步理解 代码如下: import functools def memoize(fn): print('start memoize') known = dict() ...

  6. 谈谈对volatile关键字的理解

    1. volatile的特性 volatile是Java语言提供的一种轻量级的同步机制,用来确保将变量得更新操作通知到其它线程.具备三种特性: 保证变量的可见性: 对于volatile修饰的变量进行单 ...

  7. 当Notification和Websocket遇到https、http

    @ 目录 一.http转为https请求 (1)生成证书1(crt证书转tomcat使用的jks) (2)配置证书1 (3)生成证书2 (4)配置证书2 二.Websocket改为https连接 后言 ...

  8. CODING DevOps 微服务项目实战系列第二课来啦！

    近年来,工程项目的结构越来越复杂,需要接入合适的持续集成流水线形式,才能满足更多变的需求,那么如何优雅地使用 CI 能力提升生产效率呢?CODING DevOps 微服务项目实战系列第二课 <D ...

  9. Jmeter 常用函数（25）- 详解 __V

    如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.html 作用 执行变量名表达式,并返回执行结果 它可 ...

  10. Ubutun重启网卡

    一.network利用root帐户# service networking restart 或者/etc/init.d/networking restart 二.ifdown/ifup# ifdown ...