百度编辑器内，对选中的内容进行替换

最新推荐文章于 2024-05-17 14:32:46 发布

理想和远方_在路上

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量261

点赞数 2

文章标签： vue.js 百度编辑器

本文链接：https://blog.csdn.net/weixin_38822843/article/details/136568821

版权

<template>
  <el-card>
    <el-row>
      <el-col>
        <vue-ueditor-wrap v-model="content" @ready="ready" :config="config" ref="editor" style="width:100%;"></vue-ueditor-wrap>
        <button @click="handleReplace">替换</button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
// 用来记录选中的内容
let selection = "";
import VueUeditorWrap from "vue-ueditor-wrap"; // ES6 Module

export default {
  name: "",
  components: {
    VueUeditorWrap,
  },
  data() {
    return {
      content: "",
      config: {
        initialStyle: "p{font-size:18px;}",
        elementPathEnabled: false,
        // removeEmptyline: true,
        // clearFontSize: true,
        // clearFontFamily: true,
        // 相对路径
        UEDITOR_HOME_URL: "/UEditor/",
        // 编辑器不自动被内容撑高
        autoHeightEnabled: true,
        // 初始容器高度// 初始容器宽度
        initialFrameHeight: "100%",
        initialFrameWidth: "100%",
        toolbars: [
          // [
          //   // "fullscreen",
          //   "source",
          //   "|",
          //   "undo",
          //   "redo",
          //   "|",
          //   "bold",
          //   "italic",
          //   "underline",
          //   "fontborder",
          //   "strikethrough",
          //   "superscript",
          //   "subscript",
          //   "removeformat",
          //   "formatmatch",
          //   "blockquote",
          //   "pasteplain",
          //   "|",
          //   "forecolor",
          //   "backcolor",
          //   "insertorderedlist",
          //   "insertunorderedlist",
          //   "selectall",
          //   "cleardoc",
          //   "|",
          //   "customstyle",
          //   "paragraph",
          //   "fontfamily",
          //   "fontsize",
          //   "|",
          //   "justifyleft",
          //   "justifycenter",
          //   "justifyright",
          //   "justifyjustify",
          //   "|",
          //   "imagenone",
          //   "imageleft",
          //   "imageright",
          //   "imagecenter",
          //   "|",
          //   "simpleupload",
          //   "insertimage",
          //   "|",
          //   "horizontal",
          //   "date",
          //   "time"
          // ]
        ],
        contextMenu: [],
        // 不显示字数
        wordCount: true,
        // 上传图片路径
        serverUrl: "http://35.201.165.105:8000/controller.php",
        // 自动保存
        enableAutoSave: false,
        // focus: true,
        zIndex: 99,
      },
      selection: "",
      selectionDom: "",
      editor: {},
    };
  },
  methods: {
    ready(instance) {
      this.editor = instance;
      this.$nextTick(() => {
        // 监听选取变化
        this.editor.addListener("selectionchange", this.handleSelectionChange);
      });
    },
    handleSelectionChange(type, e) {
      if (this.editor.selection.getText()) {
        this.selection = this.editor.selection.getText();
        selection = this.selection;

        this.selectionDom = this.editor.document.getSelection();
      } else {
        this.selection = "";
      }
    },
    handleReplace() {
      this.selectionDom.deleteFromDocument();
      this.editor.execCommand(
        "inserthtml",
        `<span style="color:#fe6f63;">这里是替换后的内容</span>`
      );
    },
  },
};
</script>
<style lang="scss">
</style>