【VUE】Использовать редактор форматированного текста в фоновом режиме

внешний интерфейс Vue.js
【VUE】Использовать редактор форматированного текста в фоновом режиме

предисловие

Редактор управления фоном Vue

以下代码均可直接复制，只需要更改一些引入的路径

Учебные документы и официальные документы отмечены

banner.jpg

1. Введение

Знакомство с используемыми плагинами

wangEditor

Совместимость с браузером
  • Совместимость с основными браузерами для ПК, IE11+
  • Мобильные устройства и iPad не поддерживаются

Учебная документация по подключаемому модулю

Учебная документация

Смотрите эффект выше

image.png

2. Используйте

Установить с помощью нпм
npm install wangeditor --save
Создайте editoritem.vue под компонентами, чтобы инкапсулировать редактор в компоненты для удобного управления вызовами.

代码可完全复制修改

<template>
    <div id="wangeditor">
        <div ref="editorElem" style="text-align: left"></div>
    </div>
</template>
<script>
//引入编辑器
import E from "wangeditor";
export default {
    name: "editorElem",
    data() {
        return {
            editor: null,
            editorContent: "",
        };
    },
    // 接收父组件的方法
    props: ["catchData", "content"], 
    watch: {
        content() {
            this.editor.txt.html(this.content);
        },
    },
    mounted() {
        this.editor = new E(this.$refs.editorElem);
        console.log("this.editor====>", this.editor);
        this.editor.config.onchange = (html) => {
            this.editorContent = html;
            // 把这个html通过catchData的方法传入父组件
            this.catchData(this.editorContent); 
        };
        this.editor.config.uploadImgServer = "你的上传图片的接口";
        this.editor.config.uploadFileName = "你自定义的文件名";
        this.editor.config.menus = [
            // 菜单配置
            "head", // 标题
            "bold", // 粗体
            "fontSize", // 字号
            "fontName", // 字体
            "italic", // 斜体
            "underline", // 下划线
            "strikeThrough", // 删除线
            "foreColor", // 文字颜色
            "backColor", // 背景颜色
            "link", // 插入链接
            "list", // 列表
            "justify", // 对齐方式
            "quote", // 引用
            "emoticon", // 表情
            "image", // 插入图片
            "table", // 表格
            "code", // 插入代码
            "undo", // 撤销
            "redo", // 重复
        ];
       
        this.editor.config.uploadImgHooks = {
            before: function (xhr, editor, files) {
                // 图片上传之前触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
                // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                // return {
                //     prevent: true,
                //     msg: '放弃上传'
                // }
            },
            success: function (xhr, editor, result) {
                // 图片上传并返回结果，图片插入成功之后触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                this.imgUrl = Object.values(result.data).toString();
            },
            fail: function (xhr, editor, result) {
                // 图片上传并返回结果，但图片插入错误时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            },
            error: function (xhr, editor) {
                // 图片上传出错时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            },
            timeout: function (xhr, editor) {
                // 图片上传超时时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            },

            // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
            // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
            customInsert: function (insertImg, result, editor) {
                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                let url = Object.values(result.data); // result.data就是服务器返回的图片名字和链接
                JSON.stringify(url); // 在这里转成JSON格式
                insertImg(url);
                // result 必须是一个 JSON 格式字符串！！！否则报错
            },
        };

        this.editor.create(); // 创建富文本实例
        if (!this.content) {
            this.editor.txt.html("请编辑内容1");
        }
    },
};
</script>
Вызов редактора форматированного текста editoritem.vue на используемой странице.
  import EditorBar from "@/components/editoritem/editoritem";
объявление компонентов
components: { EditorBar}
Используя компоненты, catchData прослушивает форматированный текстовый ввод editorContent — это содержимое в форматированном тексте.
<editor-bar :catchData="catchData" :content="editorContent" ></editor-bar>
Используйте страницу компонента для определения входящего метода catchData и editorContent.
methods: {
      // 监听富文本的输入
      catchData(e) {
        console.log("e=====?>", e);
      },
      //富文本中的内容
      editorContent(e) {
        console.log("e=====?>", e);
      }
    }

Добро пожаловать, подписывайтесь, лайкайте и добавляйте в избранное! ! ! Время от времени публикуйте технические посты и исходный код кода.

Категории