当前位置: 开发笔记 > 前端 > 正文

基于Vue实现微信小程序的图文编辑器

作者：卓菘碧625 | 来源：互联网 | 2022-03-23 18:40

这篇文章主要介绍了基于Vue实现微信小程序的图文编辑器,由于微信小程序不能使用常规的图文编辑器(比如百度的UEditor)编辑新闻内容之类的，所以用vue写了个针对小程序用的图文编辑器需要的朋友可以参考下

由于微信小程序不能使用常规的图文编辑器(比如百度的UEditor )编辑新闻内容之类的，所以用vue写了个针对小程序用的图文编辑器。效果如下

多图上传图片用到了 ajaxfileupload.js （不知道哪位仁兄写的，拿来用了，很好用）

最终形成一串Json数据（转成字符串，传入后台存入数据库，小程序端用JSON.parse 转成JSON ，按照后台一样的方式渲染即可【小程序端代码还没写，后面再贴出来吧】）

json格式如

[{"mytype":1,"content":"测试数据\n\n11111\n\n","font":{"size":0,"weight":1,"del":1,"line":0,"center":1,"color":"#ED1C24","bgcolor":"#fff","showcolor":0}},{"mytype":3,"content":""},{"mytype":2,"content":"/upload/dyProductImgs/20180725/9841925131090216.jpg_E500_100.jpg","loading":1,"groupid":"627459ec-d372-e372-218e-b93b83cb2d02"},{"mytype":2,"content":"/upload/dyProductImgs/20180725/1574162212592205.jpg_E500_100.jpg","loading":1,"groupid":"627459ec-d372-e372-218e-b93b83cb2d02"},{"mytype":2,"content":"/upload/dyProductImgs/20180725/8745023656415428.jpg_E500_100.jpg","loading":1,"groupid":"627459ec-d372-e372-218e-b93b83cb2d02"},{"mytype":2,"content":"/upload/dyProductImgs/20180725/7027501123579481.jpg_E500_100.jpg","loading":1,"groupid":"627459ec-d372-e372-218e-b93b83cb2d02"}]

　html代码

js 代码

需要引用 jquery、vue、ajaxfileupload

