zoukankan      html  css  js  c++  java
  • 使用wangEditor富文本编辑器

    客户端配置说明

    使用wangEditor首先要下载它的 js文件,下面是下载地址

    下载方式1:https://github.com/wangfupeng1988/wangEditor/releases

    下载方式2:

    百度网盘地址:点我下载

    下载密码:x09x

    使用方法

    首先要引入wangEditor的js和jQuery

     然后在body里:

    1 <body>
    2         <button id="btn1">查看HTML内容</button>
    3         <button id="btn2">查看文本内容</button>
    4         <button id="btn3">设置Edit文本</button>
    5         
    6         <div id="editor">
    7             <p>aaa</p>
    8         </div>
    9     </body>

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

    1 <script type="text/javascript">
    2     $(function() {
    3      var E = window.wangEditor;
    4      var editor = new E('#editor');
    5      editor.create()
    6 </script>

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

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

    1 //点击按钮获取编辑框中的内容(html形式)
    2     $("#btn1").click(function() {
    3        var text = editor.txt.html();
    4        alert(text);
    5     })

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

    1 //点击按钮获取编辑框中的内容(纯文本形式)
    2     $("#btn2").click(function() {
    3         var text = editor.txt.text();
    4         alert(text);
    5     })

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

    1 //点击按钮获设置Edit文本
    2     $("#btn3").click(function() {
    3         editor.txt.html("勤快的懒羊羊博客");
    4     })

    拓展

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

     1 $(function() {
     2     var E = window.wangEditor;
     3     var editor = new E('#editor');
     4     editor.customConfig.menus = [
     5         'head',
     6         'bold',
     7         'italic',
     8         'underline'
     9         ]
    10     editor.create()

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

     1 <!DOCTYPE html>
     2 <html>
     3     <head lang="en">
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <script src="js/jquery-1.11.0.min.js"></script>
     7         <script src="js/wangEditor.js"></script>
     8 
     9         <script type="text/javascript">
    10             $(function() {
    11                 var E = window.wangEditor;
    12                 var editor = new E('#editor');
    13                 editor.customConfig.menus = [
    14                     'head',
    15                     'bold',
    16                     'italic',
    17                     'underline'
    18                 ]
    19                 editor.create()
    20 
    21                 //点击按钮获取编辑框中的内容(html形式)
    22                 $("#btn1").click(function() {
    23                     var text = editor.txt.html();
    24                     alert(text);
    25                 })
    26 
    27                 //点击按钮获取编辑框中的内容(纯文本形式)
    28                 $("#btn2").click(function() {
    29                     var text = editor.txt.text();
    30                     alert(text);
    31                 })
    32 
    33                 //点击按钮获设置Edit文本
    34                 $("#btn3").click(function() {
    35                     editor.txt.html("勤快的懒羊羊博客");
    36                 })
    37 
    38             })
    39         </script>
    40 
    41     </head>
    42     <body>
    43         <button id="btn1">查看HTML内容</button>
    44         <button id="btn2">查看文本内容</button>
    45         <button id="btn3">设置Edit文本</button>
    46 
    47         <div id="editor">
    48             <p>aaa</p>
    49         </div>
    50     </body>
    51 </html>
    原创文章,转载请说明出处,谢谢合作
  • 相关阅读:
    jQuery EasyUI API 中文文档 可调整尺寸
    jQuery EasyUI API 中文文档 链接按钮(LinkButton)
    jQuery EasyUI API 中文文档 手风琴(Accordion)
    jQuery EasyUI API 中文文档 表单(Form)
    jQuery EasyUI API 中文文档 组合(Combo)
    jQuery EasyUI API 中文文档 布局(Layout)
    jQuery EasyUI API 中文文档 拆分按钮(SplitButton)
    jQuery EasyUI API 中文文档 菜单按钮(MenuButton)
    jQuery EasyUI API 中文文档 搜索框
    jQuery EasyUI API 中文文档 验证框(ValidateBox)
  • 原文地址:https://www.cnblogs.com/lwl80/p/13647595.html
Copyright © 2011-2022 走看看