vue中使用富文本编辑器,@tinymce/tinymce-vue

富文本就是在后台管理系统中常见的录入带格式的内容,如:表格,字体加粗,斜体,文字颜色等等,就像一个word一样。类似于这样的效果:

我们使用通用在线编辑器tinymce。支持vue和react。

1. 安装

npm i @tinymce/tinymce-vue -S

要注意版本,我使用的是5.1.1。

2. 在vue组件里导入

import Editor from '@tinymce/tinymce-vue';

如果是选项式api的话,需要做组件注册。

3. 在模板上渲染

<Editor ref="editorref" :init="{plugins: 'wordcount'}" />

4. 操作富文本实例

editorref.value.getEditor()

5、获取内容【这是最关键的一步】

editorref.value.getEditor().getContent()

完整代码【使用element-plus和ts】:

复制代码
<!-- 富文本 -->
<script lang="ts" setup>
import { ref } from "vue";
import Editor from '@tinymce/tinymce-vue'


const content = ref();

interface INews {
  title: string
}
const form = ref<INews>({
  title: ""
});
const editorRef = ref();

const addNews = () => {
  let data = {
    title: form.value.title,
    content: editorRef.value.getEditor().getContent()
  }

  console.log("data",data);
  content.value = data.content;
}


</script>

<template>
  <h1>富文本</h1>
  <el-form :model="form">
    <el-form-item label="标题">
      <el-input v-model="form.title" autocomplete="off" />
    </el-form-item>
    <editor ref="editorRef" :init="{
      height: 500,
      menubar: true,
      plugins: [
        'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
        'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
        'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
      ],
      toolbar: 'undo redo | blocks | ' +
        'bold italic forecolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat | help | image | table',
      content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
    }" />

    <el-form-item>
      <el-button @click="addNews">添加</el-button>
    </el-form-item>
  </el-form>

  <hr/>
  <div v-html="content"></div>
</template>

<style lang="scss" scoped></style>
相关推荐
zwjapple26 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理4 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python