Tinymce5移动端预览插件

发表于： 2019年9月24日 2019年10月8日
分类：开发

背景

tinymce本身是所见即所得的内容编辑器，也就是编辑的效果就是最终效果。事实上，还是有一点差异的。

这个差异主要是在不同浏览器，不同尺寸的设备，默认样式等导致的，以及项目自身引入的自定义展示样式引起的样式污染等。

在项目实际使用中，有这个场景，发布的富文本内容会在PC端大屏进行展示也需要在手机端展示，内容多为图文类型。所以需要在编辑时候查看手机端的表现效果。

方案

项目采用了Tinymce 5，丢掉了之前的很多历史包袱。Tinymce5的插件机制非常完善了。提供的基础交互组件（Dialog、WindowManager等）具有非常完备的叫接口。

所以采用plugin的方式，增加一个内容预览组件，提供PC版和移动端两种宽度下的预览效果。

组件基于自身的preview组件编写，在页面底部增加了宽度切换按钮（全宽->375宽度）。

效果

问题

在实现过程中发现tinymce5完全摒弃了窗口宽度(plugin_preview_width)自定义控制，而是通过size属性控制大小，且只有’normal’、’large’、’middle’三个宽度。所以不能直接控制宽度，最后反复尝试可以通过max-width样式控制窗口的宽度。

插件说明：

1 2	参数： plugin_preview_min_width: 小屏宽度默认400

插件源代码(ES6语法、未支持多语言)

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

/**

* Licensed under the LGPL or a commercial license.

* For LGPL see License.txt in the project root for license information.

* For commercial licenses see https://www.tiny.cloud/

* Version: 5.0.16 (2019-09-24)

* Version: 1.0.1

* Modified for mobile preview

* Modified by PeterSh

(function () {

const global = tinymce.util.Tools.resolve('tinymce.PluginManager')

const query$ = tinymce.dom.DomQuery

const global$1 = tinymce.util.Tools.resolve('tinymce.util.Tools')

const getPreviewDialogWidth = function (editor) {

return parseInt(editor.getParam('plugin_preview_width', '650'), 10)

}

const getPreviewDialogHeight = function (editor) {

return parseInt(editor.getParam('plugin_preview_height', '500'), 10)

}

const getPreviewDialogMinWidth = function (editor) {

return parseInt(editor.getParam('plugin_preview_min_width', '400'), 10)

}

const getContentStyle = function (editor) {

return editor.getParam('content_style', '')

}

const shouldUseContentCssCors = function (editor) {

return editor.getParam('content_css_cors', false, 'boolean')

}

const Settings = {

getPreviewDialogWidth,

getPreviewDialogHeight,

getContentStyle,

shouldUseContentCssCors,

}

const getPreviewHtml = function (editor) {

let headHtml = ''

const encode = editor.dom.encode

const contentStyle = Settings.getContentStyle(editor)

headHtml += `<base href="${encode(editor.documentBaseURI.getURI())}">`

if (contentStyle) {

headHtml += `<style type="text/css">${contentStyle}</style>`

}

const cors = Settings.shouldUseContentCssCors(editor) ? ' crossorigin="anonymous"' : ''

global$1.each(editor.contentCSS, (url) => {

headHtml += `<link type="text/css" rel="stylesheet" href="${encode(editor.documentBaseURI.toAbsolute(url))}"${cors}>`

})

let bodyId = editor.settings.body_id || 'tinymce'

if (bodyId.indexOf('=') !== -1) {

bodyId = editor.getParam('body_id', '', 'hash')

bodyId = bodyId[editor.id] || bodyId

}

let bodyClass = editor.settings.body_class || ''

if (bodyClass.indexOf('=') !== -1) {

bodyClass = editor.getParam('body_class', '', 'hash')

bodyClass = bodyClass[editor.id] || ''

}

const preventClicksOnLinksScript =

'<script>' +

'document.addEventListener && document.addEventListener("click", function(e) {' +

'for (var elm = e.target; elm; elm = elm.parentNode) {' +

'if (elm.nodeName === "A") {' +

'e.preventDefault();' +

'}' +

'}, false);' +

'</script> '

const directionality = editor.getBody().dir

const dirAttr = directionality ? ` dir="${encode(directionality)}"` : ''

const previewHtml =

`${'<!DOCTYPE html><html style="border-radius:1px;border:1px dashed #eee;min-height:99%"><head>'}${headHtml}</head>` +

`<body id="${encode(bodyId)}" class="mce-content-body ${encode(bodyClass)}"${dirAttr}>${editor.getContent()}${preventClicksOnLinksScript}</body>` +

'</html>'

return previewHtml

}

const IframeContent = { getPreviewHtml }

const open = function (editor) {

const content = IframeContent.getPreviewHtml(editor)

const minWidth = getPreviewDialogMinWidth(editor)

const displayConfig = {

title: 'Preview',

size: 'large',

body: {

type: 'panel',

items: [

{

type: 'iframe',

sandboxed: true,

buttons: [

{

type: 'custom',

text: 'PC<-->Mobile',

{

type: 'cancel',

text: 'Close',

primary: true,

initialData: { preview: content },

onAction: (dialogApi, details) => {

if (details.name === 'toggle') {

const dialog = query$('.tox-dialog')

const prevLw = parseInt(dialog.css('width'), 10)

if (prevLw > minWidth) {

dialog.css('max-width', `${minWidth}px`)

} else {

dialog.css('max-width', null)

}

const dataApi = editor.windowManager.open(displayConfig)

dataApi.focus('close')

}

const register = function (editor) {

editor.addCommand('mceResponsePreview', () => {

open(editor)

})

}

const Commands = { register }

const register$1 = function (editor) {

editor.ui.registry.addButton('response-preview', {

icon: 'preview',

tooltip: 'Preview',

onAction() {

return editor.execCommand('mceResponsePreview')

})

editor.ui.registry.addMenuItem('response-preview', {

icon: 'preview',

text: 'Preview',

onAction() {

return editor.execCommand('mceResponsePreview')

})

}

const Buttons = { register: register$1 }

function Plugin() {

global.add('response-preview', (editor) => {

Commands.register(editor)

Buttons.register(editor)

})

}

Plugin()

}())

Peter

倾听内心，思量自我，PeterShi的博客

290