var pageData = {
  editorData: [],
  colors: [
   "#000",
   "#7F7F7F",
   "#880015",
   "#ED1C24",
   "#FF7F27",
   "#FFF200",
   "#22B14C",
   "#3F48CC",
   "#E36C09",
   "#31859B",
   "#5F497A",
   "#76923C",
   "#953734",
   "#366092",
   "#938953",
   "#fff"
  ],
  reload:true
 };
  //初始化vue
 var vmMenu = new Vue({
  el: '.vue-container',
  data: pageData,
  methods: {
   //生成一个fileid
   buildfileid: function (index) {
    return "file" + index;
   },
   initstyle: function (font) {
    var stylestr = "";
    var fOntsize= 18;
    fontsize += font.size * 3;
    stylestr += "font-size: " + fontsize + "px;"
    if (font.weight == 1) stylestr += "font-weight: bold;"
    if (font.del == 1) stylestr += "text-decoration:line-through;"
    if (font.line == 1) stylestr += "text-decoration:underline;"
    if (font.center == 1) stylestr += "text-align: center;"
    if (font.color) stylestr += ("color:" + font.color + ";");
    if (font.bgcolor) stylestr += ("display: inline;background-color:" + font.bgcolor + ";");
    return stylestr;
   },
   //字体的颜色
   initfontcolor: function (font) {
    var result = "";
    result += "color:";
    result += font.color;
    result += ";";
    result += "background-color:";
    result += font.bgcolor;
    result += ";";
    return result;
   },
   //字体背景的颜色
   initbgcolor: function (color) {
    return "background-color:" + color;
   },
   //加粗或者取消嘉措
   fontweight: function (index) {
    pageData.editorData[index].font.weight = (pageData.editorData[index].font.weight == 1 &＃63; 0 : 1);
   },
   //字体加大
   fontda: function (index) {
    pageData.editorData[index].font.size++;
   },
   //字体减小
   fontxiao: function (index) {
    pageData.editorData[index].font.size--;
   },
   //删除线
   fontdel: function (index) {
    pageData.editorData[index].font.del = (pageData.editorData[index].font.del == 1 &＃63; 0 : 1);
   },
   //下划线
   fontline: function (index) {
    pageData.editorData[index].font.line = (pageData.editorData[index].font.line == 1 &＃63; 0 : 1);
   },
   //居中显示
   fontcenter: function (index) {
    pageData.editorData[index].font.center = (pageData.editorData[index].font.center == 1 &＃63; 0 : 1);
   },
   fontshowcolor: function (index) {
    pageData.editorData[index].font.showcolor = (pageData.editorData[index].font.showcolor == 1 &＃63; 0 : 1);
   },
   //选择字体颜色
   fontsetcolor: function (index, color) {
    pageData.editorData[index].font.color = color;
    this.hidecolorbox(index);
   },
   //隐藏颜色选择框
   hidecolorbox: function (index) {
    if (pageData.editorData && pageData.editorData.length > index && pageData.editorData[index].mytype == 1)
     pageData.editorData[index].font.showcolor = 0;
   },
   //上传图片
   uploadfile: function (index) {
    //用于强制重新渲染 input.file 用于清空之前的文件 ^_^
    pageData.reload = false;
    //添加一个组ID，方便后面上传完成后识别应该更新哪条数据
    var groupid = guid();
    var that = this;
    var fileid = "file" + index;
    var files = $("#" + fileid)[0].files;
    for (var i = 0; i  0) {
     var itemData = pageData.editorData[index];
     pageData.editorData.splice(index, 1);
     pageData.editorData.splice(index - 1, 0, itemData);
    }
   },
   //下降模块
   itembottom: function (index) {
    if (index + 1

后台代码 .net （有些方法没有放出来，后面我有时间整理一个单独的demo出来放到云盘）

 /// 
  /// 批量上传商品详情图片
  /// 
  /// 
  [HttpPost]
  public ContentResult uploadproductdpicArray(string path)
  {
   rData> result = new rData>();
   result = UpLoadPicArray(path);
   if (result.resultState == 1)
   for (int i = 0; i 
  /// 上传图片
  /// 
  /// 保存图片的文件夹名称
  /// 保存结果
  private rData UpLoadPic(string _path="public")
  {
   rData result = new rData();
   HttpFileCollectionBase _file = Request.Files;
   if (_file.Count > 0)
   {
    long size = _file[0].ContentLength;
    string type = _file[0].ContentType;
    string name = _file[0].FileName;
    //文件格式
    string _tp = Path.GetExtension(name);
    if (_tp.ToLower() == ".jpg" || _tp.ToLower() == ".jpeg" || _tp.ToLower() == ".gif" || _tp.ToLower() == ".png" || _tp.ToLower() == ".swf")
    {
     Stream stream = _file[0].InputStream;
     Image image = Image.FromStream(stream);
     string dateDir = DateTime.Now.ToString("yyyyMMdd");
     string saveName = ST.Tool.ExpandString.GetNonceNumberT(16) + _tp;
     string filePath = $"{BaseConfig.headpath}{_path}/{dateDir}/";
     string path = Server.MapPath(filePath);
     if (!Directory.Exists(path)) Directory.CreateDirectory(path);
     //_file[0].SaveAs(Server.MapPath($"{filePath}{saveName}"));
     //初始化图片对象
     //Image image = new Bitmap(Server.MapPath($"{filePath}{saveName}"));
     foreach (var p in image.PropertyItems)
     {
      if (p.Id == 0x112)
      {
       var rft = p.Value[0] == 6 &＃63; RotateFlipType.Rotate90FlipNone
         : p.Value[0] == 3 &＃63; RotateFlipType.Rotate180FlipNone
         : p.Value[0] == 8 &＃63; RotateFlipType.Rotate270FlipNone
         : p.Value[0] == 1 &＃63; RotateFlipType.RotateNoneFlipNone
         : RotateFlipType.RotateNoneFlipNone;
       p.Value[0] = 0; //旋转属性值设置为不旋转
       image.SetPropertyItem(p); //回拷进图片流
       image.RotateFlip(rft);
      }
     }
     //重新保存为正常的图片
     image.Save(Server.MapPath($"{filePath}{saveName}"));
     result.Data = $"{filePath}{saveName}";
    }
    else result.errorMsg = "只能上传图片。";
   }
   else result.errorMsg = "未选择文件";
   return result;
  }
  /// 
  /// 上传多张图片
  /// 
  /// 
  /// 
  private rData> UpLoadPicArray(string _path = "public")
  {
   rData> result = new rData>();
   result.Data = new List();
   HttpFileCollectionBase _file = Request.Files;
   if (_file.Count > 0)
    for (int i = 0; i <_file.Count; i++)
    {
     //Thread.Sleep(500);
     long size = _file[i].ContentLength;
     string type = _file[i].ContentType;
     string name = _file[i].FileName;
     //文件格式
     string _tp = Path.GetExtension(name);
     if (_tp.ToLower() == ".jpg" || _tp.ToLower() == ".jpeg" || _tp.ToLower() == ".gif" || _tp.ToLower() == ".png" || _tp.ToLower() == ".swf")
     {
      Stream stream = _file[i].InputStream;
      Image image = Image.FromStream(stream);
      string dateDir = DateTime.Now.ToString("yyyyMMdd");
      string saveName = ST.Tool.ExpandString.GetNonceNumberT(16) + _tp;
      string filePath = $"{BaseConfig.headpath}{_path}/{dateDir}/";
      string path = Server.MapPath(filePath);
      if (!Directory.Exists(path)) Directory.CreateDirectory(path);
      //_file[0].SaveAs(Server.MapPath($"{filePath}{saveName}"));
      //初始化图片对象
      //Image image = new Bitmap(Server.MapPath($"{filePath}{saveName}"));
      foreach (var p in image.PropertyItems)
      {
       if (p.Id == 0x112)
       {
        var rft = p.Value[0] == 6 &＃63; RotateFlipType.Rotate90FlipNone
          : p.Value[0] == 3 &＃63; RotateFlipType.Rotate180FlipNone
          : p.Value[0] == 8 &＃63; RotateFlipType.Rotate270FlipNone
          : p.Value[0] == 1 &＃63; RotateFlipType.RotateNoneFlipNone
          : RotateFlipType.RotateNoneFlipNone;
        p.Value[0] = 0; //旋转属性值设置为不旋转
        image.SetPropertyItem(p); //回拷进图片流
        image.RotateFlip(rft);
       }
      }
      //重新保存为正常的图片
      image.Save(Server.MapPath($"{filePath}{saveName}"));
      result.Data.Add($"{filePath}{saveName}");
      //result.Data = $"{filePath}{saveName}";
     }
     else result.errorMsg = "只能上传图片。";
    }
   else result.errorMsg = "未选择文件";
   return result;
  }

总结

以上所述是小编给大家介绍的基于Vue实现微信小程序的图文编辑器，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

推荐阅读

json
ThinkPHP6多数据库部署指南

本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署，包括读写分离的策略，以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细]

蜡笔小新 2024-12-17 18:59:28
json
360SRC安全应急响应：从漏洞提交到修复的全过程

本文详细介绍了360SRC平台处理一起关键安全事件的过程，涵盖从漏洞提交、验证、排查到最终修复的各个环节。通过这一案例，展示了360在安全应急响应方面的专业能力和严谨态度。 ... [详细]

蜡笔小新 2024-12-27 11:10:05
css
企业级项目中 Webpack 配置优化指南

本文详细介绍了在企业级项目中如何优化 Webpack 配置，特别是在 React 移动端项目中的最佳实践。涵盖资源压缩、代码分割、构建范围缩小、缓存机制以及性能优化等多个方面。 ... [详细]

蜡笔小新 2024-12-24 14:41:48
css
Java SpringMVC SSM 实现多模块集成：操作日志、文件管理、头像编辑、权限控制及缓存优化

本文介绍了一个基于 Java SpringMVC 和 SSM 框架的综合系统，涵盖了操作日志记录、文件管理、头像编辑、权限控制、以及多种技术集成如 Shiro、Redis 等，旨在提供一个高效且功能丰富的开发平台。 ... [详细]

蜡笔小新 2024-12-20 19:17:47
ajax
基于Go与WebSockets的实时聊天服务搭建

本文详细介绍了如何利用Go语言和WebSockets技术构建一个高效的实时聊天系统。随着网络应用的日益复杂化，实时交互成为了提升用户体验的关键要素之一。通过本指南，开发者可以学习到最新的技术和最佳实践。 ... [详细]

蜡笔小新 2024-12-20 08:50:37
css
使用WebBrowser控件实现点击输入框显示图片验证码的方法

本文探讨了如何通过WebBrowser控件在用户点击输入框时自动显示图片验证码。该过程可能涉及JavaScript事件的触发与响应。 ... [详细]

蜡笔小新 2024-12-17 18:28:07
json
Spring Boot 解决 AJAX 跨域请求及自定义 Headers 方法

本文探讨了浏览器的同源策略限制及其对 AJAX 请求的影响，并详细介绍了如何在 Spring Boot 应用中优雅地处理跨域请求，特别是当请求包含自定义 Headers 时的解决方案。 ... [详细]

蜡笔小新 2024-12-17 13:57:01
ajax
深入分析十大PHP开发框架

随着PHP技术的发展，各类开发框架层出不穷，成为了开发者们热议的话题。本文将详细介绍并对比十款主流的PHP开发框架，旨在帮助开发者根据自身需求选择最合适的工具。 ... [详细]

蜡笔小新 2024-12-17 11:15:55
css
深入理解Cookie与Session会话管理

本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息，以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制，解释其原理及应用场景。 ... [详细]

蜡笔小新 2024-12-27 18:20:43
css
MySQL Debug 模式的实现与应用

本文详细介绍了如何启用和使用 MySQL 的调试模式，包括编译选项、环境变量配置以及调试信息的解析。通过实际案例展示了如何利用调试模式解决客户端无法连接服务器的问题。 ... [详细]

蜡笔小新 2024-12-19 19:17:32
css
如何从python读取sql[mysql基础教程]

从python读取sql的方法：1、利用python内置的open函数读入sql文件；2、利用第三方库pymysql中的connect函数连接mysql服务器；3、利用第三方库pa ... [详细]

蜡笔小新 2024-12-19 15:06:29
label
JavaScript前端开发中常用的四种继承方法详解

本文深入探讨了JavaScript中实现继承的四种常见方法，包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说，理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]

蜡笔小新 2024-12-18 11:08:28
ajax
Python爬虫实战：51CTO学院IT课程数据抓取

本文将介绍如何利用Python爬虫技术抓取国内主流在线学习平台的数据，并以51CTO学院为例，进行详细的技术解析和实践操作。 ... [详细]

蜡笔小新 2024-12-17 11:53:33
ajax
全能终端工具推荐：高效、免费、易用

介绍一款备受好评的全能型终端工具——MobaXterm，它不仅功能强大，而且完全免费，适合各类用户使用。 ... [详细]

蜡笔小新 2024-12-16 21:02:15
js
Java EE CDI：解决依赖关系冲突的实例

在本教程中，我们将探讨如何在Java EE的CDI（上下文和依赖注入）框架中有效解决依赖关系的冲突问题。通过学习如何使用限定符，您将能够为应用程序的不同客户端提供多种接口实现，并确保每个客户端都能正确调用其所需的实现。 ... [详细]

蜡笔小新 2024-12-16 03:05:02

卓菘碧625

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章