富文本框wangEditor

个人觉的官网文档写的还是非常详细的

官网地址: https://www.kancloud.cn/wangfupeng/wangeditor3/332599

富文本框wangEditor功能相对于百度等其他的一些富文本框来说, 功能相对来说少了一点, 但是能够满足一些基本

的开发需要, 毕竟我们开发中遇到的富文本框不需要像Word或者wps功能这么齐全. 功能齐全的富文本框配置必然

也是复杂一点,例如UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器, 开源基于MIT协议，

允许自由使用和修改代码,官网地址:http://ueditor.baidu.com/website/

  /*个人项目中wangEditor富文本框的简单配置*/
                function editor() {var E = window.wangEditorvar editor = new E('#img_detail_box');
                    var $text1 = $('#text1')editor.customConfig.onchange = function (html) {// 监控变化，同步更新到 textarea
                        $text1.val(html)}editor.customConfig.lang = {'设置标题': 'title',
                        '正文': 'p',
                        '链接文字': 'link text',
                        '链接': 'link',
                        '上传图片': 'upload image',
                        '上传': 'upload',
                        '创建': 'init'
                        // 还可自定添加更多
                    }editor.customConfig.linkImgCallback = function (url) {console.log(url) // url 即插入图片的地址
                    }// editor.customConfig.linkImgCheck = function (src) {
                    //     console.log(src) // 图片的链接
                    //
                    //     return true // 返回 true 表示校验成功
                    //     return '验证失败' // 返回字符串，即校验失败的提示信息
                    // }
                    editor.customConfig.onfocus = function () {// alert('jinru ')
                    }
// 自定义配置颜色（字体颜色、背景色）
                    editor.customConfig.colors = ['#000000',
                        '#eeece0',
                        '#1c487f'
                        // '#4d80bf',
                        // '#c24f4a',
                        // '#8baa4a',
                        // '#7b5ba1',
                        // '#46acc8',
                        // '#f9963b',
                        // '#ffffff'
                    ]// 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
                    editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
// editor.customConfig.uploadImgServer = '/upload'  // 上传图片到服务器
                    editor.create()// 禁用编辑功能
                    editor.$textElem.attr('contenteditable', true)}

富文本框wangEditor相关推荐

基于bootstrap的富文本框——wangEditor【欢迎增加开发】
先来一张效果图: 01. 引言老早就開始研究富文本框的东西,在写完<深入理解javascript原型与闭包>之后,就想着要去做一个富文本框的插件的样例.
基于bootstrap的富文本框——wangEditor【欢迎加入开发】
先来一张效果图: 01. 引言老早就开始研究富文本框的东西,在写完<深入理解javascript原型与闭包>之后,就想着要去做一个富文本框的插件的例子.
轻量级web富文本框——wangEditor使用手册（2）——扩展一个“缩进”功能 demo
最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...
轻量级web富文本框——wangEditor使用手册（4）——配置下拉菜单 demo
最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...
ElementUI富文本框组件wangEditor实现
富文本框wangEditor 需求:用户要求使用富文本框上传图片.文章. 需求分析:wangeditor实现需求,几行代码即可创建一个编辑器. 解决过程: 安装 npm i wangeditor -- ...
java 富文本框_java-富文本（wangEditor框架）的使用教程
富文本的使用教程(wangEditor框架) 一,相信很多人用过很多富文本的框架,现在我向大家推荐一个很实用的一个富文本框架,具有丰富的功能项,容易使用. 所以本博客介绍这个富文本编辑器的使用哈!觉得 ...
vue中如何使用wangEditor 富文本框
在做后台管理项目时常常会用到富文本编辑器,在这里推荐大家使用wangEditor,亲测好用话不多说先上图第一步安装 npm wangeditor --save 第二步在项目中使用先建立一个wan ...
vue中wangeditor富文本框的使用方法
vue中使用的富文本插件最多的就是 wangeditor 和 vue-quill-editor .开始我用的是 vue-quill-editor,后来又换成了 wangeditor.为啥呢?因为 vu ...
php文本框长度限制,php截取富文本框中的固定长度的字符
ai,哎怎么赶脚自己写东西越来越小儿科了呢,现在连这个问题都找了好半天因为后台是的内容是富文本编辑器编辑的,前台我傻逼的直接截取了字符串,然后样式啥的都乱了,找了半天是因为富文本的问题其实解决办法 ...
ios html富文本分页,富文本框与分页
1.富文本框javascript UEditor, CKEditor,wangEditor 市面用得比较多的富文本框html 使用是的wangEditor,要学习的话能够去看它的官网 -> ht ...

富文本框wangEditor

富文本框wangEditor相关推荐

最新文章

热门文章