vue实现富文本编辑器

Vue实现富文本编辑器

Vue是一种流行的JavaScript框架，可以用于构建用户界面。在Vue中实现富文本编辑器是一个常见的需求，可以让用户在编辑内容时具有更多的自由度和灵活性。我们将介绍如何使用Vue来实现一个简单的富文本编辑器。

## 1. 富文本编辑器的基本结构

一个富文本编辑器通常由以下几个主要组件组成：

- 工具栏：用于提供各种编辑功能的按钮，如加粗、斜体、插入链接等。

- 编辑区域：用于显示和编辑文本内容的区域。

- 预览区域：用于预览编辑后的文本内容。

在Vue中，我们可以使用组件来表示这些不同的功能区域，并通过数据绑定来实现它们之间的交互。

## 2. 使用Vue实现富文本编辑器

我们需要创建一个Vue组件来表示整个富文本编辑器。在这个组件中，我们可以定义工具栏、编辑区域和预览区域等子组件，并通过数据绑定来实现它们之间的交互。

`vue

在上面的代码中，我们使用了一个</span>元素来表示编辑区域，并通过<span style="color:#C7254E;background: #F9F2F4;">v-model</span>指令将其与<span style="color:#C7254E;background: #F9F2F4;">content</span>数据进行双向绑定。我们使用了一个<span style="color:#C7254E;background: #F9F2F4;"><div></span>元素来表示预览区域，并通过<span style="color:#C7254E;background: #F9F2F4;">v-html</span>指令将其与<span style="color:#C7254E;background: #F9F2F4;">content</span>数据进行绑定，以实时显示编辑后的文本内容。
接下来，我们需要创建一个<span style="color:#C7254E;background: #F9F2F4;">Toolbar</span>组件来表示工具栏。在这个组件中，我们可以定义各种编辑功能的按钮，并通过事件绑定来实现它们的功能。
<span style="color:#C7254E;background: #F9F2F4;"></span>`vue
<template>
  <div>
    <button @click="bold">加粗</button>
    <button @click="italic">斜体</button>
    <button @click="insertLink">插入链接</button>
  </div>
