基于Vue實現(xiàn)微信小程序的圖文編輯器
更新時間：2018年07月25日 16:59:51 作者：net程序-十天
這篇文章主要介紹了基于Vue實現(xiàn)微信小程序的圖文編輯器,由于微信小程序不能使用常規(guī)的圖文編輯器(比如百度的UEditor )編輯新聞內容之類的，所以用vue寫了個針對小程序用的圖文編輯器需要的朋友可以參考下
由于微信小程序不能使用常規(guī)的圖文編輯器(比如百度的UEditor )編輯新聞內容之類的，所以用vue寫了個針對小程序用的圖文編輯器。效果如下
多圖上傳圖片用到了 ajaxfileupload.js （不知道哪位仁兄寫的，拿來用了，很好用）
最終形成一串Json數(shù)據(jù)（轉成字符串，傳入后臺存入數(shù)據(jù)庫，小程序端用JSON.parse 轉成JSON ，按照后臺一樣的方式渲染即可【小程序端代碼還沒寫，后面再貼出來吧】）
json格式如
[{"mytype":1,"content":"測試數(shù)據(jù)\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代碼
<div class="editor-box vue-container">
<div class="vuefor" v-for="i in editorData.length+1" v-on:click="hidecolorbox(i-1)">
<div class="tool-box">
<div class="tool-box-sub">
<div class="tool-list">
<div v-if="reload">
<input type="file" v-on:change.stop="uploadfile(i-1)" v-bind:id="buildfileid(i-1)" v-bind:name="buildfileid(i-1)" multiple="multiple">
</div>
<label class="tool-item" v-on:click.stop="itemadd(i-1,1)">
<div class="icon"><img src="~/res/img/icon-font.png" alt="" /></div>
<div class="text">文字</div>
</label>
<!--v-on:click.stop="itemadd(i-1,2)"-->
<label class="tool-item" v-bind:for="buildfileid(i-1)">
<div class="icon"><img src="~/res/img/icon-img.png" alt="" /></div>
<div class="text">圖片</div>
</label>
<label class="tool-item" v-on:click.stop="itemadd(i-1,3)">
<div class="icon"><img src="~/res/img/icon-line.png" alt="" /></div>
<div class="text">分割</div>
</label>
<label class="tool-item enabled" v-on:click.stop="itemadd(i-1,4)">
<div class="icon"><img src="~/res/img/icon-video.png" alt="" /></div>
<div class="text">視頻</div>
</label>
<label class="tool-item enabled" v-on:click.stop="itemadd(i-1,5)">
<div class="icon"><img src="~/res/img/icon-link.png" alt="" /></div>
<div class="text">鏈接</div>
</label>
</div>
</div>
</div>
<div class="editor-item" v-if="i <= editorData.length">
<div class="head">
<div class="h-btn fleft" v-on:click.stop="itemup(i-1)">
<img src="~/res/img/icon-up.png" />
</div>
<div class="h-btn fleft" v-on:click.stop="itembottom(i-1)">
<img src="~/res/img/icon-bottom.png" />
</div>
<div class="h-btn fright" v-on:click.stop="itemdel(i-1)">
<img src="~/res/img/icon-del.png" />
</div>
</div>
<div class="content" v-if="editorData[i-1].mytype==1">
<!--文字類型的輸入框-->
<div class="text-box">
<div class="head">
<div title="加粗" v-on:click.stop="fontweight(i-1)" v-bind:class="{ 'head-btn': true,'sel':editorData[i-1].font.weight==1 }"><img src="~/res/img/icon-font-weight.png" alt="" /></div>
<div title="放大字體" v-on:click.stop="fontda(i-1)" v-bind:class="{ 'head-btn': true}"><img src="~/res/img/icon-font-da.png" alt="" /></div>
<div title="縮小字體" v-on:click.stop="fontxiao(i-1)" v-bind:class="{ 'head-btn': true}"><img src="~/res/img/icon-font-xiao.png" alt="" /></div>
<div title="刪除線" v-on:click.stop="fontdel(i-1)" v-bind:class="{ 'head-btn': true,'sel':editorData[i-1].font.del==1 }"><img src="~/res/img/icon-font-del.png" alt="" /></div>
<div title="下劃線" v-on:click.stop="fontline(i-1)" v-bind:class="{ 'head-btn': true,'sel':editorData[i-1].font.line==1 }"><img src="~/res/img/icon-font-line.png" alt="" /></div>
<div title="居中" v-on:click.stop="fontcenter(i-1)" v-bind:class="{ 'head-btn': true,'sel':editorData[i-1].font.center==1 }"><img src="~/res/img/icon-font-center.png" alt="" /></div>
<div title="字體顏色" v-on:click.stop="fontshowcolor(i-1)" v-bind:class="{ 'head-btn': true }" v-bind:style="initfontcolor(editorData[i-1].font)">
A
<div v-on:click.stop="stopclick" class="color-box" v-bind:class="{'hide':editorData[i-1].font.showcolor!=1}">
<div class="color-title">
字體顏色
</div>
<div class="color-list">
<div class="color-item" v-for="color in colors">
<span v-on:click.stop="fontsetcolor(i-1,color)" v-bind:style="initbgcolor(color)"></span>
</div>
</div>
<div class="color-title">
字體顏色代碼
</div>
<div class="color-input">
<input type="text" v-model="editorData[i-1].font.color" />
</div>
<!--<div class="color-title">
字體背景顏色
</div>
<div class="color-list">
<div class="color-item" v-for="color in colors">
<span v-on:click.stop="fontsetcolor(i-1,color)" v-bind:style="initbgcolor(color)"></span>
</div>
</div>
<div class="color-title">
字體背景顏色代碼
</div>
<div class="color-input">
<input type="text" v-model="editorData[i-1].font.bgcolor" />
</div>-->
</div>
</div>
</div>
<div class="line"></div>
<div class="input">
<textarea name="" rows="" cols="" v-bind:style="initstyle(editorData[i-1].font)" v-model="editorData[i-1].content"></textarea>
</div>
<div class="line"></div>
</div>
</div>
<div class="content" v-if="editorData[i-1].mytype==2" style="">
<!--圖片-->
<div class="img-box">
<img v-if="editorData[i-1].loading==1" v-bind:src="editorData[i-1].content" alt="" />
<img class="loading" v-if="editorData[i-1].loading==0" src="~/res/img/img_loading.gif" alt="" />
</div>
</div>
<div class="content" v-if="editorData[i-1].mytype==3">
<!--分割線-->
<div class="line-box">
</div>
</div>
<div class="clear" style=""></div>
</div>
</div>
</div>
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 ? 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 ? 0 : 1);
},
//下劃線
fontline: function (index) {
pageData.editorData[index].font.line = (pageData.editorData[index].font.line == 1 ? 0 : 1);
},
//居中顯示
fontcenter: function (index) {
pageData.editorData[index].font.center = (pageData.editorData[index].font.center == 1 ? 0 : 1);
},
fontshowcolor: function (index) {
pageData.editorData[index].font.showcolor = (pageData.editorData[index].font.showcolor == 1 ? 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，方便后面上傳完成后識別應該更新哪條數(shù)據(jù)
var groupid = guid();
var that = this;
var fileid = "file" + index;
var files = $("#" + fileid)[0].files;
for (var i = 0; i < files.length; i++) {
that.itemadd(index + i, 2, groupid);
}
jQuery.ajaxFileUpload({
url: '@Url.Content("~/img/uploadproductdpicArray?path=dyProductImgs")', //用于文件上傳的服務器端請求地址
secureuri: false, //是否需要安全協(xié)議，一般設置為false
fileElementId: fileid, //文件上傳域的ID
dataType: 'json', //返回值類型 一般設置為json
success: function (data) //服務器成功響應處理函數(shù)
{
//var result = JSON.parse(data);
pageData.reload = true;
var result = data;
console.log(result);
if (result.resultState == "1") {
var j = 0;
for (var i = 0; i < pageData.editorData.length; i++) {
if (pageData.editorData[i].groupid && pageData.editorData[i].groupid == groupid) {
pageData.editorData[i].content = "@Url.Content("~")" + result.Data[j].substring(1);
pageData.editorData[i].loading = 1;
j++;
}
}
console.log(result);
}
else alert("上傳失?。?);
},
error: function (data)//服務器響應失敗處理函數(shù)
{
alert("上傳失??！");
}
});
},
//上升模塊
itemup: function (index) {
if (index > 0) {
var itemData = pageData.editorData[index];
pageData.editorData.splice(index, 1);
pageData.editorData.splice(index - 1, 0, itemData);
}
},
//下降模塊
itembottom: function (index) {
if (index + 1 < pageData.editorData.length) {
var itemData = pageData.editorData[index];
pageData.editorData.splice(index, 1);
pageData.editorData.splice(index + 1, 0, itemData);
}
},
//刪除模塊
itemdel: function (index) {
pageData.editorData.splice(index, 1);
},
//添加一個新的模塊
itemadd: function (index, type, groupid) {
var itemData = null;
switch (type) {
case 1:
itemData = {
mytype: 1,
content: "",
font: {
size: 0, //字體大小 每+1 字體+2px -1同減
weight: 0, //是否加粗
del: 0, //是否刪除線
line: 0, //是否下劃線
center: 0, //是否居中
color: "#000", //字體顏色
bgcolor: "#fff", //字體顏色
showcolor: 0 //是否顯示顏色選擇框
}
};
break;
case 2:
itemData = {
mytype: 2,
content: "res/img/1.jpg",
loading: 0 //是否已經(jīng)成功上傳
};
break;
case 3:
itemData = {
mytype: 3,
content: ""
};
break;
default:
alert('暫不支持');
break;
}
if (itemData) {
if (groupid) itemData.groupid = groupid;
pageData.editorData.splice(index, 0, itemData);
}
},
//一個用于阻止冒泡的事件
stopclick: function () { },
},
//實例被調用后
created: function () {
},
//el 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調用該鉤子。
updated: function () {
this.$nextTick(function () {
////console.log(pageData);
//var files = this.$refs.feedbakcImg;
//for (var i = 0; i < files.length; i++) {
// files[i].clearFiles();
//}
})
}
});
后臺代碼 .net （有些方法沒有放出來，后面我有時間整理一個單獨的demo出來放到云盤）
/// <summary>
/// 批量上傳商品詳情圖片
/// </summary>
/// <returns></returns>
[HttpPost]
public ContentResult uploadproductdpicArray(string path)
{
rData<List<string>> result = new rData<List<string>>();
result = UpLoadPicArray(path);
if (result.resultState == 1)
for (int i = 0; i < result.Data.Count; i++)
{
if (ST.Tool.ImageHelp.GetImageSuffix(result.Data[i]) != ".gif")
{
string imgPath = Server.MapPath($"~{result.Data[i]}");
string imgPathNoSuffix = imgPath.Substring(0, imgPath.LastIndexOf("."));
string imgSuffix = ST.Tool.ImageHelp.GetImageSuffix(imgPath);
Image oldimg = Image.FromFile(imgPath); //讀取圖片
//壓縮寬度為500的圖片，等比 清晰度 100
ST.Tool.ImageHelp.PicThumbnail(oldimg, imgPath + "_E500_100" + imgSuffix, 500, 0, 100);
oldimg.Dispose();
result.Data[i] = result.Data[i] + "_E500_100" + imgSuffix;
}
}
var jsonResult = JsonConvert.SerializeObject(result);
return new ContentResult() { Content = jsonResult };
}
/// <summary>
/// 上傳圖片
/// </summary>
/// <param name="_path">保存圖片的文件夾名稱</param>
/// <returns>保存結果</returns>
private rData<string> UpLoadPic(string _path="public")
{
rData<string> result = new rData<string>();
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 ? RotateFlipType.Rotate90FlipNone
: p.Value[0] == 3 ? RotateFlipType.Rotate180FlipNone
: p.Value[0] == 8 ? RotateFlipType.Rotate270FlipNone
: p.Value[0] == 1 ? 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;
}
/// <summary>
/// 上傳多張圖片
/// </summary>
/// <param name="_path"></param>
/// <returns></returns>
private rData<List<string>> UpLoadPicArray(string _path = "public")
{
rData<List<string>> result = new rData<List<string>>();
result.Data = new List<string>();
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 ? RotateFlipType.Rotate90FlipNone
: p.Value[0] == 3 ? RotateFlipType.Rotate180FlipNone
: p.Value[0] == 8 ? RotateFlipType.Rotate270FlipNone
: p.Value[0] == 1 ? 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實現(xiàn)微信小程序的圖文編輯器，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要介紹了vue中vue-cli項目報錯sockjs.js報錯問題，具有很好的參考價值，希望對大家有所幫助。2022-12-12
這篇文章主要介紹了vue+express+jwt持久化登錄的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
這篇文章主要介紹了Vue 中可以定義組件模版的幾種方式以及他們之間的一些差別，需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細介紹了vue組件watch屬性實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
在 Vue.js 中,組件是構建應用程序的基本單位,然而,當你的應用程序變得復雜時,組件之間的通信變得至關重要,本文將介紹幾種 Vue 組件之間通信的方式,幫助你更好地管理和組織代碼,感興趣的朋友一起看看吧2024-06-06
下面小編就為大家分享一篇vue.js移動數(shù)組位置,同時更新視圖的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue頁面切換過渡transition效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue中button標簽樣式和功能禁用的寫法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
antdesign-vue結合sortablejs實現(xiàn)兩個table相互拖拽排序功能
這篇文章主要介紹了antdesign-vue結合sortablejs實現(xiàn)兩個table相互拖拽排序功能,本文通過實例圖文相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
vue開發(fā)chrome插件，實現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫功能
這篇文章主要介紹了vue開發(fā)chrome插件，實現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫功能的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12