TinyMCE Tips
Templating
TinyMCE 在 Plone5 支援 Templating Engine
Default Mockup Configuration rt.zptformfield
plone/app/form/widgets/wysiwygwidget.pt (line 21)
support_path string:nocall:here/${editor}_wysiwyg_support|here/${editor}/wysiwyg_support|here/po
相容議題
1.3 版本之前在 IE 9 環境會有問題，至少要昇級到 Products.TinyMCE 1.3 之後的版本，或讓 IE 9 模擬成 IE 8，在 main_template.pt 加上：
<meta content="IE=EmulateIE8" http-equiv="X-UA-Compatible">
Products.TinyMCE 1.3 算是重寫的模組，加了 plone.app.layout >= 2.3.7 相依關係，留意是否產生 AttributeError: 'View' object has no attribute 'getId' 錯誤。以 Plone 4.2.3 搭配 Products.TinyMCE 1.3b8 為例，還會加入 plone.namedfile 1.0.6, plone.rfc822 1.0, zope.app.file 3.6.1。常見的預設版本號碼如下：
Plone TinyMCE 4.3.2 1.3.5 4.3.3 1.3.6
想要直接使用最新版的 TinyMCE 的話，可以參考昇級文件，或是留意 plone.app.upgrade 的昇級程式，更新的翻譯檔案已被收入。
工具列 toolbar 消失 更新版本範例 4.3 版本無法穩定載入 GenericSetup 設定值 昇級處理 調整 Format Menu
Impossible to hide a format group (for example block)
Upload 不會通知 Zope Event (Archetypes Event Hook):
For Plone 4: Products.TinyMCE's upload does in fact use invokeFactory, but invokeFactory (via all FactoryTypeInformation subclasses, including Dexterity's) notifies events on content construction within container.
For Plone 5, plone.app.content.browser.file.FileUploadView uses plone.dexterity.utils.createContentInContainer(), which does notify IObjectCreatedEvent, and via the OFS.ObjectManager.ObjectManager._setObject() method IObjectAddedEvent is notified.
在未登入的狀態下，要事先提供 mockup-patterns-tinymce 環境。
<script> require(['mockup-patterns-tinymce']); </script>
Custom Addon Plugin URL Path Custom Plugin: TypeError: editor.getDoc() is null Chrome: Uncaught TypeError: Cannot read property ‘documentElement’ of null
Make TinyMCE Available to Anonymous Users
Captioned Image Captioned Image Markup + Diazo
Captioned Images Source Plone 4 Version Diazo Version
plone.outputfilters
plone.outputfilters 提供 Filter 的註冊機制，用來轉換文字格式。當 text/html 換成 text/x-html-safe 時，預設是透過 PortalTransforms 來呼叫 Filter。轉換的結果可能會被快取記錄，預設有 Resolving UID-based Links 和 Image Captioning 功能。這項機制能同時服務不同的編輯器。
Align Related Items Options Relative URLs in TinyMCEWidget (Products.Archetypes) Relative Path 預設沒生效 For Plone5 Always Resolve UIDs Save Plugin Oddities
HTML 過濾
取消過濾功能的最新方式，第一步驟是到 portal_transform 將 safe_html 的 disable_transform 填寫為 1 並儲存，第二步驟是確認 Products.TinyMCE 的 utility.py 完成修改，以 Plone 4.3.4 版本為例，已內建修改後的程式碼。必要時，需要重啟 Plone，或檢視 HTML Filter 設定值。
HTML 程式碼被濾除: 測試過程發現跟權限有關，使用一般帳號嵌入 iframe 程式碼 (google map) 會被過濾，但使用 admin 帳號就成功。
嵌入 Youtube Flickr 等服務 與 mediaelement.js 衝突的處理
Inline Image Filtering: Safe HTML Transform
HTML 預覽: David Glick - Including an actual HTML preview in tinymce is problematic because tinymce doesn't have a way to group elements together. So the user can just drag part of the preview somewhere else, and not realize that they broke things until after they save.
URL 轉換
# browser/configure.zcml
<browser:page
for="*"
name="tinymce-jsonconfiguration"
class=".tinymce.TinyMCEBrowserView"
permission="zope2.View"
attribute="jsonConfiguration"
layer="..interfaces.IMyBrowserLayer"
/>
# browser/tinymce.py
try:
import simplejson as json
except ImportError:
import json
from Acquisition import aq_inner
from Products.CMFCore.utils import getToolByName
from Products.TinyMCE.browser.browser import TinyMCEBrowserView as View
from Products.TinyMCE.browser.interfaces.browser import ITinyMCEBrowserView
from zope.interface import implements
class TinyMCEBrowserView(View):
implements(ITinyMCEBrowserView)
def jsonConfiguration(self, field):
"""Return the configuration in JSON"""
utility = getToolByName(aq_inner(self.context), 'portal_tinymce')
config = utility.getConfiguration(context=self.context,
field=field,
request=self.request)
config['convert_urls'] = False
return json.dumps(config)
Linkable
Image
Images uploaded via TinyMCE end up without Title
Image Picker Showing Thumbnails Internal Image 在 plone.app.content 昇級後可能無法存取
Image Scales: get_image_scales
客製化
CSS 客製 collective.tinymcetiles collective.tinymceplugins.tooltip collective.tinymceplugins.embedly http://pypi.python.org/pypi/collective.tinymceplugins.advfilelinks 利用 z3c.jbot 修改 Products.TinyMCE.skins.tinymce.plugins.plonebrowser.css.plonebrowser.css
Barceloneta Theme Isolates AutoTabs Class for ul Elements to .autotabs ul.autotoc-nav
在 News 目錄新增內容時，想要插入圖片，可能會遇到「不允許上傳檔案到這個資料夾」訊息，這是因為 News 目錄要指定可新增的型別才行。
Embed Pinterest Board Widget in Plone 4.1.x
Products.TinyMCE 1.4.0 requires plone.app.layout==2.3.7, which includes bodyClass fix. Plone 4.3.3 by default runs with plone.app.layout==2.3.11.
新增客製化的按鈕或樣式 動態更新的文字區塊: uwosh.snippets
Plone 4.1.4 時代的 TinyMCE 工具列顯示問題
Text Color and Background Color
New dexterity content type is not visible from the “add link” dialogue Add Link/Image Shortcuts to Content Browser
How to replace <b> with <strong> in TinyMCE for Plone
Relative Path for Page or Static Portlet
http://plone.jp/documentation/knowhow/internet-explorer-9-ie9.html
Rich Text Tile Tries to Load Incorrect JavaScript URL
KeyError: 'Interface `collective.tinymceplugins.imagebrowser.interfaces.ITinyMCELibrariesImageResources` defines a field `imagebrowser_resources`, for which there is no record.'
Tips to Search Keywords and Modify Codes
Sample Case
When editing, we will see a user interface to choose images. In this case, we want change ‘Home’ to ‘Multimedia’ folder, that is a self-created folder in root directory.
Finally, we have the translated UI message as the following screenshot.
Step 0
Assume we use Plone 4.0.7 UnifiedInstall and specify target directory to ‘~/plone407’.
Plone is built by many Python packages, which are placed at buildout-cache/eggs directory.
$ cd ~/plone407/buildout-cache/eggs
You can see lots of directories named as package.name-version-py2.6.egg.
Step 1
One package named ‘plone.app.locales’ is for maintaining HTML messages and their translation. We can look into the package, and search for keywords from the message.
$ cd plone.app.locales-4.0.7-py2.6.egg/plone/app/locales $ grep -r 'Current Folder' locales/zh_TW $ cd ~/plone407/buildout-cache/eggs $ grep -r 'Current Folder' .
The output message hints Products.TinyMCE-1.1.10-py2.6.egg/Products/TinyMCE/locales/ containing "msgid Current Folder" in its PO files.
Step 2
Change directory to Products.TinyMCE-1.1.10-py2.6.egg/Products/TinyMCE/locales/zh_TW/LC_MESSAGES and look into the file plone.tinymce.po. Around line 254, you will see the following text:
#. Default: "Home" #: TinyMCE/skins/tinymce/plugins/ploneimage/ploneimage.htm.pt:25 #: TinyMCE/skins/tinymce/plugins/plonelink/plonelink.htm.pt:26 msgid "Home" msgstr "首頁"
The text indicates we look into the file TinyMCE/skins/tinymce/plugins/ploneimage/ploneimage.htm.pt:
<a href="javascript:ImageDialog.displayPanel('internal_panel'); ImageDialog.getFolderListing(tinyMCEPopup.editor.settings.navigation_root_url, 'tinymce-jsonimagefolderlisting');">
<img alt="" tal:attributes="src string:$portal_url/logoIcon.gif"/>
<span i18n:domain="plone.tinymce" i18n:translate="">Home</span>
</a>
In a PO file, msgid is for the English term, and msgstr is for the localized term. Follow this pattern to add your message translation. In our case, add the following lines:
msgid "Multimedia" msgstr "多媒體"
to the end of the file. Save the file, then use msgfmt to compile the PO file into MO file:
$ msgfmt -o plone.tinymce.mo plone.tinymce.po
不清楚哪裡記下的內容:
<input type="button" id="upload" class="context" name="upload" value="Upload file" i18n:domain="crgis.tinymce" i18n:attributes="value"
onclick="ImageDialog.displayPanel('upload_panel');" />