您现在的位置是：首页 > 文章详情

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

日期：2018-08-17点击：395收藏

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: ['', '', '', '', ''] 126  } 127  ] 128 129 // 自定义配置颜色（字体颜色、背景色） 130  editor1.customConfig.colors = [ 131 '#000000', 132 '#eeece0', 133 '#1c487f', 134  ] 135 136 // 自定义语言 137  editor1.customConfig.lang = { 138 '设置标题': 'title', 139 '正文': 'p', 140 '链接文字': 'link text', 141 '链接': 'link', 142 '上传图片': 'upload image', 143 '上传': 'upload', 144 '创建': 'init' 145 // 还可自定添加更多 146  } 147 148 // 通过 url 参数配置 debug 模式。url 中带有 wangeditor_debug_mode=1 才会开启 debug 模式 149  editor1.customConfig.debug = true; 150 // editor1.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0; 151 152 // 创建编辑器1 153  editor1.create(); 154 155 // 用 JS 设置的内容 156  editor1.txt.html('<p>用 JS 设置的内容</p>') 157 158 // 初始化编辑器2 159 var editor2 = new E('#div1', '#div2'); 160 161 // 隐藏“网络图片”tab 162  editor2.customConfig.showLinkImg = false; 163 164 // 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！ 165 // editor2.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片 166 // editor2.customConfig.uploadImgServer = '/upload' // 上传图片到服务器 167 168 // 使用 base64 保存图片 169  editor2.customConfig.uploadImgShowBase64 = true; 170 171 // 同步textarea 172  editor2.customConfig.onchange = function (html) { 173 // 监控变化，同步更新到 textarea 174  $('#text').val(html); 175  } 176 177 // onblur 178  editor2.customConfig.onblur = function (html) { 179 // html 即编辑器中的内容 180  console.log('onblur', html) 181  } 182 183 // onfocus 184  editor2.customConfig.onfocus = function () { 185 // html 即编辑器中的内容 186  console.log('onfocus') 187  } 188 189 // 关闭粘贴样式的过滤 190  editor2.customConfig.pasteFilterStyle = false; 191 192 // 忽略粘贴内容中的图片 193  editor2.customConfig.pasteIgnoreImg = true; 194 195 // 自定义处理粘贴的文本内容 196  editor2.customConfig.pasteTextHandle = function (content) { 197 // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回 198 return content + '<p>在粘贴内容后面追加一行</p>'; 199  } 200 201 // 插入图片的回调 202  editor2.customConfig.linkImgCallback = function (url) { 203  console.log(url); // url 即插入图片的地址 204  } 205 206 // 插入链接的校验 207  editor2.customConfig.linkCheck = function (text, link) { 208  console.log(text); // 插入的文字 209  console.log(link); // 插入的链接 210 211 return true; // 返回 true 表示校验成功 212 // return '验证失败' // 返回字符串，即校验失败的提示信息 213  } 214 215 // 插入网络图片的校验 216  editor2.customConfig.linkImgCheck = function (src) { 217  console.log(src); // 图片的链接 218 219 return true; // 返回 true 表示校验成功 220 // return '验证失败' // 返回字符串，即校验失败的提示信息 221  } 222 223 // 创建编辑器2 224  editor2.create(); 225 226 // js追加文本 227  editor2.txt.append('<p>追加的内容</p>') 228 229 // 初始化 textarea 的值 230  $('#text').val(editor2.txt.html()); 231 232 // 禁用编辑功能 233  editor1.$textElem.attr('contenteditable', false); 234 235 // 开启编辑功能 236  editor2.$textElem.attr('contenteditable', true); 237 238 // 获取json 239 function getJson() { 240 var json = editor1.txt.getJSON(); // 获取 JSON 格式的内容 241 var jsonStr = JSON.stringify(json); 242  console.log(json); 243  console.log(jsonStr); 244  } 245 246 247 248 </script> 249 250 </body> 251 252 </html>