织梦做不了视频网站,网络营销推广岗位有哪些,优化网站排名茂名厂商,新公司注册网站第一步在vue2项目下安装
npm install --save ckeditor/ckeditor5-build-decoupled-document 第二 项目下新建一个plugins的文件夹将这个包ckeditor5-build-classic放入 #xff08;包在页面最上方 有个下载按钮 可以下载#xff09; 刚开始时 ckeditor5-build-classic文件…第一步在vue2项目下安装
npm install --save ckeditor/ckeditor5-build-decoupled-document 第二 项目下新建一个plugins的文件夹将这个包ckeditor5-build-classic放入 包在页面最上方 有个下载按钮 可以下载 刚开始时 ckeditor5-build-classic文件夹下无node_modules,需要找到 项目下的ruoyi-ui\src\plugins\ckeditor5-build-classic文件地址cmd打开然后输入npm install 安装下 ckeditor5-build-classic文件夹下就有这个了node_modules 第三步 为了兼容wold和pdf的粘贴 找到plugins\ckeditor5-build-classic\node_modulesckeditor\ckeditor5-paste-from-office\src\filters\image.js 这个文件然后打开搜索regexPictureHeader将某段代码进行替换如下
//图片替换
regexPictureHeader /{\pict[\s\S]?({\*\blipuid\s?[\da-fA-F]})?/;第四步 为了兼容wold和pdf的粘贴 找到plugins\ckeditor5-build-classic\node_modulesckeditor\ckeditor5-paste-from-office\src\filters\space.js 这个文件 然后打开搜索htmlDocument.querySelectorAll将这段代码替换如下
htmlDocument.querySelectorAll(span[style*spacerun]).forEach(el {if (/[^\b]/.test(el.innerText.trim()) false) {const innerTextLength el.innerText.length || 0;el.innerHTML Array(innerTextLength 1).join(\u00A0 ).substr(0, innerTextLength);}});第五步 在api文件下新建upload.js
import { getToken } from /utils/auth;
// upload.js中
class MyUploadAdapter {constructor(loader) {// 要在上载期间使用的文件加载器实例this.loader loader;}// 启动上载过程upload() {return this.loader.file.then((file) new Promise((resolve, reject) {this._initRequest();this._initListeners(resolve, reject, file);this._sendRequest(file);}));}// 中止上载过程abort() {if (this.xhr) {this.xhr.abort();}}// 使用传递给构造函数的URL初始化XMLHttpRequest对象._initRequest() {const xhr (this.xhr new XMLHttpRequest());// 后端上传图片接口 ${process.env.VUE_APP_BASE_API}/common/upload,xhr.open(POST,${process.env.VUE_APP_BASE_API}/common/upload,true);xhr.responseType json;}// 初始化 XMLHttpRequest 监听._initListeners(resolve, reject, file) {const xhr this.xhr;const loader this.loader;const genericErrorText 无法上传文件: ${file.name}.;xhr.addEventListener(error, () reject(genericErrorText));xhr.addEventListener(abort, () reject());xhr.addEventListener(load, () {//这个例子假设XHR服务器的“response”对象将附带//一个“error”它有自己的“message”可以传递给reject()//你的集成可能以不同的方式处理上传错误所以请确保//当上传失败时必须调用reject()函数。const response xhr.response;// 当上传失败时必须调用reject()函数。if (!response || response.error) {// reject方法会调用浏览器的alert事件 并清除页面上的图片展示return reject(response response.error? response.error.message: genericErrorText);}// 上传成功从后台获取图片的url地址// resolve方法会将default中的值插入到页面中img标签的src中resolve({default: response.url,});});// 支持时上传进度。文件加载器有#uploadTotal和#upload属性用于在编辑器用户界面中显示上载进度栏。if (xhr.upload) {xhr.upload.addEventListener(progress, (evt) {if (evt.lengthComputable) {loader.uploadTotal evt.total;loader.uploaded evt.loaded;}});}}// 准备数据并发送请求_sendRequest(file) {// 通过FormData构造函数创建一个空对象const data new FormData();// 通过append()方法在末尾追加key为files值为file的数据data.append(file, file); // 上传的参数data/*** 重要提示:这是实现诸如身份验证和CSRF保护等安全机制的正确位置。* 例如可以使用XMLHttpRequest.setRequestHeader()设置包含应用程序先前生成的CSRF令牌的请求头。*/this.xhr.setRequestHeader(Authorization, getToken());this.xhr.send(data);}
}function MyCustomUploadAdapterPlugin(editor) {editor.plugins.get(FileRepository).createUploadAdapter (loader) {// 在这里将URL配置为后端上载脚本return new MyUploadAdapter(loader)}
}export {MyUploadAdapter,MyCustomUploadAdapterPlugin
}第六步 组件页面 components/CkEditor/index.vue
templatedivdiv :ideditorID/div/div
/templatescriptimport {MyCustomUploadAdapterPlugin,MyUploadAdapter} from /api/upload;import ClassicEditor from /plugins/ckeditor5-build-classic;import /plugins/ckeditor5-build-classic/build/translations/zh-cn.js;export default {props: {/* 编辑器的内容 */ckEditorValue: {type: String,default: ,},/* 只读模式 */readOnly: {type: Boolean,default: false,},/* 控制什么时候显示工具条 */inEditorShow: {type: Boolean,default: true,},/* editorID */editorID: {type: String,default: editor,}},data() {return {editor: }},watch: {ckEditorValue: {handler(newVal) {var that this;setTimeout(() {if (that.editor ! that.editor ! null that.editor ! undefined)that.editor.setData(that.ckEditorValue);}, 100)},immediate: true,deep: true},readOnly: {handler(newVal) {var that this;setTimeout(() {if (newVal) {if (that.editor ! that.editor ! null that.editor ! undefined)that.editor.enableReadOnlyMode(editor);} else {if (that.editor ! that.editor ! null that.editor ! undefined)that.editor.disableReadOnlyMode(editor);}}, 100)},immediate: true,deep: true}},mounted() {this.initEditor();},methods: {initEditor() {let that this;ClassicEditor.create(document.querySelector(#${that.editorID}), {language: zh-cn,extraPlugins: [MyCustomUploadAdapterPlugin],placeholder: 请输入内容....,autosave: {waitingTime: 100,save(editor) {// return that.saveData(editor.getData());sessionStorage.setItem(saveEditorData, editor.getData());},}}).then((editor) {// 设置富文本高度editor.editing.view.change(writer {writer.setStyle(min-height, 500px, editor.editing.view.document.getRoot());});// 上传文件editor.plugins.get(FileRepository).createUploadAdapter (loader) {return new MyUploadAdapter(loader);};//富文本是否只读if (this.readOnly) {editor.enableReadOnlyMode(editor);} else {editor.disableReadOnlyMode(editor);}//根据父组件判断是否显示工具栏if (!this.inEditorShow) {var toolbar document.getElementsByClassName(ck-toolbar);var border document.getElementsByClassName(ck-editor__editable_inline);toolbar[0].style.display none;border[0].style.border none;}editor.setData(that.ckEditorValue);that.editor editor;}).catch((error) console.error(error));},clear() {this.editor.setData();}}}
/scriptstyle.ck-body-wrapper {position: absolute;z-index: 3000;}.ck a {color: rgb(24, 144, 255);}
/stylestyle langscss scoped
/style
第七步 页面引用
templateCkEditor :ckEditorValuedataForm.storageAndUse saveEditorDatasaveEditorData/CkEditor
/template
scriptimport CkEditor from ../components/CkEditor/index.vue;export default {components:{CkEditor},data() {return {dataForm: {id: null,storageAndUse: null //试剂的保存与使用},}}
