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

程序员文章站 2022-07-10 22:21:50

wangEditor-基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费 wangEditor基本配置 1 2 3 4 5 6

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

wangeditor基本配置

  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: ['

打赏

微信扫一扫