欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费(1)

程序员文章站 2022-04-16 09:02:48
wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费 wangEditor基本配置 1 2 3 4 5 6

wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费(1)

wangeditor-基于javascript和css开发的 web富文本编辑器, 轻量、简洁、易用、开源免费

wangeditor基本配置

wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费(1)
  1 <!doctype html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="utf-8">
  6     <title>wangeditor基本操作</title>
  7 </head>
  8 <style type="text/css">
  9 .toolbar {
 10     border: 1px solid #ccc;
 11 }
 12 
 13 .text {
 14     border: 1px solid #ccc;
 15     height: 400px;
 16 }
 17 textarea{
 18     width: 100%;
 19     resize: none;
 20     padding: 0 10px;
 21     box-sizing: border-box;
 22 }
 23 </style>
 24 
 25 <body>
 26     
 27        <h2>富文本编辑器1</h2>
 28 
 29     <div id="editor"></div>
 30 
 31     <button onclick="editor1.txt.clear()">清空编辑器</button>
 32     
 33     <button onclick="alert(editor1.txt.html())">获取html</button>
 34     
 35     <button onclick="alert(editor1.txt.text())">获取文本</button>
 36 
 37     <button onclick="getjson()">获取json</button>
 38 
 39     <h2>富文本编辑器2</h2>
 40 
 41     <div id="div1" class="toolbar"></div>
 42     
 43     <div style="padding: 5px 0; color: #ccc">中间隔离带</div>
 44     
 45     <div id="div2" class="text" style="min-height: 456px;">
 46     
 47         <!--可使用 min-height 实现编辑区域自动增加高度-->
 48     
 49         <p>请输入内容</p>
 50     
 51     </div>
 52     
 53     <textarea name="" id="text" rows="10"></textarea>
 54 
 55     <!-- 注意, 只需要引用 js,无需引用任何 css !!!-->
 56     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 57     <script type="text/javascript" src="script/wangeditor-3.1.1.js"></script>
 58     
 59     <script type="text/javascript">
 60 
 61         // 声明富文本编辑器
 62         var e = window.wangeditor;
 63         
 64         // 初始化富文本编辑器
 65         var editor1 = new e('#editor');
 66 
 67         // css的z-index
 68         editor1.customconfig.zindex = 100;
 69 
 70         // 自定义菜单配置
 71         editor1.customconfig.menus = [
 72             'head',  // 标题
 73             'bold',  // 粗体
 74             'fontsize',  // 字号
 75             'fontname',  // 字体
 76             'italic',  // 斜体
 77             'underline',  // 下划线
 78             'strikethrough',  // 删除线
 79             'forecolor',  // 文字颜色
 80             'backcolor',  // 背景颜色
 81             'link',  // 插入链接
 82             'list',  // 列表
 83             'justify',  // 对齐方式
 84             'quote',  // 引用
 85             'emoticon',  // 表情
 86             'image',  // 插入图片
 87             'table',  // 表格
 88             'video',  // 插入视频
 89             'code',  // 插入代码
 90             'undo',  // 撤销
 91             'redo'  // 重复
 92         ]
 93 
 94         // 自定义字体
 95         editor1.customconfig.fontnames = [
 96             '宋体',
 97             '微软雅黑',
 98         ]
 99 
100         // 表情面板可以有多个 tab ,因此要配置成一个数组。数组每个元素代表一个 tab 的配置
101         editor1.customconfig.emotions = [
102             {
103                 // tab 的标题
104                 title: '默认',
105                 // type -> 'emoji' / 'image'
106                 type: 'image',
107                 // content -> 数组
108                 content: [
109                     {
110                         alt: '[坏笑]',
111                         src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png'
112                     },
113                     {
114                         alt: '[舔屏]',
115                         src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
116                     }
117                 ]
118             },
119             {
120                 // tab 的标题
121                 title: 'emoji',
122                 // type -> 'emoji' / 'image'
123                 type: 'emoji',
124                 // content -> 数组
125                 content: ['

                    
                
(0)
打赏 wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费(1) 微信扫一扫

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费(1)
验证码: wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费(1)