</template>
<script>
export default {
  methods: {
    bold() {
      document.execCommand('bold');
    },
    italic() {
      document.execCommand('italic');
    },
    insertLink() {
      const url = prompt('请输入链接地址：');
      if (url) {
        document.execCommand('createLink', false, url);
      }
    }
  }
};
</script>
</code></pre>
<p style="text-indent: 2em;">在上面的代码中，我们使用了<span style="color:#C7254E;background: #F9F2F4;"><button></span>元素来表示各种编辑功能的按钮，并通过<span style="color:#C7254E;background: #F9F2F4;">@click</span>事件绑定来调用相应的方法。在这些方法中，我们使用了<span style="color:#C7254E;background: #F9F2F4;">document.execCommand()</span>方法来执行具体的编辑操作，如加粗、斜体和插入链接等。</p>
<p style="text-indent: 2em;">## 3. 使用富文本编辑器</p>
<p style="text-indent: 2em;">要在Vue应用中使用富文本编辑器，我们只需将上述两个组件添加到相应的页面中即可。</p>
<p style="text-indent: 2em;"><span style="color:#C7254E;background: #F9F2F4;"></span>`vue</p>
<p style="text-indent: 2em;"><template></p>
<p style="text-indent: 2em;">  <div></p>
<p style="text-indent: 2em;">    <rich-text-editor></rich-text-editor></p>
<p style="text-indent: 2em;">  </div></p>
<p style="text-indent: 2em;"></template></p>
<p style="text-indent: 2em;"><script></p>
<p style="text-indent: 2em;">import RichTextEditor from './RichTextEditor.vue';</p>
<p style="text-indent: 2em;">export default {</p>
<p style="text-indent: 2em;">  components: {</p>
<p style="text-indent: 2em;">    RichTextEditor</p>
<p style="text-indent: 2em;">  }</p>
<p style="text-indent: 2em;">};</p>
<p style="text-indent: 2em;"></script></p>

<p style="text-indent: 2em;">在上面的代码中，我们使用了一个<span style="color:#C7254E;background: #F9F2F4;"><rich-text-editor></span>组件来表示富文本编辑器，并将其添加到页面中。</p>
<p style="text-indent: 2em;">现在，当用户在编辑区域中进行编辑时，可以通过工具栏中的按钮来实现各种编辑功能。编辑后的内容将实时显示在预览区域中。</p>
<p style="text-indent: 2em;">通过Vue实现富文本编辑器可以提供更好的用户体验和编辑功能。我们可以使用Vue的组件和数据绑定来构建富文本编辑器的各个功能区域，并通过事件绑定来实现具体的编辑操作。使用富文本编辑器可以使用户在编辑内容时更加方便和灵活。</p>
</div>
              <div class="tag-wrap" style="margin: 30px auto 0;width: 810px;display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;">
                <span class="tag-label" style="font-size: 16px; line-height: 22px;margin-right: 6px;">tags:</span>                <a id="tag_click" target="_blank" style="display: inline-block" href="http://www.mobiletrain.org/tag-0-1.html">vue富文本框</a>
                              </div>
              <div class="con-left-bottom">
                声明：本站稿件版权均属千锋教育所有，未经许可不得擅自转载。
              </div>
              <div class="left-form">
                <div class="left-form-left">
                  <div class="h3">10年以上业内强师集结，手把手带你蜕变精英</div>
                  <div class="list-form-item">
                    <i class="ypfont yp-name"></i>
                    <input type="text" placeholder="您的姓名" name="realname" id="realname" autocomplete="off" />
                  </div>
                  <div class="list-form-item list-form-item2">
                    <i class="ypfont yp-shouji"></i>
                    <input type="text" placeholder="您的电话" name="realphone" id="phone" autocomplete="off" />
                  </div>
                  <div class="h4">请您保持通讯畅通，专属学习老师24小时内将与您1V1沟通</div>
                  <div class="list-submit">
                    免费领取<br /><i class="ypfont yp-dianjitianjia"></i>
                  </div>
                </div>
                <div class="left-form-right">
                  <div class="h3">今日已有<span>369</span>人领取成功</div>
                  <div class="swiper-container swiper-phone swiper-no-swiping">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        刘同学 138****2860 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        王同学 131****2015 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        张同学 133****4652 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        李同学 135****8607 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        杨同学 132****5667 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        岳同学 134****6652 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        梁同学 157****2950 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        刘同学 189****1015 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        张同学 155****4678 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        邹同学 139****2907 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        董同学 138****2867 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        周同学 136****3602 刚刚成功领取
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="c_page_bottom">
                            <div class="c_page_bottom_item">
                <div class="c_page_bottom_item_up"></div>
                <p>上一篇</p>
                <a href="http://www.mobiletrain.org/about/BBS/154077.html" title="154080" target="_blank">vue实现打印预览功能</a>
              </div>
                            <div class="c_page_bottom_item">
                <div class="c_page_bottom_item_next"></div>
                <p>下一篇</p>
                <a href="http://www.mobiletrain.org/about/BBS/154081.html" target="_blank" title="154080">vue子组件向父组件传值绑定</a>
              </div>
                          </div>
            <div class="left-ad">
              <a href="javascript:;" onclick="open53_pc()" rel="nofollow" class="left-ad-btn">
                免费打包获取<i class="ypfont yp-dianjitianjia"></i>
              </a>
            </div>
            <!-- <div class="article">
					<div class="article-left">
						<h3 class="art-tit">猜你喜欢<span>LIKE</span></h3>
						<div class="art-con">
												<a href="http://www.mobiletrain.org/zcjy/linux/136992.html" target="_blank" class="art-item">
							<div class="art-item-img">
							<img src="/2023/0428/1682660765277.png" alt="" />
							</div>
							<div class="art-item-info">
							<h4>云计算技术就业前景以及发展方向怎样？</h4>
							<span>
								<i class="ypfont yp-shijian"></i>
								2023-08-07							</span>
							</div>
						</a>
												<a href="http://www.mobiletrain.org/zcjy/html5/136991.html" target="_blank" class="art-item">
							<div class="art-item-img">
							<img src="/2023/0428/1682660577662.png" alt="" />
							</div>
							<div class="art-item-info">
							<h4>HTML5开发就业前景以及发展方向怎样？</h4>
							<span>
								<i class="ypfont yp-shijian"></i>
								2023-08-07							</span>
							</div>
						</a>
												<a href="http://www.mobiletrain.org/zcjy/bigdata/136903.html" target="_blank" class="art-item">
							<div class="art-item-img">
							<img src="/2023/0428/1682660971839.png" alt="" />
							</div>
							<div class="art-item-info">
							<h4>大数据数据分析目前就业前景如何？</h4>
							<span>
								<i class="ypfont yp-shijian"></i>
								2023-08-07							</span>
							</div>
						</a>
												</div>
					</div>
					<div class="article-right">
						<h3 class="art-tit">最新文章<span>NEW</span></h3>
						<div class="art-con">
												<a href="http://www.mobiletrain.org/about/BBS/176899.html" target="_blank" class="art-item">
							<div class="art-item-img">
							<img src="/tywzt/tongyong1.jpg" alt="" />
							</div>
							<div class="art-item-info">
							<h4>抖音小店怎么制作定向链接呢</h4>
							<span>
								<i class="ypfont yp-shijian"></i>
								2023-09-22							</span>
							</div>
						</a>
												<a href="http://www.mobiletrain.org/about/BBS/176881.html" target="_blank" class="art-item">
							<div class="art-item-img">
							<img src="/tywzt/ty53.jpg" alt="" />
							</div>
							<div class="art-item-info">
							<h4>开个抖音小店怎么样才能赚钱呢</h4>
							<span>
								<i class="ypfont yp-shijian"></i>
								2023-09-22							</span>
							</div>
						</a>
												<a href="http://www.mobiletrain.org/about/BBS/176875.html" target="_blank" class="art-item">
							<div class="art-item-img">
							<img src="/tywzt/ty35.jpg" alt="" />
							</div>
							<div class="art-item-info">
							<h4>抖音小店怎么关闭退保证金提醒功能</h4>
							<span>
								<i class="ypfont yp-shijian"></i>
								2023-09-22							</span>
							</div>
						</a>
												</div>
					</div>
					</div> -->
            <div class="article article-hot" style="margin-top: 20px">
              <div class="article-tit-box">
                <div class="art-tit h3">
                  相关推荐<span class="art-hot">HOT</span>
                </div>
                <!-- <a href="javascript:;" onclick="open53_pc()">更多>></a> -->
              </div>
              <div class="art-con">
                                <a href="http://www.mobiletrain.org/about/BBS/176906.html" target="_blank" class="art-item">
                  <div class="art-item-img">
                    <img src="/tywzt/ty46.jpg" alt="" />
                  </div>
                  <div class="art-item-info">
                    <div class="h4">抖音小店运营模式是什么</div>
                    <p>
                      随着短视频平台的火爆，抖音已成为快速崛起的社交电商新兴平台，吸引越来越多用户和商家的关注。由于抖音的特殊功能，一些普通用户和商家可以通...<span>详情>></span>
                    </p>
                    <span>2023-09-22 11:34:06</span>
                  </div>
                </a>
                                <a href="http://www.mobiletrain.org/about/BBS/176876.html" target="_blank" class="art-item">
                  <div class="art-item-img">
                    <img src="/tywzt/tongyong16.jpg" alt="" />
                  </div>
                  <div class="art-item-info">
                    <div class="h4">抖音小店在线支付的钱在哪里查询</div>
                    <p>
                      随着数字化时代的发展，各种新兴的购物方式也层出不穷。其中，抖音小店是近年来流行起来的一种线上购买方式，它不仅带有社交属性，还具备许多便...<span>详情>></span>
                    </p>
                    <span>2023-09-22 11:16:42</span>
                  </div>
                </a>
                                <a href="http://www.mobiletrain.org/about/BBS/176861.html" target="_blank" class="art-item">
                  <div class="art-item-img">
                    <img src="/tywzt/ty59.jpg" alt="" />
                  </div>
                  <div class="art-item-info">
                    <div class="h4">一个营业执照能注册几个抖音小店</div>
                    <p>
                      抖音小店已经成为了许多年轻人的主要购物场所，成为了这一代年轻人的新宠。随着互联网的快速发展，越来越多的人通过抖音小店开展自己的业务。当...<span>详情>></span>
                    </p>
                    <span>2023-09-22 11:06:14</span>
                  </div>
                </a>
                                <a href="http://www.mobiletrain.org/about/BBS/176845.html" target="_blank" class="art-item">
                  <div class="art-item-img">
                    <img src="/tywzt/ty32.jpg" alt="" />
                  </div>
                  <div class="art-item-info">
                    <div class="h4">抖音主页显示抖音小店怎么取消</div>
                    <p>
                      抖音小店是本着“让内容变现”的初心而生的，它让用户在看视频的同时购买直接出现在视频中的商品，使得越来越多的人开始依赖抖音小店消费。但是...<span>详情>></span>
                    </p>
                    <span>2023-09-22 10:58:13</span>
                  </div>
                </a>
                                <a href="http://www.mobiletrain.org/about/BBS/176827.html" target="_blank" class="art-item">
                  <div class="art-item-img">
                    <img src="/tywzt/ty57.jpg" alt="" />
                  </div>
                  <div class="art-item-info">
                    <div class="h4">开抖音小店怎么上传商品</div>
                    <p>
                      抖音小店是近年来火爆的社交电商平台之一，这款应用依托于抖音短视频的用户量和粘性，集成了个性化推荐、互动社群、购物体验等功能，为用户提供...<span>详情>></span>
                    </p>
                    <span>2023-09-22 10:40:04</span>
                  </div>
                </a>
                              </div>
            </div>
          </div>
        </div>
        <div class="con-right" style="position: relative" id="fixTop">
          <div class="swiper-container swiper1">
  <div class="swiper-wrapper">
    <a href="http://www.mobiletrain.org/ljc/" target="_blank" class="swiper-slide">
      <img src="http://www.mobiletrain.org/images_interview/b1.png" alt="" />
    </a>
    <a href="javascript:;" class="swiper-slide" onclick="open53_pc()">
      <img src="http://www.mobiletrain.org/images_interview/b2.png" alt="" />
    </a>
    <a href="javascript:;" class="swiper-slide" onclick="open53_pc()">
      <img src="http://www.mobiletrain.org/images_interview/b3.png" alt="" />
    </a>
  </div>
  <div class="swiper-pagination swiper-pagination1"></div>
</div>
          <div class="content-right-box-child">
            <!-- 快速通道 -->
            <div class="con-right-rywd">
              <div class="tk-tit h3">
                <a class="left" rel="nofollow" href="javascript:;" onclick="open53_pc()"><i class="ypfont yp-rocket-full"></i>快速通道</a>
                <a href="javascript:;" rel="nofollow" onclick="open53_pc()">更多>></a>
              </div>
              <ul class="kstd">
                <li>
                  <div class="h3">课程介绍</div>
                  <a href="javascript:;" rel="nofollow" onclick="open53_pc()">点击获取大纲</a>
                </li>
                <li>
                  <div class="h3">就业前景</div>
                  <a href="javascript:;" rel="nofollow" onclick="open53_pc()">查看就业薪资</a>
                </li>
                <li>
                  <div class="h3">学习费用</div>
                  <a href="javascript:;" rel="nofollow" onclick="open53_pc()">了解课程价格</a>
                </li>
                <li>
                  <div class="h3">优惠活动</div>
                  <a href="javascript:;" rel="nofollow" onclick="open53_pc()">领取优惠券</a>
                </li>
                <li>
                  <div class="h3">学习资源</div>
                  <a href="javascript:;" rel="nofollow" onclick="open53_pc()">领3000G教程</a>
                </li>
                <li>
                  <div class="h3">师资团队</div>
                  <a href="javascript:;" rel="nofollow" onclick="open53_pc()">了解师资团队</a>
                </li>
                <li>
                  <div class="h3">实战项目</div>
                  <a href="javascript:;" rel="nofollow" onclick="open53_pc()">获取项目源码</a>
                </li>
                <li>
                  <div class="h3">开班地区</div>
                  <a href="javascript:;" rel="nofollow" onclick="open53_pc()">查看来校路线</a>
                </li>
              </ul>
            </div>
            <div class="kbxx">
	<div class="sub-tit h4">
		<span class="left"><i class="ypfont yp-banjibaobiao"></i>开班信息</span>
		<div class="chooseBox">
			<div class="kbxx_showXq_btn">
				<span class="choose-xq">北京校区</span>
				<i class="icon icon-xiaosanjiao"></i>
			</div>
			<div class="kbxx_showXq_box">
				<ul data-courseid="13">
					<li data-cityid="10">北京校区</li>
<li data-cityid="6">大连校区</li>
<li data-cityid="4">广州校区</li>
<li data-cityid="8">成都校区</li>
<li data-cityid="13">杭州校区</li>
<li data-cityid="15">长沙校区</li>
<li data-cityid="21">合肥校区</li>
<li data-cityid="18">南京校区</li>
<li data-cityid="3">上海校区</li>
<li data-cityid="2">深圳校区</li>
<li data-cityid="7">武汉校区</li>
<li data-cityid="5">郑州校区</li>
<li data-cityid="11">西安校区</li>
<li data-cityid="12">青岛校区</li>
<li data-cityid="14">重庆校区</li>
<li data-cityid="19">太原校区</li>
<li data-cityid="20">沈阳校区</li>
<li data-cityid="24">南昌校区</li>
<li data-cityid="16">哈尔滨校区</li>
				</ul>
			</div>
		</div>
	</div>
	<ul class="des-right-classes ul3 swiper6 swiper-container swiper-no-swiping">
		<div class="swiper-wrapper"></div>
	</ul>
</div>
            <div class="con-right-rywd">
              <div class="rywd-tit h3">
                <i class="ypfont yp-weinituijian"></i>热门推荐
              </div>
              <div class="swiper3">
                                <a href="http://www.mobiletrain.org/about/BBS/176916.html" target="_blank">
                                    <div class="ypfont yp-zhiding"></div>
                                    <p>抖音小店怎么开店注册账号流程</p>
                  <span class="a11">沸</span>
                                  </a>
                                <a href="http://www.mobiletrain.org/about/BBS/176914.html" target="_blank">
                                    <div class="ypfont yp-1"></div>
                                    <p>抖音小店赚佣金怎么做</p>
                  <span class="a21">热</span>
                                  </a>
                                <a href="http://www.mobiletrain.org/about/BBS/176913.html" target="_blank">
                                    <div class="ypfont yp-2"></div>
                                    <p>抖音小店怎么改快递单号</p>
                  <span class="a31">热</span>
                                  </a>
                                <a href="http://www.mobiletrain.org/about/BBS/176908.html" target="_blank">
                                    <div class="ypfont yp-3"></div>
                                    <p>抖音小店怎么开通微信支付平台服务呢</p>
                  <span class="a41">新</span>
                                  </a>
                                <a href="http://www.mobiletrain.org/about/BBS/176906.html" target="_blank">
                                    <div class="a5">
                    4                  </div>
                                    <p>抖音小店运营模式是什么</p>
                                  </a>
                                <a href="http://www.mobiletrain.org/about/BBS/176899.html" target="_blank">
                                    <div class="a6">
                    5                  </div>
                                    <p>抖音小店怎么制作定向链接呢</p>
                                  </a>
                                <a href="http://www.mobiletrain.org/about/BBS/176897.html" target="_blank">
                                    <div class="a7">
                    6                  </div>
                                    <p>抖音小店怎么多开账户登录</p>
                                  </a>
                                <a href="http://www.mobiletrain.org/about/BBS/176892.html" target="_blank">
                                    <div class="a8">
                    7                  </div>
                                    <p>抖音小店怎么登录客服</p>
                                  </a>
                                <a href="http://www.mobiletrain.org/about/BBS/176887.html" target="_blank">
                                    <div class="a9">
                    8                  </div>
                                    <p>抖音小店怎么缴纳不了保证金</p>
                                  </a>
                                <a href="http://www.mobiletrain.org/about/BBS/176883.html" target="_blank">
                                    <div class="a10">
                    9                  </div>
                                    <p>抖音小店怎么设置免密支付功能</p>
                                  </a>
                              </div>
              <!-- <div class="swiper-button-prev swiper-button-prev3">
								<i class="indexfont index-youjiantou-copy"></i>
							</div>
							<div class="swiper-button-next swiper-button-next3">
								<i class="ypfont yp-huanyipi"></i>换一批
							</div> -->
            </div>
            <!-- 面试题库 -->

            <a href="javascript:;" rel="nofollow" onclick="open53_pc()" class="right-ad">
              <img src="/images/right-ad.jpg" alt="" /></a>
            <!-- 技术干货 -->
              <div class="con-right-rywd">
              <div class="tk-tit h3">
                <a class="left"  href="http://www.mobiletrain.org/about/BBS/" target="_blank"><i class="ypfont yp-fabujishu" ></i>技术干货</a>
                <a href="http://www.mobiletrain.org/about/BBS/" target="_blank">更多>></a>
              </div>
              <div class="swiper2 ">
                 
                  <a href="http://www.mobiletrain.org/about/BBS/258998.html" class="swiper-slide" target="_blank">
                    <div class="img-box">
                      <img
                        src="http://www.mobiletrain.org//tywzt/ty33.jpg"
                        alt=""
                      />
                    </div>
                    <div>
                      <div class="h3">如何实现服务器负载均衡</div>
                      <p>2023-12-06</p>
                    </div>
                  </a>
                  
                  <a href="http://www.mobiletrain.org/about/BBS/258997.html" class="swiper-slide" target="_blank">
                    <div class="img-box">
                      <img
                        src="http://www.mobiletrain.org//tywzt/tongyong12.jpg"
                        alt=""
                      />
                    </div>
                    <div>
                      <div class="h3">linux有哪些优势和劣势</div>
                      <p>2023-12-06</p>
                    </div>
                  </a>
                  
                  <a href="http://www.mobiletrain.org/about/BBS/258996.html" class="swiper-slide" target="_blank">
                    <div class="img-box">
                      <img
                        src="http://www.mobiletrain.org//tywzt/ty64.jpg"
                        alt=""
                      />
                    </div>
                    <div>
                      <div class="h3">linux需要驱动吗</div>
                      <p>2023-12-06</p>
                    </div>
                  </a>
                  
                  <a href="http://www.mobiletrain.org/about/BBS/258995.html" class="swiper-slide" target="_blank">
                    <div class="img-box">
                      <img
                        src="http://www.mobiletrain.org//tywzt/tongyong7.jpg"
                        alt=""
                      />
                    </div>
                    <div>
                      <div class="h3">android与linux的区别</div>
                      <p>2023-12-06</p>
                    </div>
                  </a>
                  
                  <a href="http://www.mobiletrain.org/about/BBS/258994.html" class="swiper-slide" target="_blank">
                    <div class="img-box">
                      <img
                        src="http://www.mobiletrain.org//tywzt/ty64.jpg"
                        alt=""
                      />
                    </div>
                    <div>
                      <div class="h3">如何搭建基于容器的深度学习环境</div>
                      <p>2023-12-06</p>
                    </div>
                  </a>
                                </div>
            </div>

            <!-- 职场就业 -->
              <div class="con-right-rywd">
              <div class="tk-tit h3">
                <a class="left"  href="http://www.mobiletrain.org/zcjy/" target="_blank"><i class="ypfont yp-minzhengtubiao1-46" ></i>职场就业</a>
                <a href="http://www.mobiletrain.org/zcjy/" target="_blank">更多>></a>
              </div>
              <div class="swiper2 ">
                 
                  <a href="http://www.mobiletrain.org/zcjy/wlaq/259025.html" class="swiper-slide zcjy" target="_blank">
                    <div class="img-box">
                      <img
                        src="http://www.mobiletrain.org//tywzt/ty41.jpg"
                        alt=""
                      />
                    </div>
                    <div>
                      <div class="h3">网络安全软件开发的就业前景</div>
                      <p>2023-12-09</p>
                    </div>
                  </a>
                  
                  <a href="http://www.mobiletrain.org/zcjy/python/259024.html" class="swiper-slide zcjy" target="_blank">
                    <div class="img-box">
                      <img
                        src="http://www.mobiletrain.org//tywzt/tongyong6.jpg"
                        alt=""
                      />
                    </div>
                    <div>
                      <div class="h3">学会python工程师后的就业前景</div>
                      <p>2023-12-09</p>
                    </div>
                  </a>
                  
                  <a href="http://www.mobiletrain.org/zcjy/java/259023.html" class="swiper-slide zcjy" target="_blank">
                    <div class="img-box">
                      <img
                        src="http://www.mobiletrain.org//tywzt/tongyong2.jpg"
                        alt=""
                      />
                    </div>
                    <div>
                      <div class="h3">学会java工程师后的就业前景</div>
                      <p>2023-12-09</p>
                    </div>
                  </a>
                  
                  <a href="http://www.mobiletrain.org/zcjy/linux/136992.html" class="swiper-slide zcjy" target="_blank">
                    <div class="img-box">
                      <img
                        src="http://www.mobiletrain.org//2023/0428/1682660765277.png"
                        alt=""
                      />
                    </div>
                    <div>
                      <div class="h3">云计算技术就业前景以及发展方向怎样？</div>
                      <p>2023-08-07</p>
                    </div>
                  </a>
                                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <link rel="stylesheet" href="/css/css3451.css">
<div class="edu-footer">
  <div class="base">
    <div class="con-left">
      <img src="http://www.mobiletrain.org/images_index/new-logo-white.png" class="edu-footer-logo" />
      <p class="edu-footer-sologan">初心至善  匠心育人</p>
      <p class="edu-footer-phoneNumber">
        <i class="icon icon-dianhua1"></i>400-811-9990
        <a href="javascript:;" onclick="open53_pc()" rel="nofollow">24小时在线咨询</a>
      </p>
    </div>
    <div class="con-right">
      <div class="edu-footer-about-links">
        <div class="list1 list">
          <div class="h4">关于千锋</div>
          <ul>
            <li>
              <a href="http://www.mobiletrain.org/about/" target="_blank" rel="nofollow">千锋简介</a>
            </li>
            <li>
              <a href="http://www.mobiletrain.org/about/contact.html" target="_blank" rel="nofollow">联系我们</a>
            </li>
            <li>
              <a href="http://www.mobiletrain.org/qynx/" target="_blank" rel="nofollow">企业服务</a>
            </li>
            <li>
              <a href="http://www.mobiletrain.org/topic/fygy.html" target="_blank" rel="nofollow">锋益公益</a>
            </li>
          </ul>
        </div>
        <div class="list1 list">
          <div class="h4">学习资源</div>
          <ul>
            <li>
              <a href="http://prj.qfedu.com/" target="_blank" rel="nofollow">项目库</a>
            </li>
            <li>
              <a href="http://www.mobiletrain.org/open/" target="_blank" rel="nofollow">公开课</a>
            </li>
            <li>
              <a href="http://video.mobiletrain.org/" target="_blank" rel="nofollow">视频教程</a>
            </li>
            <!-- <li>
              <a href="http://www.mobiletrain.org/book/index.html?type=1" target="_blank" rel="nofollow">原创丛书</a>
            </li> -->
          </ul>
        </div>
        <div class="list1 list">
          <div class="h4">服务指南</div>
          <ul>
            <li>
              <a href="javascript:;" onclick="open53_pc()" rel="nofollow">报名咨询</a>
            </li>
            <li>
              <a href="javascript:;" onclick="open53_pc()" rel="nofollow">校区分布</a>
            </li>
            <li>
              <a href="http://www.mobiletrain.org/sitemap.html" target="_blank" rel="nofollow">网站地图</a>
            </li>
            <li>
              <a href="http://www.mobiletrain.org/privacyPolicy.html" target="_blank" rel="nofollow">隐私声明</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="qrcode-box">
        <div class="qrcode flex-center">
          <img src="/wzt/qr-code-new.png" alt="千锋教育" />
        </div>
        <div class="h4">千锋学习站 | <span>随时随地免费学</span></div>
      </div>
      <div class="qrcode-box">
        <div class="qrcode flex-center">
          <img src="http://www.mobiletrain.org/images_index/qr-code-new2.png" alt="千锋教育" />
        </div>
        <div class="h4">扫一扫进入千锋手机站</div>
      </div>
    </div>
  </div>
</div>
  <div class="footer-link">
  <div class="base">
    <div class="links-tab">
      <span class="active">热门课程</span>
      <!-- <span>热点话题</span> -->
      <!-- <span>学习线路图</span> -->
      <!-- <span>千锋全国</span> -->
    </div>
    <div class="links-a active">
      <!-- 编辑配置cms -->
      <a href="http://www.mobiletrain.org/" target="_blank">IT培训</a>
<a href="http://java.mobiletrain.org/" target="_blank">java培训</a>
<a href="http://www.mobiletrain.org/special/harmonyos.html" target="_blank">鸿蒙开发培训</a>
<a href="http://www.mobiletrain.org/special/emb.html" target="_blank">嵌入式培训</a>
<a href="http://www.mobiletrain.org/special/python.html" target="_blank">python培训</a>
<a href="http://www.mobiletrain.org/special/ui.html" target="_blank">UI培训</a>
<a href="http://www.mobiletrain.org/special/test.html" target="_blank">软件测试培训</a>
<a href="http://www.mobiletrain.org/special/linux.html" target="_blank">云计算培训</a>
<a href="http://www.mobiletrain.org/special/bigdata.html" target="_blank">大数据培训</a>
<a href="http://www.mobiletrain.org/special/wlw.html" target="_blank">物联网培训</a>
<a href="http://www.mobiletrain.org/special/wlw.html" target="_blank">游戏开发培训</a>
<a href="http://www.mobiletrain.org/special/qmt.html" target="_blank">全媒体运营培训</a>
<a href="http://www.mobiletrain.org/special/ysjj.html" target="_blank">影视剪辑培训</a>
<a href="http://www.mobiletrain.org/special/wlaq.html" target="_blank">网络安全培训</a>
    </div>
    <!-- <div class="links-a"> -->
    <!-- 编辑配置cms3490 -->
    <!-- </div> -->
    <!-- <div class="links-a">
       编辑配置cms 3442
    </div> -->
    <!-- <div class="links-a"> -->
    <!-- 编辑配置cms3443 -->
    <!-- </div> -->
  </div>
  <div class="copyright">
  <p class="copyright-p">
    Copyright 2011-2025
    <a href="javascript:;" rel="nofollow" title="千锋互联">北京千锋互联科技有限公司</a>
    <a href="https://beian.miit.gov.cn/" rel="nofollow">
      京ICP备12003911号-3
    </a>
    <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802035719" rel="nofollow"
      style="display: inline-block;text-decoration: none;height: 20px;line-height: 20px;">
      <img src="/wzt/beian.png" />京公网安备 11010802030320号
    </a>
  </p>
  <p>千锋教育 运营主体：北京千锋互联科技有限公司，属具备计算机技术培训资质的教育培训机构。</p>
</div>
</div>
  <script src="http://www.mobiletrain.org/js/jquery.min.js"></script>
  <script src="http://www.mobiletrain.org/js/swiper4.5.0.min.js"></script>
  <script src="http://www.mobiletrain.org/js/common1.js?111"></script>
  <script src="/js/highlight.min.js"></script>
  <script>
    hljs.highlightAll();
  </script>
  <script>
    $(document).ready(function () {
      var href = $("#tag_click").attr("href");
      if (href && href.indexOf("-0-") != -1) {
        var tag_code = $("#tag_click").html();
        $.ajax({
          url: "http://app.mobiletrain.org/tags.php",
          type: "get",
          dataType: "json",
          data: { tag_code: tag_code },
          success: function (data) {
            $("#tag_click").attr(
              "href",
              "http://www.mobiletrain.org/tag-" + data + "-1.html"
            );
          },
        });
      }
    });
    if (
      location.href.indexOf("/about/info/") > -1 ||
      location.href.indexOf("/about/news/") > -1
    ) {
      document
        .getElementsByClassName("topicactive")[0]
        .classList.remove("topicactive");
      document
        .getElementsByClassName("interviewactive")[0]
        .classList.remove("interviewactive");
    } else if (location.href.indexOf("/interview/") > -1) {
      document
        .getElementsByClassName("topicactive")[0]
        .classList.remove("topicactive");
      document
        .getElementsByClassName("xwzxactive")[0]
        .classList.remove("xwzxactive");
    } else {
      document
        .getElementsByClassName("xwzxactive")[0]
        .classList.remove("xwzxactive");
      document
        .getElementsByClassName("interviewactive")[0]
        .classList.remove("interviewactive");
    }

    new Swiper(".swiper1", {
      loop: true,
      autoplay: true,
      pagination: {
        el: ".swiper-pagination1",
      },
    });
    // new Swiper(".swiper3", {
    //   slidesPerView: 14,
    //   slidesPerGroup: 14,
    //   spaceBetween: 20,
    //   loop: true,
    //   direction: "vertical",
    //   // navigation: {
    //   //   nextEl: ".swiper-button-next3",
    //   //   prevEl: ".swiper-button-prev3",
    //   // },
    // });
    // new Swiper(".swiper4", {
    //   slidesPerView: 6,
    //   slidesPerGroup: 6,
    //   spaceBetween: 21,
    //   loop: true,
    //   direction: "vertical",
    //   navigation: {
    //     nextEl: ".swiper-button-next4",
    //     prevEl: ".swiper-button-prev4",
    //   },
    // });
    // new Swiper(".swiper-phone", {
    //   slidesPerView: 4,
    //   autoplay: true,
    //   spaceBetween: 0,
    //   loop: true,
    //   direction: "vertical",
    // });

    // $(".select_txt,.selet_open").hover(function (event) {
    //   $(".option").hide();
    //   $(this).siblings(".option").show();
    //   $(".select_box").removeClass("uiChooseActiveS");
    //   $(this).parent(".select_box").addClass("uiChooseActiveS");
    // });
    // $(document).click(function (event) {
    //   var eo = $(event.target);
    //   if (
    //     $(".select_box").is(":visible") &&
    //     eo.attr("class") != "option" &&
    //     !eo.parent(".option").length
    //   )
    //     $(".option").hide();
    //   $(".select_box").removeClass("uiChooseActiveS");
    // });
    // $(".option a").click(function () {
    //   var value = $(this).text();
    //   $(this).parent().siblings(".select_txt").text(value);
    //   $(".select_value").val(value);
    //   $(".option").hide();
    //   $(".select_box").removeClass("uiChooseActiveS");
    // });
    // $(".option").each(function (d) {
    //   var optionSize = 6;
    //   var optionLiHeight = $(".option a").height();
    //   var optionVarS = $(this).find("a").length - 2;
    //   console.log(optionVarS, optionSize);
    //   if (optionVarS > optionSize) {
    //     var optionSheight = 175;
    //     $(this).height(optionSheight);
    //   } else {
    //     var optionLiTal = optionVarS * optionLiHeight;
    //     $(this).height(optionLiTal);
    //   }
    // });
    // $(".option,.uiChooseTable,.mod_select ").mouseleave(function () {
    //   $(".select_box").removeClass("uiChooseActiveS");
    //   $(".option").hide();
    // });
    // $(".option a").each(function () {
    //   $(this).html("第" + $(this).text() + "页");
    // });
    new Swiper(".swiper-news", {
      autoplay: true,
      loop: true,
      direction: "vertical",
    });
    $(".footer-link .links-tab span").click(function () {
      $(this).addClass("active").siblings().removeClass("active");
      $(".footer-link .links-a").removeClass("active");
      $(".footer-link .links-a").eq($(this).index()).addClass("active");
    });
    // 开班信息模块
    function kbxx () {
      // var courseId =
      //   arguments.length > 0 && arguments[0] !== undefined
      //     ? arguments[0]
      //     : 13;
      var cityId = arguments[0] !== undefined ? arguments[0] : 10;

      $.ajax({
        url: "https://owzsapi.qfedu.com/v1/api/openApiRestController/getAllClass?type=1",
        type: "GET",
        success: function success (res) {
          var r = "";
          var curTime = new Date().getTime();
          var filterArr = res.data.filter(function (v) {
            return v.cityId == cityId;
          });
          console.log(filterArr);
          filterArr.reverse().forEach(function (v, idx) {
            // 最大条数
            if (idx > 14) return;
            // 判断时间
            var timeMode = "预约占座";
            var kbTime = new Date(v.beginTime).getTime();
            // 一个月
            if (kbTime - curTime > 2592000000) {
              timeMode = "预约占座";
            }
            if (kbTime - curTime > 0 && kbTime - curTime < 2642268030) {
              timeMode = "即将报满";
            }
            if (kbTime - curTime < 0) {
              timeMode = "爆满开班";
            }

            r +=
              "<li class='swiper-slide'>\n        <a href='javascript:;' rel='nofollow'  onclick='open53_pc()'>\n        <span>" +
              (v.name.replace(v.cityName, "").split("班")[0] + "班") +
              "</span>\n          <span>" +
              v.beginTime +
              "</span>\n          <span data-mode='" +
              (timeMode === "即将报满"
                ? 0
                : timeMode === "爆满开班"
                  ? 2
                  : 1) +
              "'>" +
              timeMode +
              " " +
              (timeMode === "即将报满" ? "" : "") +
              "</span>\n          </a>\n          </li>";
          });

          $(".des-right-classes .swiper-wrapper").html(r);
          new Swiper(".swiper6", {
            slidesPerView: 5,
            slidesPerGroup: 5,
            spaceBetween: 10,
            loop: true,
            autoplay: true,
            direction: "vertical",
          });
        },
      });
    }
    kbxx(10);
    $(".kbxx_showXq_btn").click(function () {
      $(".kbxx_showXq_box").css("display", "block");
    });
    $(".kbxx_showXq_box ul li").click(function () {
      kbxx($(this).data("cityid"));
      $(".choose-xq").html($(this).context.innerText);
      $(".kbxx_showXq_box").css("display", "none");
    });

    /******************表单提交start********************/
    // (function () {
    //   var timer = setInterval(function () {
    //     if (window.$) {
    //       clearInterval(timer);
    //       $(".list-submit").click(function () {
    //         var params = {
    //           name: $("#realname").val(),
    //           phone: $("#phone").val(),
    //         };
    //         var phReg = /^[\u4e00-\u9fa5a-zA-Z0-9-]{2,20}$/;
    //         var nameReg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]8$/;
    //         // if (!nameReg.test($("#realname").val())) {
    //         //   alert("请正确输入姓名");
    //         //   return;
    //         // }

    //         if (!phReg.test($("#phone").val())) {
    //           alert("请正确输入手机号");
    //           return;
    //         }

    //         $.ajax({
    //           type: "POST",
    //           contentType: "application/json",
    //           url:
    //             "http://api-newzs.1000phone.net//v1/api/seoFormController/add",
    //           data: JSON.stringify(params),
    //           success: function success(res) {
    //             alert(res.msg);
    //           },
    //         });
    //       });
    //     }
    //   }, 1000);
    // })();
    /******************表单提交end********************/

    console.log($(".content-left-box-child").height());
    console.log($(".content-right-box-child").height());
    if (
      $(".content-left-box-child").height() >
      $(".content-right-box-child").height()
    ) {
      $(".content-right-box-child").addClass("sticky");
    } else if (
      $(".content-left-box-child").height() <
      $(".content-right-box-child").height()
    ) {
      $(".content-left-box-child").addClass("sticky");
    }

      // var bot =
      // 	$(".con-right-rywd").offset().top +
      // 	$(".con-right-rywd").outerHeight() -
      // 	$(window).height() +
      // 	30;
      // console.log(bot);
      // var left = $("#fixTop").offset().left;
      // $(document).scroll(function () {
      // 	var scroH = $(document).scrollTop();
      // 	var footTop = $(".edu-footer").offset().top - $(window).height();
      // 	if (scroH > bot) {
      // 		$("#fixTop").addClass("rig_fixed");
      // 		$("#fixTop").css({ left: left });
      // 		if (scroH > footTop) {
      // 			$("#fixTop").addClass("rig_bottom");
      // 			$("#fixTop").css({ left: "909px" });
      // 		} else {
      // 			$("#fixTop").removeClass("rig_bottom");
      // 			// $("#fixTop").css({ left: "auto" });
      // 		}
      // 	} else {
      // 		$("#fixTop").removeClass("rig_fixed");
      // 		$("#fixTop").removeClass("rig_bottom");
      // 		// $("#fixTop").css({ left: "auto" });
      // 	}
      // });
  </script>
</body>

</html>