Js 之移动端富文本插件(wangEditor)

摘要:
文件:https://www.kancloud.cn/wangfupeng/wangeditor3/332599下载:https://github.com/wangfupeng1988/wangEditor/releases1、图2.代码示例˂scriptsrc=“http://

文档:https://www.kancloud.cn/wangfupeng/wangeditor3/332599

下载:https://github.com/wangfupeng1988/wangEditor/releases

一、效果图

Js 之移动端富文本插件(wangEditor)第1张

Js 之移动端富文本插件(wangEditor)第2张

 二、代码示例

<div id="editorContainer" style="margin-bottom: 10px;"></div>
<script src="http://t.zoukankan.com/__INDEX__/style/js/wangEditor.min.js"></script>
<script>
var E = window.wangEditor;
var editor = new E('#editorContainer');
// 自定义菜单配置
editor.customConfig.menus = [
    'head',
    'bold',
    'image'
];
editor.customConfig.showLinkImg = false;
editor.customConfig.uploadImgShowBase64 = true;
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
editor.customConfig.uploadImgMaxLength = 5;
// editor.customConfig.uploadFileName = 'file';
//editor.customConfig.uploadImgServer = '{:url("upload")}';
editor.customConfig.customUploadImg = function (files, insert) {
    // files 是 input 中选中的文件列表
    // insert 是获取图片 url 后,插入到编辑器的方法

    for(let i = 0;i < files.length; i++){
        var form = new FormData();
        form.append("file", files[i]);
        $.ajax({
                url: '{:url("upload")}',
                type: "post",
                processData: false,
                contentType: false,
                data: form,
                dataType: 'json',
                success(res) {
                    // 上传代码返回结果之后,将图片插入到编辑器中
                insert(res.data)
                }
            })
        }
    };

editor.customConfig.onchange = function (html) {
    // 监控变化,同步更新到 textarea
    $('#content').val(html)
};
editor.create();
</script>

免责声明:文章转载自《Js 之移动端富文本插件(wangEditor)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇memcpy多字节字节赋值问题第三方库交叉编译下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

【javascript】浅析js中的堆和栈

这里先说两个概念:1、堆(heap)2、栈(stack)堆 是堆内存的简称。栈 是栈内存的简称。说到堆栈,我们讲的就是内存的使用和分配了,没有寄存器的事,也没有硬盘的事。各种语言在处理堆栈的原理上都大同小异。堆是动态分配内存,内存大小不一,也不会自动释放。栈是自动分配相对固定大小的内存空间,并由系统自动释放。 javascript的基本类型就5种:Unde...

js金额格式化

开发中,经常前端与后台是有约定金额格式,但有时后台人员不遵守规则,经常返回的金额不按格式返回,导致前端显示格式不统一被测试人员反馈成bug。 比如约定的金额同一个格式是元单位 0.00,后台却返回 0元 1元,必须前端开发人员格式成0.00,1.00之类的。 下面自己撸的一个对元单位金额进行格式,欢迎测试。 /* 功能:对非标准0.00的元金额格式化成标...

javascript 获取滚动条高度+常用js页面宽度与高度[转]

/********************* 取窗口滚动条高度******************/function getScrollTop(){var scrollTop=0;if(document.documentElement&&document.documentElement.scrollTop){scrollTop=docume...

JS中将控制台log输出显示到浏览器中

JS中将控制台log输出显示到浏览中 一、背景 有时候需要,将返回的请求数据打印在Chrome中的控制台中,方便对比数据,对比实际返回数据是否和API约定数据一致。这时需要在代码中添加console.log 片段,将数据限制在浏览器的控制台中。 二、操作 在代码添加需要返回的数据,并打印出来,在浏览器中查看。 (1)在代码中添加():...

js-滑块拼图登录验证

一、为什么会有滑块登录验证 很多网站为了防止机器人登录操作,往往会会添加一个滑块拼图验证,必须要拖拽拼成完整才能登录成功。 二、案例展示 刷新页面,即可产生随机位置的两个方块,只有图片滑块滑倒空白方块附近才能算验证成功,可以设置允许有几像素的误差;离目标较远会自动返回。 三、具体实现代码 <!DOCTYPE html> <h...

前端UI框架小汇总

前言: 近期,小弟根据GitHub、前端社区、掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总【不分先后】)。希望对寻找UI框架的小伙伴们提供点帮助。 以下对前端UI框架的移动端、PC端和混合APP的应用进行了列举。 移动端UI框架 Mint UI(饿了...