文本----简单编写文章的方法(上),自己编写好页面就上传到自己的服务器上,使用富文本编辑器进行编辑

简介: 文本----简单编写文章的方法(上),自己编写好页面就上传到自己的服务器上,使用富文本编辑器进行编辑

       简单实现一个目标: 点击a链接,就能够看到展示文章:

       第一步:这里我们要用到富文本编辑器,参考视频资源:

 第二步:先打开我们的Vue项目,把Vue项目给跑起来:

   

第三步 全局组件中引入富文本编辑器,这种写法自己搞不定,先采取局部导入富文本编辑器吧!!!

<template>
  <div>
    你好世界
    <div class="editor">
      <quill-editor theme="snow"></quill-editor>
    </div>
  </div>
</template>
<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
export default {
  components: {
    QuillEditor
  }
}
</script>

第四步  在一个Vue页面中,使用富文本编辑器:这是没有写editor的样子

1. <el-form-item>
2. <quill-editor></quill-editor>
3. </el-form-item>

第五步 使用v-model绑定content数据。v-model="content"

第六步:在文章的data中添加数据参数:

<script>
export default {
  data() {
    return {
      // 表单的数据对象
      pubForm: {
        title: '',
        cate_id: '',
        content: '' // 文章的内容
      }
    }
  }
}
</script>

第七步: 放入富文本编辑器的组件,这样我们就可以看到样式了:

    <div class="editor">
      <quill-editor theme="snow"></quill-editor>
    </div>

第八步:这样就可以看到富文本编辑器的

第九步:接下来想办法,如何能够将里面的内容,能够传入到数据库里

第十步:富文本编辑器如何绑定数据呢?这里用到的方法,是参考视频资料:

第十一步:这里使用了v-model作为数据绑定

第十二步 v-mode,看一下v-model,数据绑定的写法在script的标签中的写法:

<template>
  <div>
    你好世界
    <div class="editor">
      <quill-editor theme="snow" v-model:content="articleModel.content"></quill-editor>
    </div>
    <div>{{ articleModel.content }}</div>
  </div>
</template>
<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
export default {
  data() {
    return {
      articleModel: [{
        content: ''
      }]
    }
  },
  components: {
    QuillEditor
  }
}
 
</script>
<style lang="less">
.editor {
  width: 100%;
 
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
 
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
 
nav {
  padding: 30px;
}
 
nav a {
  font-weight: bold;
  color: #2c3e50;
}
 
nav a.router-link-exact-active {
  color: #42b983;
}
</style>

这样富文本就能写东西了

相关文章
|
9月前
|
弹性计算 Java Linux
ECS使用体验的文章
ECS使用体验的文章
|
9月前
|
弹性计算 Java Linux
ECS使用体验的文章
ECS使用体验的文章
|
4月前
|
Linux UED C++
MarkEdit:相信做技术的同学都会喜欢这个编辑器的,MarkEdit编辑器,让Markdown编辑变得简单而强大,超赞~~~
嗨,大家好,我是小华同学。MarkEdit是一款跨平台的Markdown编辑器,支持Windows、macOS和Linux,提供实时预览、快捷键、自定义主题和插件系统等核心功能。它适用于日常笔记、技术文档、博客写作、学术论文和电子书制作等多种场景。
249 31
|
9月前
|
弹性计算 Java Linux
ECS使用体验的文章
ECS使用体验的文章
|
9月前
|
弹性计算 Java Linux
ECS使用体验的文章
ECS使用体验的文章
|
4月前
|
负载均衡 监控 架构师
「从零开始的云上建筑师速成班:用ROS编辑器搭个会呼吸的服务器小屋」
云上建筑师速成秘籍:用阿里云ROS架构编辑器像搭乐高一样玩转服务器!零代码拖拽资源+配置指南,从部署到拆家一条龙服务~
「从零开始的云上建筑师速成班:用ROS编辑器搭个会呼吸的服务器小屋」
|
4月前
|
移动开发 数据可视化 前端开发
tmagic - editor:大厂开源项目,零代码/低代码页面可视化编辑的利器,多端统一方案揭秘!如何用一套代码支持H5/PC,牛牛牛~~~
腾讯推出的开源项目 **tmagic-editor** 是一款所见即所得的页面可视化编辑器,支持H5、PC、TV等多种页面类型。它已应用于腾讯视频会员、腾讯会议等业务,每月生产和发布数百个页面,极大提高了开发效率。通过简单的拖拽和配置,非技术人员也能轻松创建复杂页面。tmagic-editor 支持 Vue2/Vue3 和 React 等多种前端框架,并提供了丰富的扩展功能,满足不同业务需求。
374 3
|
8月前
|
弹性计算 Java Linux
ECS使用体验的文章
ECS使用体验的文章
|
8月前
|
弹性计算 Java Linux
ECS使用体验的文章
ECS使用体验的文章
|
8月前
|
弹性计算 Java Linux
ECS使用体验的文章
ECS使用体验的文章

热门文章

最新文章

下一篇
oss创建bucket