-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwidgetizing-wysiwyg.html
169 lines (123 loc) · 16.3 KB
/
widgetizing-wysiwyg.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
163
164
165
166
167
168
169
<!DOCTYPE html>
<!--[if IEMobile 7]><html class="iem7" lang="en" dir="ltr"><![endif]-->
<!--[if lte IE 6]><html class="lt-ie9 lt-ie8 lt-ie7" lang="en" dir="ltr"><![endif]-->
<!--[if (IE 7)&(!IEMobile)]><html class="lt-ie9 lt-ie8" lang="en" dir="ltr"><![endif]-->
<!--[if IE 8]><html class="lt-ie9" lang="en" dir="ltr"><![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--><html lang="en" dir="ltr"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="../sites/all/themes/sitetheme/favicon.ico" type="image/vnd.microsoft.icon" />
<meta name="description" content="Learn to build rich content widgets for your WYSIWYG." />
<meta name="generator" content="Drupal 7 (http://drupal.org)" />
<link rel="canonical" href="../node/69.html" />
<link rel="shortlink" href="../node/69.html" />
<title>Widgetizing WYSIWYG | MidCamp</title>
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
<!-- <a href="https://plus.google.com/105676072717448976925" rel="publisher" /> -->
<link type="text/css" rel="stylesheet" href="../sites/default/files/css/css_lQaZfjVpwP_oGNqdtWCSpJT1EMqXdMiU84ekLLxQnc4.css" media="all" />
<link type="text/css" rel="stylesheet" href="../sites/default/files/css/css_Lwq5JSI1tGRjp1FRNxg5kt8fOiI4e0flzM6YeUq78u8.css" media="all" />
<link type="text/css" rel="stylesheet" href="../sites/default/files/css/css_atkFGFlvG6sSQcIj6Q73rpgsXhtr58AwITc2aQjVotk.css" media="all" />
<link type="text/css" rel="stylesheet" href="../sites/default/files/css/css_GSl0KrVrOmPGyWhvCYT4-PlK0I1rEce-UTDdvd4mKho.css" media="all" />
<script src="../sites/default/files/js/js_vDrW3Ry_4gtSYaLsh77lWhWjIC6ml2QNkcfvfP5CVFs.js"></script>
<script src="../sites/default/files/js/js_6RfqyQ6dGB15EZV8a7SPpd5EOSSerQR7s-GxPVyVTqA.js"></script>
<script src="../sites/default/files/js/js_I8yX6RYPZb7AtMcDUA3QKDZqVkvEn35ED11_1i7vVpc.js.html"></script>
<script>(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,"script","//www.google-analytics.com/analytics.js","ga");ga("create", "UA-60086119-1", {"cookieDomain":".2015.midcamp.org"});ga("set", "anonymizeIp", true);ga("send", "pageview");</script>
<script>jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"sitetheme","theme_token":"s-c33Y4Dw6HFgo0KS-dWV-gmoduHR5db4B5tZ9aK8sQ","js":{"sites\/all\/themes\/sitetheme\/js\/script.js":1,"sites\/all\/themes\/sitetheme\/js\/google_fonts.js":1,"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"sites\/all\/modules\/contrib\/environment_indicator\/tinycon.min.js":1,"sites\/all\/modules\/contrib\/environment_indicator\/environment_indicator.js":1,"sites\/all\/modules\/contrib\/environment_indicator\/color.js":1,"sites\/all\/modules\/contrib\/google_analytics\/googleanalytics.js":1,"0":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"sites\/all\/modules\/contrib\/date\/date_api\/date.css":1,"sites\/all\/modules\/contrib\/date\/date_popup\/themes\/datepicker.1.7.css":1,"sites\/all\/modules\/contrib\/environment_indicator\/environment_indicator.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/user\/user.css":1,"sites\/all\/modules\/contrib\/youtube\/css\/youtube.css":1,"sites\/all\/modules\/contrib\/views\/css\/views.css":1,"sites\/all\/modules\/contrib\/ctools\/css\/ctools.css":1,"sites\/all\/modules\/contrib\/panels\/css\/panels.css":1,"sites\/all\/themes\/sitetheme\/system.menus.css":1,"sites\/all\/themes\/sitetheme\/system.messages.css":1,"sites\/all\/themes\/sitetheme\/system.theme.css":1,"sites\/all\/themes\/sitetheme\/css\/styles.css":1}},"googleanalytics":{"trackOutbound":1,"trackMailto":1,"trackDownload":1,"trackDownloadExtensions":"7z|aac|arc|arj|asf|asx|avi|bin|csv|doc(x|m)?|dot(x|m)?|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt(x|m)?|pot(x|m)?|pps(x|m)?|ppam|sld(x|m)?|thmx|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls(x|m|b)?|xlt(x|m)|xlam|xml|z|zip","trackDomainMode":"1"}});</script>
<!--[if lt IE 9]>
<script src="/sites/all/themes/zen/js/html5-respond.js"></script>
<![endif]-->
</head>
<body class="html not-front not-logged-in no-sidebars page-node page-node- page-node-69 node-type-session section-session-proposal page-panels" >
<p id="skip-link">
<a href="../node/69.html#main-menu" class="element-invisible element-focusable">Jump to navigation</a>
</p>
<div class="header__top">
<div class="header__region region region-header">
<div id="block-system-user-menu" class="block block-system block-menu first odd" role="navigation">
<h2 class="block__title block-title">User menu</h2>
<ul class="menu"><li class="menu__item is-leaf first leaf menu__item level-1 menu__item--create-account"><a href="../user/register.html" title="" class="menu__link">Create Account</a></li><li class="menu__item is-leaf last leaf menu__item level-1 menu__item--login"><a href="../user/login.html" title="" class="menu__link">Login</a></li></ul>
</div>
<div id="block-block-1" class="block block-block last even">
<p>March 19-22, 2015 at University of Illinois at Chicago (UIC)</p>
</div>
</div>
</div>
<div id="navigation" class="clearfix">
<div class="inner">
<a href="../index.html" title="Home" rel="home" class="logo-mobile">MidCamp</a>
<a class="links--mobile__title ss-icons ss-rows"></a>
<div class="links--mobile__container">
<input type="checkbox" id="toggle-button"><label for="toggle-button" onclick></label>
<div class="menus">
<nav id="user-menu" role="navigation" tabindex="-1"><ul class="menu--user-menu menu links"><li class="menu__item is-leaf first leaf menu__item level-1 menu__item--create-account"><a href="../user/register.html" title="" class="menu__link">Create Account</a></li><li class="menu__item is-leaf last leaf menu__item level-1 menu__item--login"><a href="../user/login.html" title="" class="menu__link">Login</a></li></ul></nav> <nav id="main-menu" role="navigation" tabindex="-1"><ul class="menu--main-menu menu links"><li class="menu__item is-expanded first expanded dropdown menu-item level-1"><input type="checkbox" /><a href="../node/15.html" class="menu__link" data-toggle="dropdown" aria-haspopup="true">Camp<i class="icon theme-icon-arrow-down"></i></a><ul class="menu--main-menu_sub dropdown-menu menu"><li class="menu__item is-leaf first leaf level-2"><a href="../node/123.html" title="" class="menu__link">Buy Tickets</a></li><li class="menu__item is-leaf leaf level-2"><a href="../node/4.html" class="menu__link">Venue</a></li><li class="menu__item is-leaf leaf level-2"><a href="../node/101.html" title="Navigating around the venue" class="menu__link">Closer Look at the Venue</a></li><li class="menu__item is-leaf leaf level-2"><a href="../about/news.html" class="menu__link">News</a></li><li class="menu__item is-expanded expanded level-2"><a href="../community.1.html" class="menu__link">Community</a><nav id="main-menu" role="navigation" tabindex="-1"><ul class="menu--main-menu menu links"><li class="menu__item is-leaf first last leaf menu-item level-3"><a href="../community/all.html" class="menu__link">Community</a></li></ul></nav></li><li class="menu__item is-leaf leaf level-2"><a href="../node/158.html" class="menu__link">Speaker Resources</a></li><li class="menu__item is-leaf last leaf level-2"><a href="../node/178.html" class="menu__link">Nearby Restaurants</a></li></ul></li><li class="menu__item is-expanded expanded dropdown menu-item level-1"><input type="checkbox" /><a href="../node/58.html" class="menu__link" data-toggle="dropdown" aria-haspopup="true">Schedule<i class="icon theme-icon-arrow-down"></i></a><ul class="menu--main-menu_sub dropdown-menu menu"><li class="menu__item is-leaf first leaf level-2"><a href="../schedule/friday.html" title="" class="menu__link">Friday schedule</a></li><li class="menu__item is-leaf leaf level-2"><a href="../schedule/saturday.html" title="" class="menu__link">Saturday schedule</a></li><li class="menu__item is-leaf last leaf level-2"><a href="../sessions.html" title="" class="menu__link">Filterable Sessions</a></li></ul></li><li class="menu__item is-expanded expanded dropdown menu-item level-1"><input type="checkbox" /><a href="../trainings.html" title="" class="menu__link" data-toggle="dropdown" aria-haspopup="true">Training Day<i class="icon theme-icon-arrow-down"></i></a><ul class="menu--main-menu_sub dropdown-menu menu"><li class="menu__item is-leaf first leaf level-2"><a href="../node/145.html" class="menu__link">Absolute Beginners Guide to Drupal</a></li><li class="menu__item is-leaf leaf level-2"><a href="../node/139.html" class="menu__link">Behavior Driven Development with Behat</a></li><li class="menu__item is-leaf leaf level-2"><a href="../node/140.html" class="menu__link">Build. Launch. Run.</a></li><li class="menu__item is-leaf last leaf level-2"><a href="../node/141.html" class="menu__link">Intro to Drupal 7 Module Development</a></li></ul></li><li class="menu__item is-expanded expanded dropdown menu-item level-1"><input type="checkbox" /><a href="../sponsors.html" class="menu__link" data-toggle="dropdown" aria-haspopup="true">Sponsors<i class="icon theme-icon-arrow-down"></i></a><ul class="menu--main-menu_sub dropdown-menu menu"><li class="menu__item is-leaf first last leaf level-2"><a href="../node/1.html" class="menu__link">Become a Sponsor</a></li></ul></li><li class="menu__item is-leaf last leaf menu-item level-1"><a href="../jobs.html" class="menu__link">Jobs</a></li></ul></nav></div>
</div>
</div>
</div>
<div class="header-wrapper">
<header class="header__region" id="header" role="banner">
<div class="header__badge">
<a href="../index.html" title="Home" rel="home" class="header__logo" id="logo"><img src="../sites/all/themes/sitetheme/logo.png" alt="Home" class="header__logo-image" /></a>
<div class="header__name-and-slogan" id="name-and-slogan">
<h1 class="header__site-name" id="site-name">
<a href="../index.html" title="Home" class="header__site-link" rel="home"><span>MidCamp</span></a>
</h1>
<h1 class="page__title title session__title" id="page-title">Widgetizing WYSIWYG</h1>
</div>
</div>
</header>
</div>
<div id="page">
<div id="main">
<div id="content" class="column session-detail" role="main">
<nav class="breadcrumb" role="navigation"><h2 class="element-invisible">You are here</h2><ol><li><a href="../index.html">Home</a></li></ol></nav> <a id="main-content"></a>
<article class="node-69 node node-session view-mode-full node--session__full clearfix">
<div class="field field-name-field-speakers field-type-entityreference field-label-inline clearfix"><div class="field-label">Speakers: </div><div class="field-items"><div class="field-item even">bneil</div></div></div><div class="field field-name-field-track field-type-taxonomy-term-reference field-label-inline clearfix"><div class="field-label">Track: </div><div class="field-items"><div class="field-item even">Coding</div></div></div><div class="field field-name-field-audience field-type-taxonomy-term-reference field-label-inline clearfix"><div class="field-label">Audience: </div><div class="field-items"><div class="field-item even">Intermediate</div></div></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"><p>Ever want to build accordions, maps, callouts or other custom content for your WYSIWYG? With CKEditor 4 - now you can - easier than ever!</p><p>This session will focus on one of the cool new features of CKEditor 4: the widget plugin. Widgets are immutable objects you define to help your editors create rich content yet have the flexibility to move around, edit or style without having to edit the source or apply classes manually. Widgets can have multiple components but are treated as one "entity" which make them a powerful tool for building complex content that is simple for editors to maintain.</p><p>We will focus on building and discovering CKEditor plugins that you can use in your Drupal 7 projects today, but the knowledge will be easily transferable to Drupal 8, as CKEditor 4 is the default WYSIWYG.</p><p><a href="http://bit.ly/widgetizing-presentation" rel="nofollow">Slides</a></p><p><a href="http://bit.ly/widgetizing-code" rel="nofollow">Code</a></p><p><a href="https://joind.in/talk/view/13822" rel="nofollow">Give feedback on talk</a></p></div></div></div><div class="field field-name-field-length field-type-list-text field-label-inline clearfix"><div class="field-label">Length: </div><div class="field-items"><div class="field-item even">50 minutes</div></div></div><div class="field field-name-field-session-video field-type-youtube field-label-above"><div class="field-label">Session video: </div><div class="field-items"><div class="field-item even"><iframe id="youtube-field-player" class="youtube-field-player"
width="420" height="315"
src="https://www.youtube.com/embed/jVVHVCL7sOw?wmode=opaque" title="Embedded video for Widgetizing WYSIWYG" frameborder="0"
allowfullscreen></iframe></div></div></div>
</article>
</div>
</div>
</div>
<div class="footer-wrapper">
<footer id="footer" class="footer__region region region-footer">
<div id="block-menu-menu-footer-navigation" class="block block-menu first odd" role="navigation">
<div class="block-inner">
<ul class="menu__footer-navigation links inline inline-links"><li class="menu__item is-leaf first leaf"><a href="../node/2.html" title="" class="menu__link">Code of Conduct</a></li>
<li class="menu__item is-leaf leaf"><a href="https://twitter.com/MidwestCamp" title="" class="menu__link">Twitter</a></li>
<li class="menu__item is-leaf leaf"><a href="https://www.facebook.com/MidCamp" title="" class="menu__link">Facebook</a></li>
<li class="menu__item is-leaf leaf"><a href="https://plus.google.com/+MidCampOrg" title="" class="menu__link">Google+</a></li>
<li class="menu__item is-leaf last leaf"><a href="https://twitter.com/search?f=realtime&q=%23MidCamp&src=typd" title="" class="menu__link">#MidCamp</a></li>
</ul>
</div>
</div>
<div id="block-views-random-sponsor-gold" class="block block-views even">
<div class="block-inner">
<div class="view view-random-sponsor view-id-random_sponsor view-display-id-gold view-dom-id-340b2cdaf0aa7f43f6e531f0133186da">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
<div class="views-field views-field-field-image"> <div class="field-content"><a href="../node/137.html"><img src="../sites/default/files/styles/sponsor_footer/public/sponsors/bt_horizontal_logo_digital_v3_022515.png%3Fitok=lj6TsUYc" width="254" height="60" alt="" /></a></div> </div> </div>
</div>
</div>
<h2 class="block__title block-title">Is a Gold Sponsor!</h2>
</div>
</div>
<div id="block-views-random-sponsor-silver" class="block block-views last odd">
<div class="block-inner">
<div class="view view-random-sponsor view-id-random_sponsor view-display-id-silver view-dom-id-ed40b6736ac4d490edc018c65df0890f">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
<div class="views-field views-field-field-image"> <div class="field-content"><a href="../node/148.html"><img src="../sites/default/files/styles/sponsor_footer/public/sponsors/aten-horizontal-update.png%3Fitok=rsbVOpKL" width="135" height="60" alt="" /></a></div> </div> </div>
</div>
</div>
<h2 class="block__title block-title">Is a Silver Sponsor!</h2>
</div>
</div>
</footer>
</div>
<script src="../sites/default/files/js/js_vVlWfsDgq27ypN6KJTygzAqN1nk0JW5lt4sp7W4x0VY.js"></script>
</body>
</html>