项目实践：羽毛编辑器

发表于

首发于羽毛工作室官方博客——和有趣的人做尽有趣的事！

整理项目的开发过程，以便之后复盘。

HTML部分

核心组件ID

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
按钮组1
	渲染按钮 id="allxuanran"
	保存按钮 id="allbaocun"
	清空按钮 id="allqingkong"

轮播组件 id="lunbo"
指令输入区 id="text"

按钮组2
	一键排版按钮 id="ceshi"
	展开工具栏按钮 id="gongjv"
	记事本按钮 id="gongjv1"

工具栏 id="show" （控制显示隐藏）
	组件输入区 id="one"
	样式渲染按钮 id="xuanran"
	复制代码按钮 id="zujian"
	
	查找内容输入框 id="cz"
	替换内容输入框 id="th"
	
源码输入区 id="h5"

按钮组3
	复制代码 id="copyhtml"

版本号 id="banben"

CSS部分

采用layui框架

1
<link rel="stylesheet" href="layui/css/layui.css">

格栅框架嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
格栅样式框架
	空格 layui-col-md12
	按钮组1 layui-col-md6
	轮播组 layui-col-md6
	空行 layui-col-md12
	左显示区 layui-col-md6
		指令输入区
		按钮组2
		工具栏（默认隐藏div）style="display:none"
			单独渲染模块
			查找替换模块
	右显示区 layui-col-md6
		源码输入区
		按钮组3
	空行 layui-col-md11
	版本号 layui-col-md1

JS部分

全局变量

1
2
3
4
5
6
7
var banbenhao = '羽毛编辑器 V1.5.0';
var comtext = localStorage.getItem(1); // 存储指令的字符串
var h5text = localStorage.getItem(2); // 储存源码的字符串
var pcttext = ''; // 存储预览代码的字符串
var opn = '110001'; // 全局样式库设置
var isok = true; //工具栏显示状态

初始化

1
2
3
document.getElementById('text').value = comtext; // 初始化指令
document.getElementById('h5').value = h5text; // 初始化源码
document.getElementById('banben').innerText = banbenhao; // 自动显示版本号
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//初始化弹出一个公告层
layer.open({
    type: 1,
    title: false, //不显示标题栏
    closeBtn: false,
    area: '300px;',
    shade: 0.8,
    id: 'LAY_layuipro', //设定一个id，防止重复弹出
    btn: ['查看文档', '直接使用'],
    btnAlign: 'c',
    moveType: 1, //拖拽模式，0或者1
    content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">' + banbenhao + '<br/><br/>特别鸣谢：135编辑器、Layui技术支持<br/><br/>羽毛工作室版权所有<br/><br/>首次使用强烈建议阅读下方 “说明文档” 进行简单的学习。</div>',
    success: function (layero) {
        var btn = layero.find('.layui-layer-btn');
        btn.find('.layui-layer-btn0').attr({
            href: 'http://blog.t-ssm.com/2021/04/11/14-33-09/',
            target: '_blank'
        });
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//  文字滚动动画效果
layui.use('carousel', function () {
    var carousel = layui.carousel;
    //建造实例
    carousel.render({
        elem: '#lunbo',
        width: '100%', //设置容器宽度
        height: '48px',
        interval: '3000', // 设置滚动间隔时间，毫秒 
        indicator: 'none',
        arrow: 'none', //始终显示箭头
        anim: 'updown' //切换动画方式
    });
});

主要函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
shuoming() 样式库弹窗 （layui弹页面）
dld1() 源码保存到本地txt文件
sousuo() 调用搜狗微信搜索（layui弹输入框）
tssm() 修改样式库全局变量（layui弹输入窗）
rdtssm() 通过匹配样式库全局变量以不同方式处理文本实现一键排版
copy(c) 复制内容函数 c=字符串
play() 指令与源码手动同步
remove() 指令渲染为源码
pct() 源码预览（layui弹窗页面）
adv() 循环方式查找替换全部内容
adv1() 高级替换：查找替换编号内容
adv2() 高级替换：图片地址替换
add() 存储指令和源码数据
text(a) 处理字符串 a=字符串

重要功能实现

按钮控制工具栏显示与隐藏

1
2
3
4
5
6
7
8
9
10
isok = !isok;
    if (isok) {
        document.getElementById('show').style.display = 'none';
        document.getElementById('text').rows = 27;
        document.getElementById('gongjv').innerText = '展开工具栏';
    } else {
        document.getElementById('show').style.display = 'inline';
        document.getElementById('text').rows = 6;
        document.getElementById('gongjv').innerText = '隐藏工具栏';
    };

存储和调用数据

1
2
3
4
5
a = 数字
b = 字符串
localStorage.setItem(a, b); 存储数据，声明周期为永久，除非手动删除
localStorage.removeItem(a); 删除数据
localStorage.getItem(a); 调用数据

点击事件

1
2
3
4
5
6
7
document.getElementById('id').onclick = function () {
console.log('指定id的鼠标点击事件');
};

document.getElementById('id').onmouseover = function () {
console.log('指定id的鼠标停留事件');
};

一键排版样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function rd110001(txt) {
    // 查看文章有几段
    var num = 0;
    var outtxt = '';
    var outtxted0 = '';
    var txtlist = [].concat(txt.split('|'));//复制一个json数组
    // 头尾提取出来单独处理
    outtxt += '【头=' + txtlist[0] + '=尾】\n【】\n【线2】\n'; // 取用
    txtlist.splice(0, 1); // 删除
    num = txt.split('|').length - 1; // 取用了第一个值，所以要减1 才是最后一个值的正确位置
    outtxted0 += '【总=' + txtlist[num - 1] + '=结】'; // 取用
    txtlist.splice(num - 1, 1); // 删除
    num = txt.split('|').length - 2; // 删除了最后一个值，所以要再减1
    for (i = 0; i < num; i++) {
        var name = '【】\n【图】\n【】\n【文=' + txtlist[i] + '=字】\n';
        outtxt += name;
    };
    outtxt += '【】\n【线2】\n【】\n' + outtxted0 + '\n【】';
    //处理文字内容
    return outtxt
};

文字内容通过查找替换的方式实现渲染

1
2
.replace(/【】/g, '')
// 方括号中写入框架代码，后面的引号中写入html代码，参考上文实际应用