客户端配置说明

下载

百度网盘地址：点我下载

下载密码：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. data argumentation 数据增强汇总

    几何变换 flip:水平翻转,也叫镜像:垂直翻转 rotation:图片旋转一定的角度,这个可以通过opencv来操作,各个框架也有自己的算子 crop:随机裁剪,比如说,在ImageNet中可以将输 ...

  2. ALGEBRA-前言

    “当你读一页不到一个小时的话,可能是你读太快了” 哈哈 可以 慢慢品

  3. CSS3 新添选择器

    目录 属性选择器 结构伪类选择器 伪元素选择器 属性选择器 属性选择器可以元素特定属性来进行选择,这样就可以不借助于类选择器或id选择器 选择符 简述 E[att] 选择具有att属性的E元素 E[a ...

  4. 洛谷P1048 采药 二维dp化一维

    题目描述 辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断他的资质,给他出了一个难题.医师把他带到一个到处都是草药的山洞里对他说:“孩子,这个 ...

  5. Flutter build apk 如何访问网络

    将下列配置放到路径:your_project\android\app\src下的 main 文件夹下的 AndroidManifest.xml 和 profile 文件夹下的 AndroidManif ...

  6. DRF内置认证组件之自定义认证系统

    自定义token认证 我们知道,在django项目中不管路由以及对应的视图类是如何写的,都会走到 dispatch 方法,进行路由分发, 在阅读 APIView类中的dispatch 方法的源码中,有 ...

  7. servlet的生命周期和工作原理介绍

    一.servlet生命周期 Servlet生命周期分为三个阶段: 1)初始化阶段: 调用init()方法 2)响应客户请求阶段:调用service()方法 3)终止阶段:调用destroy()方法 T ...

  8. Linux非交互方式设置密码

    echo "123" | passwd -stdin lamp echo testuser:password|chpasswd 参考:Linux通过Shell脚本命令修改密码不需要 ...

  9. Java反射概念与基础

    反射机制是Java动态性之一,而说到动态性首先得了解动态语言.那么何为动态语言? 一.动态语言 动态语言,是指程序在运行时可以改变其结构:新的函数可以引进,已有的函数可以被删除等结构上的变化.比如常见 ...

  10. char **指针动态分配地址空间

    1. 定义char **类型变量,初始化为NULL 2. 分配行指针数组空间 3. 为每行分配空间 4. 释放每行的空间 5. 释放二维指针 void main() { char **pointer= ...