Vue富文本编辑器使用教程

简介: Vue富文本编辑器使用教程

Vue富文本编辑器使用教程


1.安装


yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save


2.创建组件


在components下创建富文本编辑器组件


组件内部详情代码(已整理好)

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode"/>
    <Editor style="height: 150px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="handleCreated" @onChange="updateHtml"/>
  </div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {onBeforeUnmount, ref, shallowRef, onMounted, watch} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
export default {
  components: {Editor, Toolbar},
  props: ['html'],
  setup(props, {emit}) {
    // 编辑器实例,必须用 shallowRef
    const editorRef = shallowRef()
    // 内容 HTML
    const valueHtml = ref(props.html)
    watch(props, (newValue, oldValue) => {
      valueHtml.value = newValue.html
    })
    // 模拟 ajax 异步获取内容
    // onMounted(() => {
    //   setTimeout(() => {
    //     valueHtml.value = '<p></p>'
    //   }, 1500)
    // })
    const updateHtml = (val) => {
      emit('change', valueHtml.value)
    }
    const toolbarConfig = {
      toolbarKeys: [
        'bold', // 加粗
        'italic', // 斜体
        'through', // 删除线
        'underline', // 下划线
        'bulletedList', // 无序列表
        'numberedList', // 有序列表
        'color', // 文字颜色
        'insertLink', // 插入链接
        'fontSize', // 字体大小
        'lineHeight', // 行高
        'uploadImage', // 上传图片
        'delIndent', // 缩进
        'indent', // 增进
        'deleteImage',//删除图片
        'divider', // 分割线
        'insertImage', // 网络图片
        'insertTable', // 插入表格
        'justifyCenter', // 居中对齐
        'justifyJustify', // 两端对齐
        'justifyLeft', // 左对齐
        'justifyRight', // 右对齐
        'undo', // 撤销
        'redo', // 重做
        'clearStyle', // 清除格式
        'fullScreen' // 全屏
      ],
      excludeKeys: [
        'bgColor', // 背景色
        'blockquote', // 引用
        'codeBlock', // 代码段
        'emotion', // 表情
        'fontFamily', // 字体
        'headerSelect' // 标题
      ]
    }
    const editorConfig = {
      placeholder: '请输入内容...',
    }
    // 组件销毁时,也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })
    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例,重要!
    }
    return {
      editorRef,
      valueHtml,
      mode: 'default',
      toolbarConfig,
      editorConfig,
      handleCreated, updateHtml
    }
  }
}
</script>


以上已经配置好了父子组件传值,之后就可以直接调用来进行使用了


调用部分


 <MyEditor @change="(html) => { add.formModel.description = html }" :html="add.formModel.description"/>

相关文章
|
6月前
|
存储 搜索推荐 Shell
【Shell 命令集合 文本编辑器】Linux joe 编辑器的使用教程
【Shell 命令集合 文本编辑器】Linux joe 编辑器的使用教程
92 0
|
14天前
Axure设计之文本编辑器制作教程
本文介绍如何在Axure中模拟Web端富文本编辑器,实现基本的文本编辑功能,包括自定义字体样式、大小、颜色及对齐方式等。通过拖入矩形、文本域等元件,添加单选框和图标,并设置相应的交互,完成文本编辑器的制作。
|
3月前
|
图形学 开发者 存储
超越基础教程:深度拆解Unity地形编辑器的每一个隐藏角落,让你的游戏世界既浩瀚无垠又细节满满——从新手到高手的全面技巧升级秘籍
【8月更文挑战第31天】Unity地形编辑器是游戏开发中的重要工具,可快速创建复杂多变的游戏环境。本文通过比较不同地形编辑技术,详细介绍如何利用其功能构建广阔且精细的游戏世界,并提供具体示例代码,展示从基础地形绘制到植被与纹理添加的全过程。通过学习这些技巧,开发者能显著提升游戏画面质量和玩家体验。
155 3
|
3月前
|
存储 JavaScript 前端开发
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
文章展示了在Vue项目中通过集成Quill富文本编辑器实现公告功能的完整开发过程,包括前端的公告发布、修改、删除操作以及后端的数据存储和处理逻辑。
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
|
3月前
|
JavaScript
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
文章详细介绍了在Vue项目中安装和使用`vue-quill-editor`的步骤,包括如何通过npm安装、局部挂载、在Vue页面中引入和配置使用。同时,还提供了如何实现图片的缩放和拖拽功能的进阶教程,涉及到安装额外的插件`quill-image-drop-module`和`quill-image-resize-module`,以及对Webpack配置的调整。最后,文章还提供了实际效果展示和一些后续可能的拓展功能,如上传视频和将图片上传到服务器等。
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
|
3月前
|
存储
UE建模模式编辑器工具的快速入门教程
在UE虚幻引擎中,想要进行创建网格体、制作新关卡几何原型、编辑现有静态网格体资产等模型编辑动作,都需要借助建模模式的编辑器完成。因此,充分掌握编辑器能力是每个UE开发人员必备的基础技能,尽管UE建模模式中的许多工具与其他建模软件工具操作类似,但在如何构建网格体编辑方面存在着重要区别。 下面就带大家一起了解「UE建模模式编辑器」的不同之处🤔。
|
4月前
|
JavaScript
【vue】 vue2 中使用 Tinymce 富文本编辑器
【vue】 vue2 中使用 Tinymce 富文本编辑器
586 6
|
4月前
|
JSON JavaScript 数据格式
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
|
4月前
|
小程序
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
622 0
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
|
4月前
|
JavaScript
【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接
【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接
299 0