客户端配置说明

下载

百度网盘地址：点我下载

下载密码：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. CTF bossplayers 靶机

    WAYs: robots.txt文件提供线索,命令执行漏洞获得反弹shell suid命令提升权限 1:netdiscover 发现主机地址192.168.1.109 2:使用namp进行端口扫描发现 ...

  2. excel如何复制筛选内容

    https://jingyan.baidu.com/article/ca00d56c75b7e5e99eebcf3c.html

  3. Mac 从睡眠恢复后没有声音的问题

    重启能解决,不想重启,因为不想重置当前工作状态 换个办法是: 杀掉coreaudiod进程,然后系统会把他自动拉起,然后就ok了.

  4. C++类和对象的封装 点和圆的案例

    主要练习 :在类中可以让另一个类作为本类的成员. 案例:判断点和圆的位置关系. 一.第一种直接方法 using namespace std; #include <iostream> cla ...

  5. Docker 的前世今生

    虚拟化 「要解释清楚 Docker,首先要解释清楚容器(Container)的概念」.要解释容器的话,就需要从操作系统说起.操作系统太底层,细说的话一两本书都说不清楚.这里就一句话来总结一下:操作系统 ...

  6. 第2章 RDD编程（2.3）

    第2章 RDD编程(2.3) 2.3 TransFormation 基本RDD Pair类型RDD (伪集合操作  交.并.补.笛卡尔积都支持) 2.3.1 map(func) 返回一个新的RDD,该 ...

  7. Linux环境下如何生成core文件

    Linux环境下进程发生异常而挂掉,通常很难查找原因,但是一般Linux内核给我们提供的核心文件,记录了进程在崩溃时候的信息.但是生成core文件需要设置开关,具体步骤如下: 1.查看生成core文件 ...

  8. ACM集训第一次积分赛赛前复习+day4

    不知不觉4天过去了,我们迎来了我们第一次积分赛,赛前的四天我们学了以下知识点吧: day 1.排序 之前一直想用qsort,但是总是写不明白,STL的sort()可以说是很方便了. 先写一个最基础的数 ...

  9. Angular 学习思路

    近些年前端框架非常多,主流的有 Vue.React.Angular 等.我参与的项目中使用较多的是 Vue.因为 Vue 学习难度不大,上手很快,代码简洁,而且使用 Vue 全家桶(Vue + Vue ...

  10. Java面试题（Hibernate篇）

    Hibernate 113.为什么要使用 hibernate? 对JDBC访问数据库的代码做了封装,大大简化了数据访问层繁琐的重复性代码. Hibernate是一个基于JDBC的主流持久化框架,是一个 ...