基于Vue实现微信小程序的图文编辑器
【下载文档：微信小程序开发附源码：基于Vue.txt实现微信小程序图文编辑器】
基于Vue实现微信小程序图文编辑器
由于微信小程序无法使用常规的图文编辑器（比如百度的）来编辑新闻内容，因此使用Vue编写了一个小程序的图文编辑器。效果如下
多图上传使用.js（不知道哪个朋友写的，不过我用过，很好用）
最后形成一串Json数据（转换成字符串，传给后台，存入数据库。小程序使用的是JSON。转换为JSON并按照后台相同的方式渲染【小程序的代码有还没写，稍后发吧】）
json格式如下
[{"":1,"":"测试数据\n\\n\n","font":{"size":0,"":1,"del":1,"line":0, "":1,"":"#","":"#fff","":0}},{"":3,"":""},{"":2,"":" ////..jpg","":1,"":"-d372-e372-218e-"},{"":2,"":"////..jpg","": 1,"":"-d372-e372-218e-"},{"":2,"":"////..jpg","":1,"":"-d372-e372-218e -"},{"":2,"":"////..jpg","":1,"":"-d372-e372-218e-"}]
html代码
字体颜色
字体颜色代码
js代码
需要参考，vue，
变量 = {
：[]，
:[
“＃000”，
“#”，
“#”，
“#”，
“#”，
“#”，
“#”，
“#”，
“#”，
“#”，
“#”，
“#”，
“#”，
“#”开发小程序编辑器，
“#”，
“#fff”
],
：真的
};
//初始化vue
var = ({
el: '.vue-',
数据： ，
：{
//生成一个
：（）{
“文件”+；
},
：（字体）{
变量=“”；
变量=18；
+= 字体大小 * 3;
+= “字体大小：” + + “px;”
if (font.== 1) += "font-: 粗体;"
if (font.del == 1) += "文本-:行-;"
if (font.line == 1) += "文本-:;"
if (font.== 1) += "text-: ;"
if (font.) += (":" + font.+ ";");
if (font.) += (":;-:" + font.+ ";");
;
},
//字体颜色
：（字体）{
变量=“”；
+=“：”；
+= 字体。；
+=“；”；
+=“-：”；
+= 字体。；
+=“；”；
;
},
//字体背景颜色
：（）{
“-：”+；
},
//加粗或取消嘉措
：（）{
.[].字体。 = (.[].font.== 1 ? 0 : 1);
},
//增加字体大小
：（）{
.[].font.size++;
},
//缩小字体
：（）{
。[]。字体大小 - ;
},
//删除行
：（）{
.[].font.del = (.[].font.del == 1 ? 0 : 1);
},
//强调
：（）{
.[].font.line = (.[].font.line == 1 ? 0 : 1);
},
//居中显示
：（）{
.[].字体。 = (.[].font.== 1 ? 0 : 1);
},
：（）{
.[].字体。 = (.[].font.== 1 ? 0 : 1);
},
//选择字体颜色
: (,) {
.[].字体。 = ;
这。（）;
},
//隐藏颜色选择框
：（）{
if (. && .. > && .[]. == 1)
.[].字体。 = 0;
},
//上传图片
：（）{
//用于强制重新渲染。file用于清除之前的文件^_^
。 = ;
//添加组ID，方便识别上传完成后应该更新哪些数据。
var = guid();
var that = this;
var = "文件" + ;
var = $("#" + )[0].;
for (var i = 0; i < .; i++) {
( + i, 2, );
.({
url: '@Url.("~/img/ay?path=")', //文件上传的服务器端请求地址
:, //是否需要安全协议，一般设置为
:, //文件上传域ID
: 'json', //返回值类型一般设置为json
: (data) //服务器成功响应处理函数
//var = JSON.(数据);
。 =真；
var = 数据；
。日志（）;
如果（.==“1”）{
变量 j = 0;
for (var i = 0; i < ..; i++) {
if (.[i]. && .[i]. == ) {
。[我]。 = "@Url.("~")" + .Data[j].(1);
。[我]。 = 1；
j++;
。日志（）;
else("上传失败！");
},
:(data)//服务器响应失败处理函数
（“上传失败！”）;
});
},
//升序模块
：（）{
如果（> 0）{
var = .[];
..(, 1);
..( - 1, 0, );
},
//删除模块
：（）{
如果（+ 1 <..）{
var = .[];
..(, 1);
..( + 1, 0, );
},
//删除模块
：（）{
..(, 1);
},
//添加一个新模块
： （， 类型， ） {
var = 空；
（类型） {
情况1：
= {
: 1,
：“”，
字体：{
size: 0, //每+1字体大小，字体+2px -1同时减小
: 0, //是否加粗
del: 0, //是否删除该行
line: 0, //是否加下划线
: 0, //是否居中
: "#000", //字体颜色
: "#fff", //字体颜色
: 0 //是否显示颜色选择框
};
;
案例2：
= {
: 2,
：“res/img/1.jpg”，
: 0 //是否上传成功
};
;
案例3：
= {
: 3,
：“”
};
;
:
('尚不支持');
;
如果 （） {
如果 （） 。 = ;
..(, 0, );
},
//用于防止冒泡的事件
: () { },
},
//实例调用后
：（）{
},
//el 被新创建的 vm.$el 替换，并在挂载到实例后调用该钩子。
：（）{
这个。$( () {
////。日志（）;
//var = this.$refs.;
//for (var i = 0; i < .; i++) {
//[我]。（）;
//}
})
});
后端（有些方法没有发布，以后有时间单独整理一个demo放到云盘上）
///
/// 批量上传商品详情图片
///
///