Skip to content. | Skip to navigation

Personal tools

Navigation

You are here: Home / Tips / TinyMCE Tips

TinyMCE Tips

常見的修改技巧包括 HTML 過濾、URL 轉換、工具列消失的處理。

相容議題

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 設定值 昇級處理

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

Make TinyMCE Available to Anonymous Users

Custom Inline Style

Captioned Image

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 功能。這項機制能同時服務不同的編輯器。

Webkit Browsers _mcePaste

Align Related Items Options Relative URLs in TinyMCEWidget (Products.Archetypes) Relative Path 預設沒生效 For Plone5 Always Resolve UIDs Save Plugin Oddities

https://github.com/plone/documentation/issues/798

HTML 過濾

取消過濾功能的最新方式,第一步驟是到 portal_transform 將 safe_html 的 disable_transform 填寫為 1 並儲存,第二步驟是確認 Products.TinyMCE 的 utility.py 完成修改,以 Plone 4.3.4 版本為例,已內建修改後的程式碼。必要時,需要重啟 Plone,或檢視 HTML Filter 設定值。https://dl.dropboxusercontent.com/u/11442177/allowed-css.png

HTML 程式碼被濾除: 測試過程發現跟權限有關,使用一般帳號嵌入 iframe 程式碼 (google map) 會被過濾,但使用 admin 帳號就成功。

過濾功能在新版 TinyMCE 可能失效

嵌入 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

Plone5

Image

Images uploaded via TinyMCE end up without Title

Image Picker Showing Thumbnails Internal Image 在 plone.app.content 昇級後可能無法存取

Image Scales: get_image_scales

客製化

Internal Link Browser 現行目錄

Per User / Group Settings

Buttons for Field

video tag shortcodez

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

Use Rich Media

Disable URL Conversions

How to replace <b> with <strong> in TinyMCE for Plone

Reference Picker for Images

Relative Path for Page or Static Portlet

程式碼方式指定型別為 folderish

Collective Editing

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