H5 移动端富文本编辑器

本文使用的是：summernote编辑器
官网地址：https://summernote.org
文档地址：https://summernote.org/deep-dive/#initialization-options
github:https://github.com/summernote/summernote/(找大神的链接)

以下为使用步骤
1.引入所需要的文件

<link href="./public/css/bootstrap.css" rel="stylesheet">
<link href="./public/css/summernote.css" rel="stylesheet">
<script src="./public/js/jquery.js"></script>
<script src="./public/js/bootstrap.js"></script>
<script src="./public/js/summernote.js"></script>
<script src="./public/js/summernote-zh-CN.js"></script>//汉化文件

2.html代码

<div id="summernote"><!-- <p>Hello Summernote</p> -->
</div>

3.js代码

<script type="text/javascript">$(document).ready(function() {$('#summernote').summernote({lang: 'zh-CN',//语言placeholder : '请输入内容', // 提示 height:250,//高度width:'auto',//宽度toolbar: [//工具栏配置['style', ['bold', 'italic', 'underline']],//加粗、斜体、下划线['fontsize', ['fontsize']],//字体大小['fontname', ['fontname']],//字体['insert', ['link', 'picture']],//链接、图片['para', ['paragraph']],//文本水平位置['codeview',['codeview']],//查看html代码['undo',['undo']], //撤销['redo',['redo']], //取消撤销                   ],callbacks : { // 回调函数// 上传图片时使用的回调函数   因为我们input选择的本地图片是二进制图片，需要把二进制图片上传服务器，服务器再返回图片url，就需要用到callback这个回调函数onImageUpload : function(files) { var form=new FormData();form.append('myFileName',files[0])  //myFileName 是上传的参数名，一定不能写错$.ajax({type:"post",url:"接口地址", //上传服务器地址dataType:'json',data:form,processData : false,contentType : false,cache : false,success:function(data){console.log(data);                                   $('#summernote').summernote('editor.insertImage',图片路径]);                  }})}}});});</script>

H5 移动端富文本编辑器相关推荐

android端富文本编辑器HRichEditor
HRichEditor android端富文本编辑器项目地址:https://github.com/huangdali/HRichEditor 使用方法见DEMO 所有功能已经实现,期待你的star ...
如何实现移动端富文本编辑器功能
移动端富文本编辑器市面非常之少,因客户需求找了不少,不是标题党就是pc端自适应那种无法满足需求,找了好久终于找到了这个artEditor,下载地址:https://gitee.com/lyzmzcom ...
基于 Vue 的移动端富文本编辑器 vue-quill-editor 实战
优秀的富文本编辑器有很多,比如:UEditor,wangEditor 等,但并不是每个都能在移动端有很好的表现. 我们暂且不讨论移动端是否真的需要富文本,既然有这需求,就把它实现出来. 失败的尝试正 ...
vue移动端富文本编辑器vue-html5-editor
简介 Intro Vue-html5-editor是一个Vue的富文本编辑器插件,简洁灵活可扩展,适用于vue2.0以上版本,支持IE11. Vue-html5-editor is an html5 ...
移动端富文本编辑器iOS、Android
编辑器 github 简介 RichEditor github RichEditor for Android is a beautiful Rich Text WYSIWYG Editor for A ...
移动端富文本编辑器
https://summernote.org/ https://medit.js.org/index.html
React H5 使用div自定义简单富文本编辑器
最近项目中h5端要实现图文上传,而且还要支持用户用户输入的格式,例如换行啥的,那么使用输入控件保存输入内容,图片上传控件就不合适了,因为很难知道用户的输入样式. 如果使用一些现有的富文本编辑器,貌似又 ...
Taro React组件开发（2） —— RuiEditor 富文本编辑器【兼容H5和微信小程序】
1. 富文本编辑器需求分析需要实现图片上传显示,上传使用Taro的 chooseImage 和 uploadFile,完成图片的上传!!! 文字的居左.居中.居右展示,使用格式化方法 format! ...
关于移动手机端富文本编辑器qeditor图片上传改造
日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...

H5 移动端富文本编辑器

H5 移动端富文本编辑器相关推荐

最新文章

热门文章