• Vue3中使用富文本编辑器


    vue3中我们可以使用@wangeditor/editor、@wangeditor/editor-for-vue来实现其功能

    npm地址:https://www.npmjs.com/package/@wangeditor/editor-for-vue/v/5.1.12?activeTab=readme

    官网:Editor 

    1. 安装

    1. pnpm add @wangeditor/editor
    2. # 或者 npm install @wangeditor/editor --save
    3. pnpm add @wangeditor/editor-for-vue@next
    4. # 或者 npm install @wangeditor/editor-for-vue@next --save

     2. 组件封装

    @/comps/Editor/index.vue 

    首先为了能让vue认识@wangeditor/editor-for-vue库、我们可以在.d.ts中声明一下即可

    1. // 声明外部 npm 插件模块
    2. declare module '@wangeditor/editor-for-vue';
    1. <template>
    2. <div class="Wft-Editor flex flex-col">
    3. <Toolbar
    4. class="default-border"
    5. :editor="editorRef"
    6. :mode="mode"
    7. />
    8. <Editor
    9. class="flex-1 overflow-y-auto"
    10. v-model="valueHtml"
    11. :defaultConfig="editorConfig"
    12. :mode="mode"
    13. @onCreated="handleCreated"
    14. @onChange="onChange"
    15. />
    16. div>
    17. template>
    18. <script setup lang="ts">
    19. import '@wangeditor/editor/dist/css/style.css'
    20. import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    21. import type { IDomEditor } from '@wangeditor/editor'
    22. import { onBeforeUnmount, shallowRef, computed, watch } from 'vue'
    23. type TProps = {
    24. mode?: string,
    25. valueHtml?: string,
    26. placeholder?: string,
    27. disable?: boolean
    28. }
    29. const props = withDefaults(defineProps<TProps>(), {
    30. mode: 'default', // or 'simple'
    31. valueHtml: '',
    32. placeholder: '请输入内容...',
    33. disable: false
    34. })
    35. type TEmits = {
    36. (e: 'update:valueHtml', params: string): void
    37. (e: 'update:valueText', params: string): void
    38. (e: 'onChange', params: IDomEditor): void
    39. }
    40. const emits = defineEmits<TEmits>()
    41. const editorRef = shallowRef()
    42. const valueHtml = computed({
    43. get() {
    44. return props.valueHtml
    45. },
    46. set(valueHtml) {
    47. emits('update:valueHtml', valueHtml)
    48. }
    49. })
    50. watch(() => props.disable, bool => {
    51. if(!editorRef.value) return
    52. bool ? (editorRef.value as IDomEditor).disable() : (editorRef.value as IDomEditor).enable()
    53. }, { deep: true })
    54. const editorConfig = computed(() => {
    55. return { placeholder: props.placeholder }
    56. })
    57. // 记录 editor 实例,重要!
    58. const handleCreated = (editor: IDomEditor) => {
    59. editorRef.value = editor
    60. }
    61. // editor 改变
    62. const onChange = (editor: IDomEditor) => {
    63. emits('onChange', editor)
    64. }
    65. // 销毁编辑器
    66. onBeforeUnmount(() => {
    67. if(!editorRef.value) return
    68. editorRef.value.destroy()
    69. })
    70. function getHtml() {
    71. return (editorRef.value as IDomEditor).getHtml()
    72. }
    73. function getText() {
    74. return (editorRef.value as IDomEditor).getText()
    75. }
    76. defineExpose({ getHtml, getText })
    77. script>
    78. <style scoped>
    79. .Wft-Editor {
    80. width: 100%;
    81. height: 100%;
    82. }
    83. .flex {
    84. display: flex;
    85. }
    86. .flex-col {
    87. flex-direction: column;
    88. }
    89. .default-border {
    90. border-bottom: 1px solid #ccc;
    91. }
    92. .flex-1 {
    93. flex: 1;
    94. }
    95. .overflow-y-auto {
    96. overflow-x: hidden;
    97. overflow-y: auto;
    98. }
    99. style>

    3. 使用 

    1. <template>
    2. <div class="wel">
    3. <div class="btn">
    4. <button @click="submit">提交button>
    5. <button @click="getHtml">获取HTMLbutton>
    6. <button @click="getText">获取TEXTbutton>
    7. <button @click="editorDisable = !editorDisable">{{ editorDisable ? '启用' : '禁用' }}button>
    8. div>
    9. <div class="editor-container">
    10. <Editor
    11. ref="EditorRef"
    12. :disable="editorDisable"
    13. v-model:value-html="editorValue"
    14. @on-change="editorChange"
    15. />
    16. div>
    17. div>
    18. template>
    19. <script setup lang="ts">
    20. import Editor from '@/comps/Editor/index.vue'
    21. import { onMounted, ref, shallowRef } from 'vue'
    22. import type { IDomEditor } from '@wangeditor/editor'
    23. let editorValue = ref('') // 提交的数据
    24. let editorDisable = ref(false)
    25. let EditorRef = shallowRef<InstanceType<typeof Editor>>()
    26. onMounted(() => {
    27. setTimeout(() => {
    28. editorValue.value = '

      回显测试

      '
    29. }, 3000)
    30. })
    31. const submit = () => {
    32. console.log(editorValue.value)
    33. }
    34. const getHtml = () => {
    35. console.log(EditorRef.value?.getHtml())
    36. }
    37. const getText = () => {
    38. console.log(EditorRef.value?.getText())
    39. }
    40. const editorChange = (editor: IDomEditor) => {
    41. console.log(editor.getHtml())
    42. console.log(editor.getText())
    43. }
    44. script>
    45. <style scoped>
    46. .wel {
    47. width: 100%;
    48. height: 100%;
    49. }
    50. .btn {
    51. width: 100%;
    52. height: 40px;
    53. display: flex;
    54. align-items: center;
    55. }
    56. .btn button {
    57. margin-left: 15px;
    58. }
    59. .editor-container {
    60. width: 100%;
    61. height: calc(100% - 40px);
    62. }
    63. style>

    4. 效果 

     

  • 相关阅读:
    【C/C++】用C语言写一个数据仓库,存储和修改数据
    Git使用详细教程
    5G消息精准触达,”解锁“新场景
    【win10常用命令】
    CANoe-激活总线状态、CAPL导航器不显示Test Case视图
    学成在线第三天
    (c语言)二维数组求最大值
    java使用数据库连接池
    pod(八):pod的调度——将 Pod 指派给节点
    20种最常见的网络安全攻击类型
  • 原文地址:https://blog.csdn.net/m0_51431448/article/details/133942208