vue中使用codemirror

最新推荐文章于 2024-06-24 00:36:46 发布

计算机技术之指尖密码

最新推荐文章于 2024-06-24 00:36:46 发布

阅读量478

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/w1374401940/article/details/105818893

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

npm install vue-codemirror --save

import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/darcula.css'   //这个是你设置了什么主题，就要对应的在main.js中引入主题的css

<template>
  <div>
    <!--
    <share-HTMLTutorial></share-HTMLTutorial>
    <share-HTMLIntro></share-HTMLIntro>
    -->
    <share-HTMLEditors></share-HTMLEditors>
  </div>
</template>

<script>
import axios from "axios";
import HTMLTutorial from "./html/HTMLTutorial";
import HTMLIntro from "./html/HTMLIntro";
import HTMLEditors from "./html/HTMLEditors";
export default {
  name: "project-one",
  data() {
    return {
      seen: true,
      teams: []
    };
  },
  components: {
    "share-HTMLTutorial": HTMLTutorial,
    "share-HTMLIntro": HTMLIntro,
    "share-HTMLEditors": HTMLEditors
  },
  methods: {},
  created() {}
};
</script>

<style >
</style>

<template>
  <div>
    <codemirror ref="myCm" :value="codeData" :options="cmOptions"></codemirror>
  </div>
</template>

<script>
import { codemirror } from "vue-codemirror";
import axios from "axios";
export default {
  name: "project-one",
  data() {
    return {};
  },
  props: {
    codeData: "",
    cmOptions: Object
  },
  components: {
    codemirror: codemirror
  },
  methods: {},
  created() {}
};
</script>

<style>
.CodeMirror {
  height: auto !important;
  width: 800px !important;
}
</style>

<template>
  <div>
    <h4>HTML 编辑器</h4>
    <el-divider></el-divider>
    <h4>HTML 编辑器推荐</h4>
    <p>可以使用专业的 HTML 编辑器来编辑 HTML，菜鸟教程为大家推荐几款常用的编辑器：</p>
    <ul>
      <li>VS Code：https://code.visualstudio.com/</li>
      <li>Sublime Text：http://www.sublimetext.com/</li>
    </ul>
    <p>你可以从以上软件的官网中下载对应的软件，按步骤安装即可。</p>
    <p>接下来我们将为大家演示如何使用 VS Code 工具来创建 HTML 文件，其他两个工具操作步骤类似。</p>
    <el-divider></el-divider>
    <h4>实例</h4>
    <div class="tutorial-size">
      <share-CodeContent :codeData="codeData" :cmOptions="cmOptions"></share-CodeContent>
    </div>
    <el-divider></el-divider>
  </div>
</template>
<script>
import CodeContent from "../CodeContent";
export default {
  name: "HTMLEditors",
  data() {
    return {
      codeData:
        "<!DOCTYPE html>\n" +
        "<html>\n" +
        "<head>\n" +
        '<meta charset="utf-8">\n' +
        "<title>菜鸟教程(runoob.com)</title>\n" +
        "</head>\n" +
        "<body>\n" +
        "<h1>我的第一个标题</h1>\n" +
        "<li>我的第一个段落。</li>\n" +
        "</body>\n" +
        "</html>",
      cmOptions: {
        value: "",
        //mode:'text/html',//模式
        theme: "darcula", //主题
        indentUnit: 2,
        smartIndent: true,
        readOnly: true, //只读
        showCursorWhenSelecting: true,
        lineNumbers: false, //是否显示行数
        firstLineNumber: 1
      }
    };
  },
  components: {
    "share-CodeContent": CodeContent
  },
  methods: {},
  created() {}
};
</script>	
<style scoped>
.tutorial-size {
  height: 200px !important;
}
</style>

<template>
  <div>
    <h4>HTML 简介</h4>
    <el-divider></el-divider>
    <h4>实例</h4>
    <div class="tutorial-size">
      <share-CodeContent :codeData="codeData" :cmOptions="cmOptions"></share-CodeContent>
    </div>
    <el-divider></el-divider>
    <h3>实例解析</h3>
    <ul>
      <li>
        <!doctype html>声明为 HTML5 文档
      </li>
      <li>html 元素是 HTML 页面的根元素</li>
      <li>head 元素包含了文档的元（meta）数据</li>
      <li>title 元素描述了文档的标题</li>
      <li>body 元素包含了可见的页面内容</li>
      <li>h1 元素定义一个大标题</li>
      <li>元素定义一个段落</li>
    </ul>
    <p>注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。</p>
    <el-divider></el-divider>
    <h4>什么是HTML?</h4>
    <p>HTML 是用来描述网页的一种语言。</p>
    <ul>
      <li>HTML 指的是超文本标记语言: HyperText Markup Language</li>
      <li>HTML 不是一种编程语言，而是一种标记语言</li>
      <li>标记语言是一套标记标签 (markup tag)</li>
      <li>HTML 使用标记标签来描述网页</li>
      <li>HTML 文档包含了HTML 标签及文本内容</li>
      <li>HTML文档也叫做 web 页面</li>
    </ul>
    <el-divider></el-divider>
    <h4>HTML 标签</h4>
    <ul>
      <li>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</li>
      <li>HTML 标签是由尖括号包围的关键词</li>
      <li>HTML 标签通常是成对出现的，比如</li>
      <li>标签对中的第一个标签是开始标签，第二个标签是结束标签</li>
      <li>开始和结束标签也被称为开放标签和闭合标签</li>
    </ul>
    <h4>HTML 元素</h4>
    <p>"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.</p>
    <p>但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:</p>
    <p>HTML 元素:</p>
    <el-divider></el-divider>
    <h4>Web 浏览器</h4>
    <p>Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。</p>
    <p>浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：</p>
    <el-divider></el-divider>
    <h4>HTML版本</h4>
    <p>从初期的网络诞生后，已经出现了许多HTML版本:</p>
    <el-table :data="htmlVersionData" border style="width: 100%">
      <el-table-column prop="version" label="版本"></el-table-column>
      <el-table-column prop="time" label="时间"></el-table-column>
    </el-table>
    <el-divider></el-divider>
    <h4>
      <!doctype html>声明
    </h4>
    <p>
      <!doctype html>声明有助于浏览器中正确显示网页。
    </p>
    <p>网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。</p>
    <p>doctype 声明是不区分大小写的，以下方式均可：</p>
  </div>
