客户端配置说明

下载

百度网盘地址：点我下载

下载密码：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. 2020重新出发，JAVA入门，关键字&保留字

    关键字 & 保留字 关键字(或者保留字)是对编译器有特殊意义的固定单词,不能在程序中做其他目的使用. 关键字具有专门的意义和用途,和自定义的标识符不同,不能当作一般的标识符来使用.例如, cl ...

  2. 提前批笔试一道算法题的Java实现

    题目描述 这是2021广联达校招提前批笔试算法题之一. 我们希望一个序列中的元素是各不相同的,但是理想和显示往往是有差距的.现在给出一个序列A,其中难免有相同的元素,现在提供了一种变化方式,使得经过若 ...

  3. asp.netcore mvc 防CSRF攻击，原理介绍+代码演示+详细讲解

    一.CSRF介绍 1.CSRF是什么? CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session ridin ...

  4. node-sass 报错的解决方法

    今天在运行项目发现原来好好的项目报错了.报错大致信息如下: 这段代码是我升级node之后里面根据不同的项目位置什么的会有所不同. 简单的说,这段代码意思是node-sass 不兼容 node v8 的 ...

  5. Java引用类型之软引用（1）

    Java使用SoftReference来表示软引用,软引用是用来描述一些“还有用但是非必须”的对象.对于软引用关联着的对象,在JVM应用即将发生内存溢出异常之前,将会把这些软引用关联的对象列进去回收对 ...

  6. 2020大厂web前端面试常见问题总结

    本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题.通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端面试者. 1.web前端项目的结构是怎样的?文件有哪些命名规范? 项 ...

  7. Linux C++向josn文件写入字符串

    对C++了解的不多,我的需求是往JSON文件里写入字符串,这种方式不需要用开源的库,直接写文件就可以.附上代码需要包含studio.h头文件以计fstream long a=123456; char ...

  8. CentOS7 安装图形化桌面

    1.装好CentOS7后,我们一开始是上不了网的 (ping 百度报错:Name or service not know) 2.输入dhclient,可以自动获取一个IP地址,再用命令ip addr查 ...

  9. github Repository not found 解决办法

    git pull的时候遇到下面的报错. remote: Repository not found fatal: repository 'https://github.com/MyRepo/projec ...

  10. Java 8新特性（一）：Lambda表达式

    2014年3月发布的Java 8,有可能是Java版本更新中变化最大的一次.新的Java 8为开发者带来了许多重量级的新特性,包括Lambda表达式,流式数据处理,新的Optional类,新的日期和时 ...