vue 富文本插件_前端富文本编辑器插件

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

1.引用quill

<script src="/lib/quill/quill.min.js"></script>
<link href="/lib/quill/quill.snow.css" rel="stylesheet" />

2.RichEditorDemo.vue

<template>
  <div class="yh-page">
    <h1>富文本编辑器演示</h1>
    <div class="desc">Demo源代码：
      <code>/examples/components/modules/RichEditorDemo.vue</code>
    </div>
    <div class="yh-block">
      <el-row>
        <el-col :span="13">
          <div id="editor" style="height:300px"></div>
          <div style="margin-top:15px;text-align:center">
            <yh-button @click="onSave">保存</yh-button>
          </div>
        </el-col>
        <el-col :span="11">
          <div id="re-content" style="background-color:#fefefe;height:300px;width:100%;padding:8px"></div>
        </el-col>
      </el-row>
    </div>
    <div class="yh-desc yh-block">
      <h2>引用quill</h2>
      <pre>&lt;script src=&quot;/lib/quill/quill.min.js&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;/lib/quill/quill.snow.css&quot; rel=&quot;stylesheet&quot; /&gt;</pre>
    </div>
  </div>
</template>
<script>
import yhbutton from "../comcompont/Button";
export default {
  name: "RichEditorDemo",
  data() {
    return {};
  },
  methods: {
    onSave() {
      var delta = this.$quill.getContents();
      console.log("delta " + JSON.stringify(delta));
      var html = this.$quill.root.innerHTML;
      $("#re-content").html(html);
    }
  },
  mounted() {
    var quill = new Quill("#editor", {
      modules: {
        toolbar: [
          [{ header: [1, 2, false] }],
          ["bold", "italic", "underline"],
          [{ color: [] }, { background: [] }],
          [{ font: [] }],
          [{ align: [] }],
          ["image", "link"]
        ]
      },
      theme: "snow"
    });
    this.$quill = quill;
  },
  components: {
    "yh-button": yhbutton,
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scope>
</style>