</template>
<script>
import CodeContent from "../CodeContent";
export default {
  name: "HTMLIntro",
  data() {
    return {
      codeData:
        "<!DOCTYPE html>\n" +
        "<html>\n" +
        "<head>\n" +
        '<meta charset="utf-8">\n' +
        "<title>菜鸟教程(runoob.com)</title>\n" +
        "</head>\n" +
        "<body>\n" +
        "<h1>我的第一个标题</h1>\n" +
        "<li>我的第一个段落。</li>\n" +
        "</body>\n" +
        "</html>",
      cmOptions: {
        value: "",
        //mode:'text/html',//模式
        theme: "darcula", //主题
        indentUnit: 2,
        smartIndent: true,
        readOnly: true, //只读
        showCursorWhenSelecting: true,
        lineNumbers: false, //是否显示行数
        firstLineNumber: 1
      },
      htmlVersionData: [
        {
          version: "HTML",
          time: "1991"
        },
        {
          version: "HTML+",
          time: "1993"
        },
        {
          version: "HTML 2.0",
          time: "1995"
        },
        {
          version: "HTML 3.2",
          time: "1997"
        },
        {
          version: "HTML 4.01",
          time: "1999"
        },
        {
          version: "XHTML 1.0",
          time: "2000"
        },
        {
          version: "2012",
          time: "1991"
        },
        {
          version: "XHTML5",
          time: "2013"
        }
      ]
    };
  },
  components: {
    "share-CodeContent": CodeContent
  },
  methods: {},
  created() {}
};
</script>	
<style scoped>
.tutorial-size {
  height: 200px !important;
}
</style>

<template>
  <div>
    <h3>HTML 教程- (HTML5 标准)</h3>
    <p>超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。</p>
    <p>您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。</p>
    <p>在本教程中，您将学习如何使用 HTML 来创建站点。</p>
    <p>HTML 很容易学习！相信您能很快学会它！</p>
    <el-divider></el-divider>
    <h3>HTML 实例</h3>
    <p>本教程包含了数百个 HTML 实例。</p>
    <p>使用本站的编辑器，您可以轻松实现在线修改 HTML，并查看实例运行结果。</p>
    <p>
      注意：对于中文网页需要使用
      <meta charset="utf-8" />声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为
      <meta charset="gbk" />。
    </p>
    <el-divider></el-divider>
    <h4>实例</h4>
    <div class="tutorial-size">
      <share-CodeContent :codeData="codeData" :cmOptions="cmOptions"></share-CodeContent>
    </div>
    <el-divider></el-divider>
    <h3>HTML文档的后缀名</h3>
    <p>.html</p>
    <p>.htm</p>
    <p>以上两种后缀名没有区别，都可以使用。</p>
    <p>开始学习HTML!</p>
    <el-divider></el-divider>
    <h3>HTML 实例</h3>
    <p>在 HTML 手册中包含了数百个在线实例，您可以在线编辑并查看运行结果。</p>
    <p>查看 HTML 实例！</p>
    <el-divider></el-divider>
    <h3>HTML 参考手册</h3>
    <p>在菜鸟教程中，我们提供了完整的 HTML 参考手册，其中包括标签、属性、颜色、实体等等。</p>
    <p>HTML 标签参考手册</p>
    <el-divider></el-divider>
    <h3>HTML/CSS/JS 在线工具</h3>
    <p>HTML/CSS/JS 在线工具可以在线编辑 HTML、CSS、JS 代码，并实时查看效果，你也可以将优质代码保存分享：https://c.runoob.com/front-end/61</p>
  </div>
</template>

<script>
import CodeContent from "../CodeContent";
export default {
  name: "HTMLTutorial",
  data() {
    return {
      codeData:
        "<!DOCTYPE html>\n" +
        "<html>\n" +
        "<head>\n" +
        '<meta charset="utf-8">\n' +
        "<title>菜鸟教程(runoob.com)</title>\n" +
        "</head>\n" +
        "<body>\n" +
        "<h1>我的第一个标题</h1>\n" +
        "<p>我的第一个段落。</p>\n" +
        "</body>\n" +
        "</html>",
      cmOptions: {
        value: "",
        //mode:'text/html',//模式
        theme: "darcula", //主题
        indentUnit: 2,
        smartIndent: true,
        readOnly: true, //只读
        showCursorWhenSelecting: true,
        lineNumbers: false, //是否显示行数
        firstLineNumber: 1
      }
    };
  },
  components: {
    "share-CodeContent": CodeContent
  },
  methods: {},
  created() {}
};
</script>

<style scoped>
.tutorial-size {
  height: 200px !important;
}
</style>

计算机技术之指尖密码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中使用codemirror

npm install vue-codemirror --saveimport { codemirror } from 'vue-codemirror'import 'codemirror/lib/codemirror.css'import 'codemirror/theme/darcula.css' //这个是你设置了什么主题，就要对应的在main.js中引入主题的css<...
复制链接

扫一扫

专栏目录