🎇 酷库 - 富文本编辑器

SLYLXDYMJ

字数：384 字

时长：1 分钟

常见而又蛋疼的功能。

quill.js

美观简洁，还算好使，但是功能较少，若需要下面的功能慎用。

• 批量图片上传。
• 表格。

官网

https://quilljs.com/

wangeditor5

新发现的库，功能多，官方支持集成 vue 和 react，待使用，目测很好使。

官网

https://www.wangeditor.com/

非工程化项目，又想用 vue 组件

官方提供的 vue 和 react 组件，只用于工程化项目。
用下面这个，可以支持非工程化项目（测试OK）

没有找到可以下载 js 的地址，可以用 npm 安装 wangeditor5-for-vue2 后
然后提取 \node_modules\wangeditor5-for-vue2\dist\lib\index.js 文件
复制到项目中引入使用即可

官网

https://clinfc.github.io/wangeditor5-for-vue2/

<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">

<div id="app">
  <we-editor
    :toolbar-option="toolbar"
    :editable-option="editable"
    :json.sync="data.json"
    :html.sync="data.html">
  </we-editor>
</div>

<script src="./lib/vue.min.js"></script>
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script src="./lib/editor-for-vue.js"></script>
<script>
  var { useWangEditor } = window.wangEditor5ForVue2

  Vue.use(window.wangEditor5ForVue2.WeEditable)
  Vue.use(window.wangEditor5ForVue2.WeEditor)
  Vue.use(window.wangEditor5ForVue2.WeToolbar)

  new Vue({
    data() {
      return {
        data: {
          json: '',
          html: '',
        },
        ...useWangEditor({
          config: {
            placeholder: 'WeEditor 示例',
            onCreated: (inst) => {
              console.log(inst)
              // 使用了箭头函数，因此 this 指向当前组件实例
              console.log(this.editable.config.placeholder)
            },
          },
        }),
      }
    },
  }).$mount('#app')
</script>