前端富文字編輯器vue tinymce

2022-07-12 17:48:17 字數 926 閱讀 8008

之前有專案需要用到富文字編輯器,在網上找了好幾個後,最終選擇了這個功能強大,擴充套件性強的tinymce

tinymce中文文件位址(不全):

接下來大致講一下乙個小demo(vue專案 + tinymce)

npm i tinymce @packy-tang/vue-tinymce
如下圖

然後在public/index.html頁面全域性引入tinymce

將 zh_cn.js檔案直接放到public/tinymce/langs/目錄下就行了,後續配置(下面會講)時加上就能實現。

在vue專案main.js檔案中

// tinymce編輯器

import tinymce from 'tinymce'

import vuetinymce from '@packy-tang/vue-tinymce'

vue.prototype.$tinymce = tinymce

vue.use(vuetinymce)

tinymce有多種編輯器模式,具體可以看文件了解,

筆者一開始使用的是經典模式,但經典模式使用的是iframe,不方便影響編輯器內部的東西,於是採用內聯模式,但是內聯模式是需要

聚焦後才會出現編輯工具欄,不符合需求,所以採用設定聚焦的元素為body的方法讓編輯工具欄一直顯示

**如下

富文字編輯器

關於使用富文字編輯器的一些小坑 官網 1.專案 片 editor fail function xhr,editor,result custominsert function insertimg,result,editor this.editor.create this.editor.txt.html...

富文字編輯器

富文字編輯器,rich text editor,簡稱 rte,它提供類似於 microsoft word 的編輯功能。常用的富文字編輯器 kindeditor ueditor ckeditor 在頁面中新增js 用於初始化kindeditorallowfilemanager 是否允許瀏覽伺服器已上傳...

富文字編輯器

富文字編輯器,rich text editor,簡稱 rte,它提供類似於 microsoft word 的編輯功能。常用的富文字編輯器 kindeditor ueditor ckeditor 在頁面中新增js 用於初始化kindeditor allowfilemanager 是否允許瀏覽伺服器已上...